.sig-frame{display:grid;place-items:center;--ink:var(--foreground);--font-ui:var(--font-sans);--pane-edge:var(--border);--signal:var(--ring)}.sig-frame .sig{box-shadow:inset 0 0 0 1px var(--pane-edge)}.sig{position:relative;flex:none;transition:width .6s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1),border-radius .6s cubic-bezier(.22,1,.36,1);border-radius:var(--r);overflow:hidden;background:var(--fill-slab,var(--card));color:var(--fill-on,var(--ink));font-family:var(--font-ui);touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}[data-stroke=on] .sig{box-shadow:inset 0 0 0 1px var(--pane-edge)}.sig-ink{position:absolute;inset:0;pointer-events:none;overflow:visible;--sig-c:var(--fill-on,var(--ink));color:var(--sig-c);transition:color .26s ease}.sig[data-ink=Blue] .sig-ink{--sig-c:#2446d8}[data-fill=dark] .sig[data-ink=Blue] .sig-ink{--sig-c:#7d95ff}.sig[data-settled] .sig-ink{color:color-mix(in srgb,var(--sig-c) 30%,var(--fill-slab,var(--card)))}.sig-line{height:1px;background:currentColor;opacity:.16}.sig-hint,.sig-line{position:absolute;pointer-events:none}.sig-hint{top:140px;font-size:12px;font-weight:400;letter-spacing:0;left:0;right:0;text-align:center;opacity:.38;transition:opacity .22s ease}.sig[data-inked] .sig-hint{opacity:0}.sig[data-signed]{cursor:default}.sig-face{position:absolute;left:50%;top:50%;width:300px;height:180px;translate:-50% -50%;transition:scale .6s cubic-bezier(.22,1,.36,1),opacity .42s ease .22s}.sig[data-signed] .sig-face{scale:.35;opacity:0;transition:scale .6s cubic-bezier(.22,1,.36,1),opacity .42s ease .16s}.sig[data-settled] :is(.sig-clear,.sig-hint){opacity:0;transition:opacity .16s ease}.sig[data-settled] .sig-line{opacity:.08;transition:opacity .42s ease}.sig-said{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.sig-pill{display:flex;align-items:center;gap:8px;height:100%;width:100%;justify-content:center;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;animation:sig-said .32s ease .42s both;letter-spacing:0}.sig-pill:focus-visible{outline:2px solid var(--signal,#2231dd);outline-offset:2px;border-radius:999px}.sig-check{color:#1f9d55;animation:sig-check .42s cubic-bezier(.3,1.6,.4,1) .46s both}.sig-clear{position:absolute;top:10px;right:10px;height:28px;padding:0 12px;border:0;border-radius:var(--inner);background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;font:inherit;font-size:12px;font-weight:500;cursor:pointer;opacity:0;scale:.9;pointer-events:none;-webkit-tap-highlight-color:transparent;transition:opacity .16s ease,scale .22s cubic-bezier(.24,1.34,.38,1),background .16s ease;letter-spacing:0}.sig[data-inked] .sig-clear{opacity:1;scale:1;pointer-events:auto}.sig-clear:hover{background:color-mix(in srgb,currentColor 12%,transparent)}.sig-clear:active{scale:.96}.sig-clear:focus-visible{outline:2px solid var(--signal,#2231dd);outline-offset:2px}@keyframes sig-said{0%{opacity:0}}@keyframes sig-check{0%{opacity:0;scale:.3;rotate:-20deg}}