*{box-sizing:border-box}html,body{background:#000;height:100%;margin:0;overflow:hidden}canvas{width:100vw;height:100vh;display:block}#tip{pointer-events:none;color:#fff;white-space:nowrap;background:#000d;border:2px solid #fff;border-radius:10px;padding:6px 12px;font:700 18px Trebuchet MS,system-ui,sans-serif;position:fixed}#tip[hidden]{display:none}#bar{align-items:center;gap:8px;display:flex;position:fixed;top:10px;left:10px}#bar button{color:#fff;cursor:pointer;background:#000c;border:2px solid #fff;border-radius:12px;padding:8px 14px;font:700 16px Trebuchet MS,system-ui,sans-serif}#bar button.on{color:#000;background:#fff}#tools{align-items:center;gap:8px;display:flex}#tools[hidden]{display:none}canvas.drawing{cursor:crosshair;touch-action:none}#palette{background:#000c;border:2px solid #fff;border-radius:14px;grid-template-columns:repeat(9,28px);gap:6px;padding:10px;display:grid;position:fixed;top:60px;left:10px}#palette[hidden]{display:none}#palette button{cursor:pointer;border:2px solid #000;border-radius:50%;width:28px;height:28px;padding:0}#palette button.picked{border-color:#fff;box-shadow:0 0 0 2px #000,0 0 0 4px #fff}