*{box-sizing:border-box}html,body,#root{display:flex;width:100%;height:100%;margin:0;padding:0;background:#000;color:#999}main{font-family:sans-serif;width:100%;height:100%;display:grid;grid-template-areas:"sidebar canvas" "sidebar canvas";grid-template-rows:1fr 100px;grid-template-columns:400px 4fr;margin:0;padding:0;line-height:1em;background:#111315}#sidebar{grid-area:sidebar;margin:20px 20px 20px 0;padding:8px;background:#222426;border-radius:0 8px 8px 0;overflow:auto}#canvas{grid-area:canvas;transition:transform .2s ease-out}#canvas,button{cursor:pointer}#canvas:active{transform:scale(.9)}#history{grid-area:history}canvas{display:flex;width:100%;height:100%}input,button{border:1px solid transparent;padding:5px 8px;margin:3px;background:rgba(0,0,0,.3);color:#ccc}input:hover,button:hover{border:1px solid #333}input:active,button:active{border:1px solid #666}button:disabled{background:transparent;color:#555}#controls{display:flex;width:100%}#controls button,.rows{width:100%}.input-row{display:flex;width:100%;gap:2px}.input-row input{width:100%}hr{background:transparent;border:none;border-bottom:1px solid #333}#history-list{margin:0;padding:0;list-style-type:none;text-align:center}#history-list li{margin-bottom:14px;opacity:0}#history-list li:nth-child(1){opacity:1;font-size:2rem;line-height:1.2;color:#32cd32}#history-list li:nth-child(2){opacity:.8;font-size:1.5rem}#history-list li:nth-child(3){opacity:.5}#history-list li:nth-child(4){opacity:.3}#history-list li:nth-child(5){opacity:.2}