@font-face{font-family:"Roboto Mono",monospace;src:url("../fonts/font.ttf")}*{font-family:"Roboto Mono",monospace;box-sizing:border-box}:root{--control-bar-width: 360px}body{background-color:#000;position:relative;overflow:hidden;display:grid;grid-template-columns:auto var(--control-bar-width);grid-template-rows:1fr;width:100vw;height:100vh;margin:0}body .canvas-container{width:100%;height:100%}body .canvas-container canvas{position:absolute;top:0;left:0}body .controls{transition:transform .3s ease-in-out;overflow-y:auto;background-color:#fff;height:100%;padding:1em;transform:translateX(0)}.legends{float:left;height:1em;width:1em;border:1px solid #000;margin-right:.5em;clear:both}.legends.read{background-color:red}.legends.write{background-color:lime}.legends.swap{background-color:blue}.legends.compare{background-color:aqua}button.controller{z-index:4;position:absolute;top:24px;left:24px;width:48px;height:48px}button.controller svg{width:100%;height:100%}.buttons{display:flex;gap:.5em}.small_screen{display:none}@media(max-width: 1024px){.small_screen{display:block}body{grid-template-columns:1fr}body .controls{width:var(--control-bar-width);max-width:var(--control-bar-width);position:absolute;right:0;top:0}body .hide{transform:translateX(100%)}}.full-width{width:100%}