.sig-card canvas { width: 100%; height: auto; display: block; }
.draw-mask { position: relative; overflow: hidden; }
.draw-mask::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: right; transform: scaleX(1); }
.draw-mask.play::after { animation: reveal 2.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes reveal { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.blur-tile img { filter: blur(6px); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.75rem; padding:.7rem 1.2rem; font-weight:600; transition:all .15s; }
.btn-primary { background: var(--p); color:#fff; } .btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background:#fff; border:1px solid #cbd5e1; color:#0f172a; } .btn-ghost:hover { border-color:#94a3b8; }
input[type=range] { accent-color: var(--p); }