.workspace{overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.workspace .panel{min-width:0;padding:var(--space)}
.workspace label{display:block;margin:0 0 6px;font-weight:650}
.workspace input{display:block;width:100%;min-width:0;margin-bottom:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}
.workspace input[type=color]{width:64px;height:42px;padding:4px}
.workspace input:focus-visible,.workspace textarea:focus-visible,.workspace button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.workspace button{font:inherit;border:1px solid var(--accent);border-radius:var(--radius);padding:10px 14px;background:var(--accent);color:var(--accent-contrast);font-weight:650;cursor:pointer}
.workspace button.secondary{background:var(--surface);color:var(--ink)}
.workspace .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
#status{margin:0;padding:14px var(--space);border-top:1px solid var(--line)}
.signature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space)}
.signature-preview{display:block;width:100%;min-height:210px;border:1px solid var(--line);border-radius:var(--radius);background:white}
.signature-output{display:block;width:100%;min-height:210px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:.8rem/1.5 ui-monospace,monospace;overflow-wrap:anywhere}
.hint{color:var(--muted);font-size:.85rem}
.explain,.faq{padding:24px 0;border-bottom:1px solid var(--line)}
.faq details{padding:14px 0;border-bottom:1px solid var(--line)}
.faq summary{font-weight:650;cursor:pointer}
@media(max-width:640px){.signature-grid{grid-template-columns:minmax(0,1fr)}}