Keep every word on the right card

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>Keep every word on the right card</title><style>
:root{color-scheme:light;--accent:#7d5032;--wash:#fbefdf;--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}}
.readcard{width:min(100%,480px);height:288px;border:2px solid #7d5032;padding:20px;background:#fffef8;overflow:auto}.speech{font-size:24px;line-height:1.5}.cue{font-size:19px}.printDeck{display:none}@media print{@page{size:Letter portrait;margin:.5in}body{background:white}main>header,main>.panel,main>footer,main>noscript{display:none}.printDeck{display:block}.printCard{box-sizing:border-box;width:5in;height:3in;margin:0 auto .125in;border:1px dashed #444;padding:.18in;break-inside:avoid;overflow:visible}.printCard:last-child{margin-bottom:0}.printCard .speech{font-size:18pt}.printCard .cue{font-size:14pt}}</style></head><body><main><header><p class="kicker">SPEAKING DESK · THREE ORIGINAL CUES</p><h1>Keep every word on the right card</h1><p>Three fictional orientation beats. Exact speaking text stays separate from delivery cues; edits never shorten it automatically.</p></header><section class="panel"><h2>Reading deck</h2><div id="position" class="result" role="status" aria-live="polite"></div><article id="card" class="readcard"><h2 id="title"></h2><p id="speech" class="speech"></p><p id="cue" class="cue"></p></article><div class="actions"><button type="button" id="back">Back</button><button type="button" id="next">Next</button><button type="button" id="reset">Reset demonstration</button></div></section><section class="panel"><h2>Editable source for the current card</h2><label for="script">Exact speaking sentence</label><textarea id="script" rows="4"></textarea><label for="delivery">Delivery cue</label><input id="delivery" type="text" value=""><div id="proof" class="result" role="status" aria-live="polite">Print proof pending.</div></section><section class="printDeck" id="printDeck" aria-label="Proposed printable deck"></section><footer>Rehearse every sentence and delivery cue; measure a test print before relying on the proposed card dimensions.</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 original=[['C1','Welcome','Welcome to the practice room.','Look up'],['C2','Procedure','Choose a station, then ask before moving equipment.','Point to station map'],['C3','Close','Return equipment and tell the facilitator what needs attention.','Pause for questions']];let cards=original.map(x=>x.slice()),index=0;function proof(){const card=$('card');$('proof').textContent=card.clientHeight===0?'Print proof Pending. Layout measurement unavailable here; actual browser and physical calibration required.':card.scrollHeight>card.clientHeight+1?'Overflow — revision required. Full source retained; do not shrink or truncate. Print proof Pending.':'Screen reading card has no detected vertical overflow. Print proof Pending; physical5×3inch dimensions unverified.';}function printDeck(){$('printDeck').replaceChildren();for(const card of cards){const a=document.createElement('article');a.className='printCard';const h=document.createElement('h2'),p=document.createElement('p'),q=document.createElement('p');h.textContent=card[0]+' · '+card[1];p.className='speech';p.textContent=card[2];q.className='cue';q.textContent='Delivery cue: '+card[3];a.append(h,p,q);$('printDeck').append(a);}}function render(){$('position').textContent='Card '+(index+1)+' of 3 · '+cards[index][0];$('title').textContent=cards[index][1];$('speech').textContent=cards[index][2];$('cue').textContent='Delivery cue: '+cards[index][3];$('script').value=cards[index][2];$('delivery').value=cards[index][3];printDeck();proof();}$('back').addEventListener('click',()=>{index=Math.max(0,index-1);render();});$('next').addEventListener('click',()=>{index=Math.min(2,index+1);render();});['script','delivery'].forEach((id,i)=>$(id).addEventListener('input',()=>{cards[index][i+2]=$(id).value;$('speech').textContent=cards[index][2];$('cue').textContent='Delivery cue: '+cards[index][3];printDeck();proof();}));$('reset').addEventListener('click',()=>{cards=original.map(x=>x.slice());index=0;render();});window.addEventListener('resize',proof);render();
})();
</script></body></html>