.controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;gap:10px}.controls button{padding:5px;font-size:20px;cursor:pointer;background:rgba(255,255,255,.2);border:1px solid white;border-radius:5px;color:#fff}.controls button:hover{background:rgba(255,255,255,.3)}.value-display{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:1000;color:#fff;background:rgba(0,0,0,.5);padding:10px 20px;border-radius:5px;font-family:monospace;font-size:18px}.sidebar{position:fixed;right:0;top:0;width:200px;height:100vh;background:rgba(0,0,0,.8);color:#fff;padding:20px;display:flex;flex-direction:column;z-index:1000}.object-data{flex:1;padding:10px;background:rgba(255,255,255,.1);border-radius:5px;margin-bottom:20px}.object-name{font-size:18px;font-weight:700;margin-bottom:10px}.object-properties{font-family:monospace;font-size:14px}.controls-container{margin-top:auto;padding:20px 0}.state-display{font-family:monospace;font-size:18px;padding:10px;background:rgba(255,255,255,.1);border-radius:5px;margin-bottom:10px}.arrow-controls{display:flex;gap:10px;padding:10px;flex-direction:row;justify-content:center;align-items:center}.arrow-controls button{padding:10px;width:35px;height:35px;font-size:16px;background:rgba(255,255,255,.2);border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 2px 4px #0003;line-height:1}.arrow-controls button:hover{background:rgba(198,21,21,.821);transform:scale(1.15);box-shadow:0 4px 8px #0000004d}.arrow-controls button:active,.arrow-controls button.pressed-up,.arrow-controls button.pressed-down,.arrow-controls button.pressed-left,.arrow-controls button.pressed-right{background:rgba(198,21,21,.821);transform:scale(.9);box-shadow:0 1px 2px #0006}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}canvas{display:block;width:100vw;height:100vh}
