.signature-hero{background:var(--silver-canvas);border-bottom:1px solid var(--silver-line);padding:36px 0}.signature-hero h1{letter-spacing:-.048em;margin-bottom:16px;font-size:clamp(36px,4.2vw,56px);font-weight:800;line-height:1.05}.signature-hero h1 span{color:var(--silver-violet)}.signature-hero p{color:var(--silver-muted);font-size:18px}.signature-body{padding-block:32px}.signature-panel{border:1px solid var(--silver-line);background:#fff;border-radius:8px;padding:28px}.signature-editor,.signature-info-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;display:grid}.signature-editor{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}.signature-preview-panel{position:sticky;top:20px}.signature-controls{border-left:1px solid var(--silver-line);padding-left:28px}.signature-panel h2,.signature-panel legend{margin-bottom:16px;padding:0;font-size:22px;font-weight:700}.signature-panel :is(label,input,select):not(.color-field *,.sr-only,.button){font:inherit;color:var(--silver-ink);max-width:100%;font-size:14px}.signature-panel label:not(.color-field *,.button,.signature-views *){margin:20px 0 8px;font-weight:650;display:block}.signature-panel :is(input,select):not(.color-field *,.sr-only){min-height:44px}.signature-panel .signature-pill{cursor:pointer}.signature-panel .signature-pill-outline,.signature-quiet{min-height:44px;color:var(--silver-violet-text);font:inherit;cursor:pointer;background:#fff;border:1px solid #858ba3;border-radius:100px;padding:10px 16px;font-size:14px;font-weight:600}#signature-file:focus-visible+.signature-pill,.signature-panel :is(input,select,button,a):focus-visible{outline-offset:3px;outline:3px solid #5832ce}#signature-file:disabled+.signature-pill{background:var(--silver-line);color:var(--silver-muted);cursor:not-allowed}.signature-help,.signature-source{color:var(--silver-muted);overflow-wrap:anywhere;margin-top:12px;font-size:14px}.signature-source{background:var(--silver-panel);border:1px solid var(--silver-line);border-radius:5px;padding:12px}.signature-stage{border:1px solid var(--silver-line);background-color:#f8f8fc;background-image:conic-gradient(#e6e7ef 25%, transparent 0 50%, #e6e7ef 0 75%, transparent 0);background-size:20px 20px;border-radius:5px;place-items:center;width:100%;min-height:240px;display:grid;overflow:hidden}.signature-stage[data-view=white]{background:#fff}.signature-stage[data-view=dark]{background:var(--silver-ink)}.signature-stage[data-view=original]{background:var(--silver-panel)}.signature-stage img{object-fit:contain;width:100%;max-height:420px;display:block}.signature-stage .signature-stale{opacity:.45}#signature-empty{text-align:center;color:var(--silver-muted);background:var(--silver-panel);padding:24px}.signature-panel fieldset{border:0;min-width:0;margin:0;padding:0}.signature-panel .signature-views{flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:12px;display:flex}.signature-panel .signature-views legend{float:left;margin:0 16px 0 0;font-size:14px;font-weight:650}.signature-views label{align-items:center;gap:8px;min-height:44px;display:inline-flex}.signature-panel .signature-views input{accent-color:var(--silver-violet);flex:none;width:18px;margin:0}.signature-panel .signature-download{width:100%;margin-top:12px;font-size:16px;display:flex}.signature-download[aria-disabled=true]{background:var(--silver-line);color:var(--silver-muted);cursor:default}#signature-settings{border-top:1px solid var(--silver-line);margin-top:28px;padding-top:24px}.signature-panel input[type=range]{width:100%;accent-color:var(--silver-violet);margin:0}.signature-panel output{float:right;color:var(--silver-muted);font-weight:400}.signature-panel input[type=number],.signature-panel select{background:#fff;border:1px solid #858ba3;border-radius:5px;width:100%;padding:10px 12px}#signature-color-wrap{margin-top:16px}.signature-panel label.signature-checkbox:not(.button){align-items:center;gap:12px;min-height:44px;margin-bottom:0;display:flex}.signature-checkbox+.signature-help{margin-top:0}.signature-panel .signature-checkbox input{width:20px;height:20px;min-height:0;accent-color:var(--silver-violet);flex:none;margin:0}.signature-note{color:var(--silver-ink);background:#eae5ff;border-radius:5px;margin-top:24px;padding:16px;font-size:14px}.signature-actions{flex-wrap:wrap;gap:10px;margin-top:24px;display:flex}.signature-error{color:var(--silver-error);margin-top:12px;font-size:14px}.signature-info-grid{gap:40px;padding-block:40px}.signature-info-grid p,.signature-info-grid ol{color:var(--silver-muted);margin-top:16px}.signature-info-grid ol{padding-left:24px}.signature-info-grid li{margin-top:12px}.signature-faq details{border-bottom:1px solid var(--silver-line);padding-block:8px}.signature-faq h2{margin-bottom:16px}.signature-faq summary{cursor:pointer;align-content:center;min-height:44px;font-weight:650}.signature-faq p{color:var(--silver-muted);max-width:850px;margin-block:8px 16px}.signature-related a{min-height:44px;color:var(--silver-violet-text);align-items:center;margin-top:16px;text-decoration:underline;display:flex}.signature-body [hidden]{display:none!important}@media (width<=900px){.signature-editor,.signature-info-grid{grid-template-columns:1fr}.signature-editor{flex-direction:column;display:flex}.signature-controls,.signature-preview-panel{display:contents}.signature-editor{gap:16px}.signature-chooser{order:-1}.signature-panel .signature-help,.signature-panel h2{margin-block:0}#signature-settings,.signature-actions,.signature-note{margin-top:0}}@media (width<=900px) and (height>=700px){.signature-result:has(#signature-views:not([hidden])){z-index:1;border-bottom:1px solid var(--silver-line);background:#fff;padding-block:8px;position:sticky;top:0}.signature-result .signature-stage{min-height:120px}.signature-result .signature-stage img{max-height:22vh}.signature-result .signature-views{gap:0 10px;margin-top:4px}.signature-result .signature-views legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.signature-result .signature-views label{gap:6px;font-size:13px}.signature-result .signature-download{margin-top:4px}#signature-settings :is(input,select){scroll-margin-top:55vh}}@media (width<=600px){.signature-panel{padding:20px}}