Template development - interactive will generator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Will Form Prototype — Working (Fixed)</title>
<style>
body{font-family:Arial, sans-serif; padding:20px; max-width:1100px; margin:auto}
.section{background:#f4f4f4;padding:12px;border-radius:8px;margin-bottom:12px}
label{font-weight:700}
input,textarea,select{width:100%;padding:8px;margin-top:6px;margin-bottom:10px}
#controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#jsonEditor{width:100%;height:200px;font-family:monospace}
#output{padding:12px;background:#eef;border-radius:8px;display:none;white-space:pre-wrap}
.error{border:2px solid #E53935}
.ok{border:2px solid #4CAF50}
.small{font-size:.9rem;color:#555}
</style>
</head>