html,body{margin:0;height:100%;overflow:hidden;background:#1b1d23;font-family:system-ui,sans-serif}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{display:block}#hint{position:fixed;left:50%;bottom:16px;transform:translate(-50%);color:#9aa0ad;font-size:13px;pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:14px}.label{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:8px;background:#14161cd9;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;line-height:1.2;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;transform:translateY(-34px);transition:background .15s}.label b{font-size:14px}.label span{font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}.label .dot{width:100%;height:4px;border-radius:2px;margin-bottom:3px}.label.mix{transform:translateY(-26px);padding:4px 8px;font-size:12px}#reset{pointer-events:auto;cursor:pointer;padding:6px 12px;border-radius:8px;background:#14161ce6;border:1px solid rgba(255,255,255,.25);color:#fff;font:inherit}#reset:hover{background:#3c404ef2}#app canvas,#app>div{cursor:grab}#app>div:active{cursor:grabbing}