button,.state-button{background-color:#099;height:32px;width:32px;flex-shrink:0;border-radius:999px;border:none}button:hover,.state-button:hover{background-color:#66c}button:active,.state-button:active{background-color:#4040bf}button:disabled,.state-button:disabled{background-color:#4d4d4d;cursor:default}button img,.state-button img{width:100%;height:100%;object-fit:contain}.state-button.pressed{background-color:#4040bf}.container{display:flex;height:100%;width:100%}.centre-section,.side-section{display:flex;flex-direction:column;height:100%}.side-section{width:20%}.centre-section{width:60%}.control-pane-left{display:flex;flex-grow:1}.control-pane-right{display:flex;flex-shrink:0}.control-group{border:2px solid hsl(180,100%,20%);margin:2px;gap:4px;padding:4px;border-radius:999px;display:flex}.control-pane{display:flex;flex-shrink:0;overflow-x:auto}.canvas-pane{flex-grow:1;min-height:0;border:2px solid hsl(180,100%,20%);border-radius:4px;margin:2px}.picker-pane{display:flex;flex-direction:column;flex-grow:1;min-height:0}.editor-pane{display:flex;flex-direction:column;flex-shrink:0;border:2px solid hsl(180,100%,20%);border-radius:4px;margin:2px;gap:4px;padding:4px;overflow-y:auto;overflow-x:auto}.preview-pane{display:flex;flex-grow:1;min-height:0;border:2px solid hsl(180,100%,20%);border-radius:4px;margin:2px;overflow-y:auto;overflow-x:auto}.editor-field{display:flex;flex-direction:row;gap:4px}.picker-static{display:flex;flex-direction:row;overflow-x:auto;flex-shrink:0;border:2px solid hsl(180,100%,20%);border-radius:4px;margin:2px;gap:4px;padding:4px}.picker-dynamic{display:flex;flex-direction:column;overflow-y:auto;border:2px solid hsl(180,100%,20%);border-radius:4px;margin:2px;gap:4px;padding:4px}.picker-search-result{display:flex;flex-direction:row}input[type=text]{color:#fff;background-color:#000;border-radius:4px;padding:4px;outline:none;flex-grow:1;flex-shrink:1}input[type=text]:hover{border-color:#666}input[type=text]::placeholder{color:#aaa;opacity:1}input[type=color]{flex-shrink:0;margin:0;padding:0;border-radius:999px;width:32px;height:32px}html,body{margin:0;padding:0;height:100%;width:100%;font-family:monospace;font-size:medium;background-color:#000;color:#fff}.left-lower,.left-upper{width:100%;height:50%;display:flex}.upper-centre{display:flex;flex-direction:row;flex-shrink:0}.left-pane{display:flex;flex-direction:row}.right-pane{display:flex;flex-direction:row;flex-direction:row-reverse;flex-grow:1}.lower-centre{display:flex;flex-direction:row;flex-shrink:0}