.sign-demo{max-width:var(--max-width);margin:0 auto;padding:160px var(--gutter) 0}.sign-demo-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.replay{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:none;border:1px solid var(--line);border-radius:var(--radius-control);cursor:pointer;transition:border-color .18s ease-out,color .18s ease-out,opacity .18s ease-out}.replay:hover:not(:disabled){border-color:var(--brand-ink);color:var(--brand-ink)}.replay:disabled{opacity:.45;cursor:default}.replay svg{width:16px;height:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stage{display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:start;gap:32px;margin-top:56px}@media(max-width:800px){.stage{grid-template-columns:1fr 1fr;gap:24px}.doc{order:-1;grid-column:1 / -1}}@media(max-width:560px){.sign-demo{padding-top:96px}.sign-demo-head{gap:16px}.stage{margin-top:32px;gap:20px}.party{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"avatar name" "avatar verdict" "key key" "keyval keyval";align-items:center;gap:0 12px;text-align:left}.avatar{grid-area:avatar}.avatar svg{width:40px;height:40px}.party-name{grid-area:name;margin:0}.verdict{grid-area:verdict;margin:4px 0 0;width:26px;height:26px}.party .key-label{grid-area:key;justify-content:flex-start;margin-top:12px}.party .key-value{grid-area:keyval}.key-value{font-size:9px;line-height:1.45}.key-label{font-size:12px}.doc-paper{padding:20px 16px 16px}.doc-text{font-size:1rem}.prints{grid-template-columns:1fr;gap:12px}.doc-seals{flex-wrap:wrap}}.party{text-align:center}.avatar svg{width:56px;height:56px;color:var(--ink);stroke-width:1.5}.party-name{margin:8px 0 0;font-weight:600}.key-label{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 4px;font-size:13px;color:var(--ink-muted)}.key-label svg{width:14px;height:14px}.doc .key-label{justify-content:flex-start}.key-value{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:-.01em;line-height:1.5;color:var(--ink-muted);word-break:break-all}.verdict{position:relative;margin:16px auto 0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);transition:background-color .26s ease-out,border-color .26s ease-out,transform .26s cubic-bezier(.16,1,.3,1)}.verdict-icon{position:absolute;width:18px;height:18px;stroke-width:3;opacity:0;transition:opacity .2s ease-out}.verdict[data-state=idle]{background:none}.verdict[data-state=verified]{border-color:var(--ok);background:var(--ok);transform:scale(1.08)}.verdict[data-state=verified] .verdict-ok{opacity:1;color:#fff}.verdict[data-state=failed]{border-color:var(--bad);background:var(--bad);transform:scale(1.08)}.verdict[data-state=failed] .verdict-bad{opacity:1;color:#fff}.doc-paper{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:28px 24px 20px;min-height:150px}.doc-text{display:block;width:100%;margin:0;padding:0;border:0;background:none;resize:none;font:inherit;font-size:1.0625rem;line-height:1.6;color:var(--ink);transition:color .2s ease-out}.doc-text:focus{outline:none}.doc-paper:focus-within{border-color:var(--ink)}.doc-text[data-altered=true]{color:var(--bad)}.doc-text:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}.prints{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:20px}.print .key-label{margin-top:0}[data-hash-now][data-match=different]{color:var(--bad)}.doc-seals{display:flex;gap:12px;margin-top:20px}.seal{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;border:1px dashed var(--line);border-radius:var(--radius-control);color:var(--ink-muted);opacity:.35;transform:scale(.96);transition:opacity .3s ease-out,transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease-out,color .3s ease-out}.seal svg{width:14px;height:14px}.seal.is-on{opacity:1;transform:none;border-style:solid;border-color:var(--ok);color:var(--ok)}.doc .key-label,.doc .key-value{text-align:left}@media(prefers-reduced-motion:reduce){.verdict,.seal,.doc-text{transition:none}.verdict[data-state=verified],.verdict[data-state=failed]{transform:none}}