*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,sans-serif;color:#183333;background:#f5f9f8}body{display:flex;flex-direction:column}.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;background:#fff;border-bottom:1px solid #d3e1df}button,select,input{font:inherit;min-height:36px;border:1px solid #a8c7c3;border-radius:6px;padding:5px 8px;background:#fff;color:#173533}label{display:flex;align-items:center;gap:4px;font-size:12px}input[type=color]{width:40px;padding:2px}#viewport{flex:1;min-height:220px;overflow:hidden;position:relative}canvas{display:block;width:100%;height:100%;touch-action:none}#status,#info{font-size:12px;padding:6px 10px;margin:0;overflow-wrap:anywhere}#info{max-height:110px;overflow:auto;background:#fff}@media(max-width:500px){button,select{font-size:12px;min-height:36px}.toolbar{gap:5px;padding:6px}#info{max-height:100px}}