.draw-pad{-webkit-user-select:none;user-select:none;margin:24px 0;padding:21px 24px;border:1px solid #6a50825c;border-radius:18px;background:linear-gradient(120deg,#17203bb3,#291638a6)}
.draw-pad h2{font-family:Fredoka,sans-serif;font-size:23px;margin:7px 0}
.draw-pad>p{font-size:12px;color:#beb4ce;line-height:1.6;margin:0 0 14px}
.draw-pad>p strong{font-weight:500;color:#e3d4f4}
.draw-tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:12px}
.draw-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.draw-tools button{min-width:36px;min-height:36px;border:2px solid #514668;border-radius:10px;background:#18152c;color:#ece4ff;font-size:13px;padding:4px 10px}
.draw-tools button[data-colour]{width:36px;padding:0;background:var(--swatch)}
.draw-tools button[aria-pressed=true]{border-color:#d9f76a;box-shadow:0 0 0 2px #d9f76a55}
.draw-tools button[data-size] span{display:block;margin:auto;border-radius:50%;background:currentColor}
#draw-canvas{display:block;width:100%;max-width:800px;aspect-ratio:8/5;height:auto;border-radius:14px;background:#fff;touch-action:none;cursor:crosshair;box-shadow:0 12px 35px -15px #0009}
.draw-send{display:flex;gap:10px;margin-top:12px;max-width:800px}
.draw-send input{flex:1;-webkit-user-select:text;user-select:text}
.draw-send .button{flex:none}
#draw-status{font-size:13px;min-height:1.4em;margin:9px 2px 0;color:#d9cbf0}
#draw-status[data-state=ok]{color:#d9f76a}
#draw-status[data-state=error]{color:#ffb3c4}
@media(max-width:600px){.draw-pad{padding:16px}.draw-send{flex-direction:column}.draw-tools{gap:8px 12px}}