body{font-family:Inconsolata,monospace;font-size:1.1em}button{font-size:inherit;font-family:inherit;height:2em;background-color:#fff}button:hover:not(:disabled){background-color:#ffc0c0}button:active:not(:disabled){background-color:#ff4040}#fps-counter{position:fixed;top:.5rem;right:.5rem;pointer-events:none;font-size:.9em;background-color:#00000080;color:#fff;padding:.2em .5em;border-radius:4px;z-index:1000}#root{max-width:1000px;margin:0 auto;display:flex;gap:1rem;padding:1rem}#panel-main{flex-shrink:1;flex-grow:0;width:100%;max-width:600px;display:flex;align-items:center;justify-content:center}#canvas-main{width:100%;height:auto;aspect-ratio:1 / 1;display:block}#panel-side{flex-grow:0;flex-shrink:0;width:250px;display:flex;flex-direction:column;gap:1rem}#panel-ke{position:relative}#canvas-ke{flex-shrink:1;width:100%;display:block;border:2px solid black}#label-ke{position:absolute;top:.1rem;left:.1rem;font-size:1.1em;font-weight:800;background-color:#dcdcdc80;padding:.1em .3em;pointer-events:none}.control-group{display:flex;flex-direction:column;gap:.2rem}.control-header{display:flex;justify-content:space-between;align-items:center}.button-row{display:flex;gap:.5rem}.button-row>*{flex:1;text-align:center}.button-row>span{display:flex;align-items:center;justify-content:center}.btn-reset{font-size:.7rem;background-color:#fff;border:1px solid gray}.btn-reset:hover{background-color:#f0f0f0}#footer{margin-left:1rem;margin-top:1rem;font-size:.9em}@media (max-width: 768px){body{font-size:.9em}#root{flex-direction:column}#panel-main{max-width:100%}#panel-side{width:100%;gap:.5rem}}