body{margin:0;font:14px system-ui;display:flex;height:100vh;color:#222}
#side{flex:none;width:270px;padding:10px;overflow:auto;border-right:1px solid #ccc;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
h1{font-size:18px;margin:0}
p{margin:0 0 4px;color:#444}
label{display:flex;justify-content:space-between;align-items:center;gap:6px}
label span{flex:1}
input[type=number]{width:64px}
select{max-width:150px;min-width:0}  /* may shrink next to a long single-word label */
canvas{flex:1;min-width:0;cursor:grab;touch-action:none}
small{color:#666}
.note{padding:10px;border-radius:6px;display:flex;flex-direction:column;gap:6px}
#url-note{background:#e6edf7}
#url-note small{color:#3b4c6b}
#footer{margin-top:auto;background:#e6f2ea}
#footer small{color:#3d5a45}