One reason. One informational request.

HTML for this example

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>One reason. One informational request.</title><style>*{box-sizing:border-box}:root{--ink:#24333d;--muted:#586872;--line:#cfd9de;--accent:#27627b;--soft:#edf3f5;--paper:white;color-scheme:light}body{margin:0;background:#f2f4f4;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:1100px;padding:28px 32px 64px;margin:auto}header{margin-bottom:20px}h1{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.035em;line-height:1.18;margin:0 0 9px}h2{font-size:1.2rem;line-height:1.3;margin:0 0 15px}h3{font-size:1rem;margin:0 0 8px}p{margin:9px 0 16px}header p{margin-bottom:0}.eyebrow{font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}.muted,small{color:var(--muted)}.panel{background:var(--paper);border:1px solid var(--line);padding:24px;border-radius:12px}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.triple{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}.below{margin-top:24px}label{display:block;font-size:.9rem;font-weight:650}input,select,textarea,button{font:inherit}input,select,textarea{display:block;width:100%;min-width:0;margin-top:6px;padding:10px 12px;border:1px solid #879da8;border-radius:6px;background:white;color:var(--ink)}input,select{min-height:46px}textarea{resize:vertical;line-height:1.6}button{min-height:44px;border:1px solid var(--accent);border-radius:6px;padding:9px 15px;background:var(--accent);color:white;font-weight:650;cursor:pointer}button.secondary{background:white;color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button:hover:enabled{filter:brightness(.95)}:focus-visible{outline:3px solid #bb6b22;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.result{padding:26px;background:var(--ink);color:white;border-radius:12px}.result .muted{color:#d1e0e7}.big{font-size:clamp(2rem,5vw,3.5rem);line-height:1.15;letter-spacing:-.04em;font-weight:750;font-variant-numeric:tabular-nums;margin:10px 0;overflow-wrap:anywhere}.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.error{min-height:24px;color:#a33028;font-weight:650;margin:9px 0 0}.status{font-size:.9rem;color:var(--muted)}.note{padding:12px 16px;background:#fff3de;border-left:3px solid #b67e38;color:#65481d}table{width:100%;border-collapse:collapse;font-size:.92rem}th{text-align:left;color:var(--muted);font-size:.83rem}th,td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}th:first-child,td:first-child{padding-left:0}details{padding:16px 0;border-top:1px solid var(--line)}summary{font-weight:650;cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.87rem/1.6 ui-monospace,Consolas,monospace;background:#edf1f3;border:1px solid #d7e0e4;padding:18px;border-radius:7px}svg{display:block;width:100%;height:auto}.badge{display:inline-block;padding:3px 9px;background:var(--soft);color:var(--accent);font-size:.78rem;font-weight:700;border-radius:25px}.rule{height:1px;background:var(--line);margin:18px 0}[hidden]{display:none!important}a{color:var(--accent)}@media(max-width:720px){main{padding:22px 20px 45px}.grid{grid-template-columns:1fr;gap:18px}.panel{padding:20px}.triple{grid-template-columns:1fr 1fr}.triple>label:first-child{grid-column:1/-1}}@media(max-width:400px){main{padding:18px 16px 36px}.panel{padding:16px}.fields{gap:12px}.result{padding:20px}.big{font-size:2.2rem}th,td{padding:9px 5px}}:root{--accent:#715941}body{background:#f4f0e9}main{max-width:980px}.email-sheet{background:#fffdf9;border:1px solid #d9cbb7;border-top:5px solid #a18a67;padding:24px 28px}.email-sheet input{font-weight:650;background:transparent;border:0;border-bottom:1px solid #d9cbb7;border-radius:0;padding:8px 0}.email-sheet textarea{border:0;background:transparent;padding:0;min-height:340px;font-size:1rem}.email-sheet .below{margin-top:18px}.evidence{padding:4px 4px 0}.evidence dl{margin:0}.evidence dl>div{display:grid;grid-template-columns:100px 1fr;gap:24px;border-bottom:1px solid var(--line);padding:14px 0}.evidence dt{font-weight:750}.evidence dd{margin:0}@media(max-width:600px){.email-sheet{padding:20px}.email-sheet textarea{min-height:530px}.evidence dl>div{grid-template-columns:1fr;gap:5px}}</style></head><body><main><header><h1>One reason. One informational request.</h1><p>Fictional C01 email draft: subject and body are ready to select as plain text.</p></header>
<section class="email-sheet"><label for="subject">Subject<input id="subject" readonly value="Question about volunteer coordination"></label><label for="body" class="below">Body<textarea id="body" readonly rows="14">Hi Jordan,

I am Riley, a student working on a volunteer sign-up project. Your description of coordinating weekend library volunteers caught my attention.

I would like to understand how you decide what a first-time volunteer needs before their first shift. Would you be open to a 15-minute informational conversation in the next two weeks?

If a call is inconvenient, a short reply about that question would also help.

Thank you for considering it.

Riley</textarea></label><div class="actions"><button type="button" id="selectSubject" class="secondary">Select subject</button><button type="button" id="selectBody" class="secondary">Select body</button></div><p id="copyStatus" role="status" class="status"></p></section>
<section class="below evidence"><div class="badge" id="draftStatus">Draft only · fictional model</div><h2 class="below">Why this opening is supported</h2><dl><div><dt>S1 + S2</dt><dd>Riley is a student working on a volunteer sign-up project.</dd></div><div><dt>P1</dt><dd>Jordan’s supplied fictional profile fragment: “coordinates weekend library volunteers.”</dd></div><div><dt>The request</dt><dd>One learning question, a proposed 15-minute conversation within two weeks, or a reply about that same question. No appointment is implied.</dd></div></dl><div class="actions"><button type="button" id="bad" class="secondary">Inspect the unsupported C02 opening</button><button type="button" id="restore" class="secondary">Restore supported C01</button></div><p id="review" class="note">The model uses only S1/S2/P1. No actual contact, reply, or meeting exists.</p></section>
<details class="below"><summary>Blank real-person evidence record</summary><table><tr><th>Field</th><th>Actual record</th></tr><tr><td>Sender and recipient facts / addresses</td><td>Not supplied</td></tr><tr><td>Verified profile excerpt</td><td>Not supplied</td></tr><tr><td>Source URL / retrieval date</td><td>Not supplied</td></tr><tr><td>Relevance to the sender’s question</td><td>Not supplied</td></tr><tr><td>Reply / appointment / referral</td><td>Not recorded</td></tr></table><p>Missing real evidence blocks readiness for real use. Do not add shared alumni status, previous meetings, awards, hiring roles, or referral claims. A decline should be respected; silence leaves the response unknown.</p></details>
<details><summary>Copying and draft status</summary><p>Select subject or body, then use your device’s Copy command. The selection controls do not send or copy automatically. Review line breaks in the native email client. This page does not connect an inbox, track opens, scrape profiles, send messages, save outreach records, or promise a response.</p></details></main><script>const $=id=>document.getElementById(id),put=(id,s)=>{$(id).textContent=s};
function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
function gcd(a,b){a=a<0n?-a:a;b=b<0n?-b:b;while(b){[a,b]=[b,a%b]}return a||1n;}
function R(n,d=1n){n=BigInt(n);d=BigInt(d);if(d===0n)throw Error('Undefined denominator.');if(d<0n){n=-n;d=-d}const g=gcd(n,d);return {n:n/g,d:d/g};}
function mul(a,b){return R(a.n*b.n,a.d*b.d)}function div(a,b){return R(a.n*b.d,a.d*b.n)}function add(a,b){return R(a.n*b.d+b.n*a.d,a.d*b.d)}function sub(a,b){return R(a.n*b.d-b.n*a.d,a.d*b.d)}function cmp(a,b){const x=a.n*b.d-b.n*a.d;return x<0n?-1:x>0n?1:0}
function parse(s,{max=1000000,positive=false,places=6}={}){const t=String(s).trim();if(!t)throw Error('Enter a value; blank is not zero.');const re=new RegExp('^[0-9]+(?:\.[0-9]{1,'+places+'})?$');if(!re.test(t))throw Error('Use digits and a US decimal point, up to '+places+' places; no signs, commas, or exponents.');const v=Number(t);if(!Number.isFinite(v)||v>max||(positive&&v===0))throw Error('Value must be '+(positive?'greater than zero':'nonnegative')+' and at most '+max+'.');const [a,b='']=t.split('.');return R(BigInt(a+b),10n**BigInt(b.length));}
function format(a,places=6){const neg=a.n<0n,n=neg?-a.n:a.n,scale=10n**BigInt(places),v=n*scale,q=v/a.d,rem=v%a.d,k=q+(rem*2n>=a.d?1n:0n);const f=(k%scale).toString().padStart(places,'0').replace(/0+$/,'');return {text:(neg&&k!==0n?'-':'')+(k/scale)+(f?'.'+f:''),approx:rem!==0n};}
function exact(a){let d=a.d;while(d%2n===0n)d/=2n;while(d%5n===0n)d/=5n;if(d!==1n)return a.n+'/'+a.d;let places=0,p=1n;while(p%a.d!==0n&&places<40){p*=10n;places++}return format(a,places).text;}
function display(a,places=6){if(a.n>0n&&cmp(a,R(1n,10n**BigInt(places)))<0)return '< '+format(R(1n,10n**BigInt(places)),places).text;const f=format(a,places);return (f.approx?'≈ ':'')+f.text;}
function listen(ids,fn){ids.forEach(id=>{ $(id).addEventListener('input',fn);$(id).addEventListener('change',fn); });}

function resizeBody(){const el=$('body');if(!el.style)return;el.style.height='auto';el.style.height=el.scrollHeight+'px';}if(typeof window!=='undefined')window.addEventListener('resize',resizeBody);resizeBody();
const supported='Your description of coordinating weekend library volunteers caught my attention.',unsupported='Your award-winning program transformed the city.',original="Hi Jordan,\n\nI am Riley, a student working on a volunteer sign-up project. Your description of coordinating weekend library volunteers caught my attention.\n\nI would like to understand how you decide what a first-time volunteer needs before their first shift. Would you be open to a 15-minute informational conversation in the next two weeks?\n\nIf a call is inconvenient, a short reply about that question would also help.\n\nThank you for considering it.\n\nRiley";
function chooseText(id){$(id).focus();$(id).select();put('copyStatus',(id==='body'?'Body':'Subject')+' selected. Use your device’s Copy command; nothing has been sent.');}
$('selectSubject').addEventListener('click',()=>chooseText('subject'));$('selectBody').addEventListener('click',()=>chooseText('body'));
function showBad(){ $('body').value=original.replace(supported,unsupported);resizeBody();put('draftStatus','C02 · unsupported opening · draft only');put('review','The award and citywide impact are invented bad-example claims, unsupported by P1. Restore C01 rather than inventing another compliment.');put('copyStatus','');}
function restore(){ $('body').value=original;resizeBody();put('draftStatus','Draft only · fictional model');put('review','C02 removed because it invents an award and impact. C01 uses P1 only. Real-person evidence remains missing.');put('copyStatus','');}
$('bad').addEventListener('click',showBad);$('restore').addEventListener('click',restore);globalThis.Tool={showBad,restore,original,supported,unsupported};</script></body></html>