<section id="cadr-tool" style="max-width:860px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;font:16px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif">
 <h3 style="margin:0 0 12px">Room inputs</h3>
 <div style="display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 4px">
 <label>Units
 <select id="unit" aria-label="Units"><option value="imperial">ft / cfm</option><option value="metric">m / m³/h</option></select>
 </label>
 <label>Length <input id="len" type="number" step="0.01" min="0" placeholder="e.g., 12"></label>
 <label>Width <input id="wid" type="number" step="0.01" min="0" placeholder="e.g., 10"></label>
 <label>Height <input id="ht" type="number" step="0.01" min="0" placeholder="e.g., 8"></label>
 <label>Target ACH
 <select id="ach">
 <option value="2">2 (basic comfort)</option>
 <option value="4">4 (typical home allergy target)</option>
 <option value="5" selected>5 (CDC general clean‑air goal)</option>
 <option value="6">6 (higher sensitivity / classrooms)</option>
 <option value="8">8 (heavy allergens)</option>
 <option value="12">12 (wildfire smoke / rapid turnover)</option>
 <option value="custom">Custom…</option>
 </select>
 </label>
 <label id="customWrap" style="display:none">Custom ACH <input id="achCustom" type="number" step="0.1" min="0" placeholder="e.g., 7"></label>
 </div>
 <button id="calc" style="margin:8px 0 16px;padding:8px 12px">Calculate</button>
 <output id="out" style="display:block;white-space:pre-wrap;background:#f9fafb;border:1px solid #eef2f7;border-radius:8px;padding:12px"></output>
 <p style="margin:12px 0 4px"><strong>Notes</strong>:

 - For AHAM sizing, use <em>smoke CADR</em> for fine particles (wildfire), <em>pollen CADR</em> for seasonal allergens, and <em>dust CADR</em> for household dust.

 - Multiple units add linearly in CADR (two identical purifiers ≈ 2× CADR).
 </p>
</section>
<script>
(()=>{const $=id=>document.getElementById(id);const u=$("unit"),L=$("len"),W=$("wid"),H=$("ht"),A=$("ach"),Ac=$("achCustom"),Cw=$("customWrap"),O=$("out"),B=$("calc");const m2ft=3.28084, m3hPerCfm=1.699;function area(){let l=parseFloat(L.value)||0,w=parseFloat(W.value)||0;if(u.value==='metric'){l*=m2ft;w*=m2ft;}return l*w;}function vol(){let l=parseFloat(L.value)||0,w=parseFloat(W.value)||0,h=parseFloat(H.value)||0;if(u.value==='metric'){l*=m2ft;w*=m2ft;h*=m2ft;}return l*w*h;}function selACH(){return A.value==='custom'?(parseFloat(Ac.value)||0):parseFloat(A.value);}function fmt(n,d=0){return (Math.round(n*10**d)/10**d).toLocaleString()}function recalc(){const V=vol();const S=area();const ach=selACH();if(V<=0||S<=0||ach<=0){O.textContent='Enter positive length, width, height, and ACH.';return;}const cadr_cfm=V*ach/60;const cadr_m3h=cadr_cfm*m3hPerCfm;const aham_two_thirds=S*(2/3);const aham_wildfire=S*1; let out=`Room volume: ${fmt(V)} ft³`;
out+=`\nTarget ACH: ${fmt(ach,1)} h⁻¹`; out+=`\n\nRequired CADR (ACH method):\n • ${fmt(cadr_cfm)} cfm • ${fmt(cadr_m3h)} m³/h`;
out+=`\n\nAHAM area rule (smoke CADR):\n • ≥ ${fmt(aham_two_thirds)} cfm (2/3 room area)\n • Wildfire: ≈ ${fmt(aham_wildfire)} cfm (≈ room area)`;
O.textContent=out;}A.addEventListener('change',e=>{Cw.style.display=A.value==='custom'?'inline-block':'none';});B.addEventListener('click',recalc);u.addEventListener('change',()=>{[L,W,H].forEach(i=>i.value='');O.textContent='';});})();
</script>

<div data-cadr-widget></div>
<script>(e=>{function h(t){return document.querySelector(t)}function f(n){return Math.round(n*10)/10}function r(v,a){return `${f(v*a/60)} cfm • ${f(v*a/60*1.699)} m³/h`}let d=h('[data-cadr-widget]');d.innerHTML=`<style>[data-cadr-widget]{font:14px system-ui} [data-cadr-widget] input,[data-cadr-widget] select{margin:2px} [data-cadr-widget].row{display:flex;gap:6px;flex-wrap:wrap}</style><div class=row><label>L<input id=l type=number step=0.01 placeholder=12></label><label>W<input id=w type=number step=0.01 placeholder=10></label><label>H<input id=h type=number step=0.01 placeholder=8></label><label>ACH<select id=a><option>2</option><option>4</option><option selected>5</option><option>6</option><option>8</option><option>12</option></select></label><button id=go>Calc</button></div><pre id=o style="background:#f6f9fc;padding:8px"></pre>`;h('#go').onclick=()=>{let L=+h('#l').value||0,W=+h('#w').value||0,Ht=+h('#h').value||0,A=+h('#a').value||0,V=L*W*Ht;if(V&&A){h('#o').textContent=`Vol: ${f(V)} ft³\nCADR: ${r(V,A)}`}else{h('#o').textContent='Enter L,W,H,ACH'}}})(document);</script>
<style>[data-cadr-widget]{border:1px solid #e5e7eb;border-radius:10px;padding:10px;display:inline-block}</style>