*{box-sizing:border-box}body{margin:0;color:#172a32;background:#fff;font:13px Arial,Helvetica,sans-serif;display:flex;flex-direction:column;height:100vh}button,select,input{font:inherit}button,select{background:#fff;color:#172a32;border:1px solid #c8d3d6;border-radius:3px;padding:6px 9px}button{cursor:pointer}button.active,button:hover{border-color:#126a71;color:#126a71}.controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:7px;border-bottom:1px solid #e0e6e7}.buttons,.profile{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.profile label{display:flex;align-items:center;gap:5px;color:#53656b}.profile input{width:95px;accent-color:#126a71}#stage{flex:1;min-height:200px;position:relative;background:#eef2f2;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#loading{position:absolute;top:14px;left:14px;background:#fffe;padding:8px 10px;pointer-events:none}#labels{position:absolute;inset:0;pointer-events:none;font-size:12px}#labels span{position:absolute;transform:translate(-50%,-110%);padding:3px 5px;background:#ffffffdd;color:#126a71;border:1px solid #c8d3d6;border-radius:3px;white-space:nowrap}.caption{display:flex;justify-content:space-between;gap:15px;color:#53656b;font-size:12px;padding:8px 10px;border-top:1px solid #e0e6e7}.caption span:last-child{white-space:nowrap}details{padding:0 10px 8px;color:#53656b;font-size:12px}summary{cursor:pointer;color:#126a71}details div{padding-top:6px;line-height:1.4}a{color:#126a71}@media(max-width:700px){.profile{font-size:11px}.caption span:last-child{display:none}button{padding:5px}#stage{min-height:150px}}

#labels span{font-weight:500}.buttons{row-gap:5px}