.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); }
.font-hand { font-family: "Caveat", cursive; font-weight: 600; }
.sig-line { background-image: linear-gradient(#cbd5e1, #cbd5e1); background-size: 84% 1px; background-position: 50% 78%; background-repeat: no-repeat; }
.sigdraw svg { width: 100%; height: auto; display: block; }
.sigdraw .ink, .sigdraw .ink-full { fill: #111827; }
.checker { background-color: #fff; background-image: linear-gradient(45deg, #eef2f7 25%, transparent 25%), linear-gradient(-45deg, #eef2f7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef2f7 75%), linear-gradient(-45deg, transparent 75%, #eef2f7 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.ink-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p); }
.prose-sg p { margin-top: .9rem; line-height: 1.75; color: #334155; }