Three words. One find each.

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>Three words. One find each.</title><style>
:root{color-scheme:light;--accent:#275752;--wash:#e5f3eb;--ink:#202d3b;--paper:#fffdf9}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#eeeae2;font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:980px;margin:auto;padding:28px 24px 40px}header{border-top:6px solid var(--accent);padding:20px 0 24px}.kicker{color:var(--accent);font-weight:750;letter-spacing:.06em;margin:0 0 8px}h1{font:700 clamp(30px,5vw,46px)/1.15 Georgia,serif;margin:0 0 14px;max-width:780px}h2{font-size:23px;line-height:1.3;margin:0 0 14px}h3{font-size:19px;margin:12px 0 8px}p{margin:0 0 16px}button,input,textarea,select{font:inherit}button{background:white;border:1px solid #87949b;color:var(--ink);border-radius:8px;padding:11px 16px;min-height:48px;cursor:pointer;font-weight:650}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:white;border-color:var(--accent)}:focus-visible{outline:3px solid #b45a1e;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #80909b;border-radius:7px;padding:11px;background:white;color:var(--ink)}input[type=checkbox],input[type=radio]{width:21px;height:21px;accent-color:var(--accent)}textarea{resize:vertical}.panel{background:var(--paper);border:1px solid #ccd2d1;border-radius:12px;padding:24px;margin-bottom:20px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.two>.panel{margin:0}.two{margin-bottom:20px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.result{padding:18px;background:var(--wash);border-left:5px solid var(--accent);margin-top:18px;white-space:pre-line;overflow-wrap:anywhere}.note{color:#465565;font-size:16px}.strip{padding:18px;background:var(--wash);border-radius:8px;margin-bottom:18px}table{border-collapse:collapse;width:100%;font-size:16px;table-layout:fixed}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #cbd0d1;overflow-wrap:anywhere;vertical-align:top}th{background:var(--wash)}ol,ul{padding-left:24px}li+li{margin-top:8px}pre{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}code{font-size:16px}.grid{display:grid;gap:5px;max-width:440px}.grid button{padding:5px;min-width:0}.grid input{padding:5px!important;text-align:center;font-weight:750}blockquote{font:500 26px/1.5 Georgia,serif;margin:16px 0}footer{font-size:16px;color:#465565;margin-top:22px}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}mark{background:#e0efad;color:var(--ink)}@media(max-width:560px){main{padding:18px 12px 28px}.panel{padding:20px 16px}.two{grid-template-columns:minmax(0,1fr)}h1{font-size:32px}.actions button{flex:1 1 135px}th,td{padding:8px 5px}.grid button{min-height:40px}blockquote{font-size:24px}}
</style></head><body><main><header><p class="kicker">LETTER LAB · ORIGINAL 6 × 6 WORD SEARCH</p><h1>Three words. One find each.</h1><p>Find CAT, DOG, and HAT. Choose a start cell, then an end cell. Words can run forward, backward, or diagonally.</p></header><section class="panel"><h2>Select two endpoints</h2><div class="grid" style="grid-template-columns:repeat(6,minmax(0,1fr))"><button type="button" id="cell00" aria-label="Row 1, column 1, C">C</button><button type="button" id="cell01" aria-label="Row 1, column 2, A">A</button><button type="button" id="cell02" aria-label="Row 1, column 3, T">T</button><button type="button" id="cell03" aria-label="Row 1, column 4, X">X</button><button type="button" id="cell04" aria-label="Row 1, column 5, X">X</button><button type="button" id="cell05" aria-label="Row 1, column 6, X">X</button><button type="button" id="cell10" aria-label="Row 2, column 1, H">H</button><button type="button" id="cell11" aria-label="Row 2, column 2, X">X</button><button type="button" id="cell12" aria-label="Row 2, column 3, X">X</button><button type="button" id="cell13" aria-label="Row 2, column 4, X">X</button><button type="button" id="cell14" aria-label="Row 2, column 5, X">X</button><button type="button" id="cell15" aria-label="Row 2, column 6, X">X</button><button type="button" id="cell20" aria-label="Row 3, column 1, X">X</button><button type="button" id="cell21" aria-label="Row 3, column 2, A">A</button><button type="button" id="cell22" aria-label="Row 3, column 3, X">X</button><button type="button" id="cell23" aria-label="Row 3, column 4, X">X</button><button type="button" id="cell24" aria-label="Row 3, column 5, X">X</button><button type="button" id="cell25" aria-label="Row 3, column 6, X">X</button><button type="button" id="cell30" aria-label="Row 4, column 1, X">X</button><button type="button" id="cell31" aria-label="Row 4, column 2, X">X</button><button type="button" id="cell32" aria-label="Row 4, column 3, T">T</button><button type="button" id="cell33" aria-label="Row 4, column 4, X">X</button><button type="button" id="cell34" aria-label="Row 4, column 5, X">X</button><button type="button" id="cell35" aria-label="Row 4, column 6, X">X</button><button type="button" id="cell40" aria-label="Row 5, column 1, X">X</button><button type="button" id="cell41" aria-label="Row 5, column 2, X">X</button><button type="button" id="cell42" aria-label="Row 5, column 3, G">G</button><button type="button" id="cell43" aria-label="Row 5, column 4, O">O</button><button type="button" id="cell44" aria-label="Row 5, column 5, D">D</button><button type="button" id="cell45" aria-label="Row 5, column 6, X">X</button><button type="button" id="cell50" aria-label="Row 6, column 1, X">X</button><button type="button" id="cell51" aria-label="Row 6, column 2, X">X</button><button type="button" id="cell52" aria-label="Row 6, column 3, X">X</button><button type="button" id="cell53" aria-label="Row 6, column 4, X">X</button><button type="button" id="cell54" aria-label="Row 6, column 5, X">X</button><button type="button" id="cell55" aria-label="Row 6, column 6, X">X</button></div><div id="selection" class="result" role="status" aria-live="polite">No start selected.</div><div class="actions"><button type="button" id="cancel">Cancel selection</button><button type="button" id="reset">Reset puzzle</button></div><div id="feedback" class="result" role="status" aria-live="polite">Choose two endpoints.</div></section><section class="panel"><h2>Words to find</h2><div id="targets" class="result" role="status" aria-live="polite"></div><div id="progress" class="result" role="status" aria-live="polite"></div></section><footer>Original fictional example. Changes remain in this open page and are not saved.</footer><noscript>JavaScript is required for the local controls. The accompanying article contains worked examples.</noscript></main><script>
(()=>{'use strict';const $=id=>document.getElementById(id);
const rows=["CATXXX","HXXXXX","XAXXXX","XXTXXX","XXGODX","XXXXXX"],words=[{id:'W01',word:'CAT',cells:[0,1,2]},{id:'W02',word:'DOG',cells:[28,27,26]},{id:'W03',word:'HAT',cells:[6,13,20]}];let start=null;const found=new Set();function render(){$('targets').textContent=words.map(w=>w.word+' · '+(found.has(w.id)?'found':'not found')).join(' / ');$('progress').textContent=found.size+' of 3 unique words'+(found.size===3?' · Complete':' · Keep searching');for(let r=0;r<6;r++)for(let col=0;col<6;col++){const n=r*6+col,b=$('cell'+r+col),members=words.filter(w=>found.has(w.id)&&w.cells.includes(n)).map(w=>w.id);b.setAttribute('data-found',members.join(' '));b.style.background=members.length?'#d5eaa8':n===start?'#f6d18e':'white';}}function pick(n){if(start===null){start=n;$('selection').textContent='Start: r'+(Math.floor(n/6)+1)+'c'+(n%6+1)+'. Choose an endpoint.';render();return;}const a=start;start=null;const dr=Math.floor(n/6)-Math.floor(a/6),dc=n%6-a%6;if(dr&&dc&&Math.abs(dr)!==Math.abs(dc)){$('selection').textContent='No start selected.';$('feedback').textContent='Unsupported path: choose one straight row, column, or equal-step diagonal.';render();return;}const steps=Math.max(Math.abs(dr),Math.abs(dc)),path=Array.from({length:steps+1},(_,i)=>(Math.floor(a/6)+Math.sign(dr)*i)*6+a%6+Math.sign(dc)*i);const word=words.find(w=>JSON.stringify(w.cells)===JSON.stringify(path)||JSON.stringify(w.cells.slice().reverse())===JSON.stringify(path));if(!word)$('feedback').textContent='No registered target on that path.';else{const repeated=found.has(word.id);found.add(word.id);$('feedback').textContent=word.word+' ('+word.id+') '+(repeated?'already found; count unchanged.':'found.');}$('selection').textContent='No start selected.';render();}for(let r=0;r<6;r++)for(let col=0;col<6;col++)$('cell'+r+col).addEventListener('click',()=>pick(r*6+col));$('cancel').addEventListener('click',()=>{start=null;$('selection').textContent='No start selected.';$('feedback').textContent='Selection canceled; found words retained.';render();});$('reset').addEventListener('click',()=>{start=null;found.clear();$('selection').textContent='No start selected.';$('feedback').textContent='Choose two endpoints.';render();});render();
})();
</script></body></html>