Who can know about the stars?

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

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Who can know about the stars?</title><style>:root{color-scheme:light;--ink:#192e38;--accent:#255e61;--wash:#e6f1ed;--paper:#faf9f4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:22px 24px 42px}header{border-top:5px solid var(--accent);padding-top:12px;margin-bottom:17px}.eyebrow{font-size:16px;font-weight:750;color:var(--accent);margin:0 0 4px}h1{font-size:clamp(26px,4vw,38px);line-height:1.2;letter-spacing:-.025em;margin:0 0 10px}h2{font-size:23px;line-height:1.3;margin:0 0 12px}h3{font-size:19px;margin:0 0 8px}p{margin:0 0 13px}.lede{max-width:850px}.stage{background:white;border:1px solid #b4c4c8;border-radius:10px;padding:20px;margin:15px 0}.sample{background:var(--wash);border-left:5px solid var(--accent);padding:16px;margin:12px 0}.result{border-top:3px solid var(--accent);padding:16px 0 4px;margin-top:14px;font-weight:700;font-size:19px;white-space:pre-wrap;overflow-wrap:anywhere}.detail{white-space:pre-wrap;overflow-wrap:anywhere}button,input,textarea,select{font:inherit}button{min-height:46px;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;padding:9px 14px;cursor:pointer;font-weight:650}button:hover{filter:brightness(.9)}button[aria-pressed=true]{box-shadow:inset 0 0 0 3px #d5f525}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #245bad;outline-offset:3px}button:disabled{opacity:.6;cursor:default}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}label{display:block;font-weight:650;margin:11px 0 6px}input,textarea{display:block;width:100%;min-width:0;max-width:100%;background:white;color:var(--ink);border:1px solid #8199a1;border-radius:5px;padding:10px 12px}textarea{min-height:110px;resize:vertical;font:16px/1.5 ui-monospace,Consolas,monospace}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}ul,ol{padding-left:23px}li{margin:6px 0}.small,summary,footer{font-size:16px;color:#415964}code,pre{font:16px/1.5 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#edf1f1;padding:16px;border-radius:6px}code{overflow-wrap:anywhere}.chip{display:inline-block;border:1px solid #95aeb4;border-radius:4px;padding:2px 8px;font-size:16px;margin:3px}svg{display:block;width:100%;height:auto}svg text{font-family:system-ui,sans-serif}details{margin:20px 0;border-top:1px solid #a7bdc2;padding-top:13px}summary{cursor:pointer;font-weight:750}mark{background:#d5f525;color:#202600}footer{border-top:1px solid #a7bdc2;padding-top:15px;margin-top:22px}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{padding:10px 8px;text-align:left;vertical-align:top;border-bottom:1px solid #c2cfd2;overflow-wrap:anywhere}th{background:var(--wash)}.number{font-size:32px;font-weight:800}.note{border-left:3px solid #a78e51;padding-left:12px}@media(max-width:650px){main{padding:15px 17px 30px}.grid{grid-template-columns:1fr;gap:14px}.stage{padding:15px}header{margin-bottom:12px}.controls button{flex:1 1 auto}h1{font-size:27px}th,td{padding:8px 5px}}@media(max-width:650px){.stage .controls button{flex:1 1 calc(50% - 8px);min-width:0}}</style></head><body><main style="--accent:#654f87;--wash:#f0eaf8"><header><p class="eyebrow">LITERATURE / NARRATOR ACCESS</p><h1>Who can know about the stars?</h1><p class="lede">V1 scene: a closed box moves; only Jon saw inside earlier. Check the source of a narrator’s claim.</p></header><section class="stage"><p class="sample">S1 Mia sees Jon lift a closed box and carry it to a shelf. S2 Jon alone saw red paper stars inside earlier. S3 Mia asks “Is it empty?” Jon says “No.”</p><p id="roleNote">For Mia in V1, use S1 for observed movement and S3 for the heard reply. S2 is Jon’s earlier observation; reading the full scene does not make it Mia’s observation.</p><div class="controls"><button type="button" id="mia">Narrator: Mia</button><button type="button" id="jon">Narrator: Jon</button><button type="button" id="v1">V1 · closed box</button><button type="button" id="v2">V2 · add S4</button></div><p id="context"></p><div class="controls"><button type="button" id="stars">Claim: I saw red stars</button><button type="button" id="move">Claim: box movement</button><button type="button" id="reply">Claim: heard the reply</button><button type="button" id="check">Check claim</button><button type="button" id="reset">Reset</button></div><p id="result" class="result" role="status" aria-live="polite"></p></section><section class="grid"><div><h2>Mia · authored retelling</h2><p>I saw Jon lift the closed box and carry it to the shelf. I asked if it was empty. He said no; his reply indicated it was not empty.</p></div><div><h2>Jon · authored retelling</h2><p>Earlier, I saw red paper stars inside. I lifted the closed box and carried it to the shelf. Mia asked if it was empty, and I said no.</p></div></section><details><summary>Third-person-limited comparison</summary><p>Mia saw Jon lift the closed box and carry it to the shelf. She asked if it was empty. His reply indicated it was not. Changing person does not add S2 to Mia’s knowledge.</p></details><footer>Original fictional practice example. Current-page interaction only; no saved records or external requests.</footer></main>
<script>
(()=>{
'use strict';
const $=s=>document.querySelector(s);const out=(s,v)=>{$(s).textContent=String(v);};const on=(s,f)=>$(s).addEventListener('click',f);
let role='Mia',version=1,claim='move';function context(){['stars','move','reply'].forEach(c=>$('#'+c).setAttribute('aria-pressed',String(c===claim)));['mia','jon'].forEach(r=>$('#'+r).setAttribute('aria-pressed',String(r===role.toLowerCase())));['v1','v2'].forEach((v,n)=>$('#'+v).setAttribute('aria-pressed',String(version===n+1)));const claims={stars:'I saw red stars',move:'box movement',reply:'heard the reply'};out('#context',role+' / V'+version+' · Current claim: '+claims[claim]+(version===2?' · S4: Mia opens the box and sees red paper stars.':' · Mia has not seen inside.'));out('#result','Selection changed. Check the current claim.');}function check(){let message;if(claim==='stars')message=role==='Jon'?'Supported by S2: Jon saw red stars earlier.':version===2?'Supported after S4: Mia now sees the red paper stars.':'Unsupported in V1: S2 belongs to Jon, not Mia.';if(claim==='move')message=role==='Mia'?'Supported by S1: Mia sees the box movement.':'S1: Jon performs the movement; phrase his account as his action.';if(claim==='reply')message=role==='Mia'?'Supported by S3: Mia hears Jon say No; attribute the inference.':'S3: Jon says the reply; do not describe it as Mia’s hearing.';out('#result',message);}on('#mia',()=>{role='Mia';context();});on('#jon',()=>{role='Jon';context();});on('#v1',()=>{version=1;context();});on('#v2',()=>{version=2;context();});['stars','move','reply'].forEach(c=>on('#'+c,()=>{claim=c;context();}));on('#check',check);on('#reset',()=>{role='Mia';version=1;claim='move';context();check();});context();check();
})();
</script>
</body></html>