One invitation-pack stream with six intervals, information release, and a separately labeled future-flow scenario

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>Invitation pack · whole-stream review</title><style>*{box-sizing:border-box}body{margin:0;background:#edf2f1;color:#203d3b;font:16px/1.6 system-ui,sans-serif}main{max-width:1080px;margin:auto;padding:28px}h1{font:700 clamp(32px,5vw,48px)/1.15 Georgia,serif}h2{font-size:24px}h3{font-size:19px}section{background:#fff;padding:22px;margin:22px 0;border:1px solid #a7beb9;border-radius:6px}.scope{background:#234c48;color:#fff;padding:20px}.row,.controls{display:flex;flex-wrap:wrap;gap:12px}.row>*{flex:1 1 180px;min-width:0}.step{border:2px solid #3f726b;padding:16px;background:#e6f0ed}.arrow{font-weight:700;margin:12px 0}.signal{padding:16px;border:2px dashed #596ea0;background:#f0f2fa}.note{padding:16px;border-left:5px solid #a2793d;background:#fff4df}.intervals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.interval{padding:16px;background:#eff3f2;border-top:5px solid #6f8f89}.interval.work{background:#ddede7;border-color:#287261}.interval h3{margin:0 0 8px}.big{font-size:28px;font-weight:750}.metric{padding:16px;border:1px solid #a7beb9}button,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #4c756e;background:#fff;color:inherit;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#234c48;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #af6b23;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-height:110px;padding:10px;resize:vertical;color:inherit;background:#fff;border:1px solid #718c85}p,h1,h2,h3,label,button{overflow-wrap:break-word}footer{margin:28px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}section{padding:16px}.intervals{grid-template-columns:1fr}.controls button{flex:1 1 180px}}</style></head><body><main><p>ORIGINAL FICTIONAL MODEL · ALL TIMES IN MINUTES</p><h1>Follow the pack and the instruction that releases it.</h1><p class="scope">One folded invitation pack. Boundary: order received → dispatch-ready. Shipping is excluded. All six intervals are serial and nonoverlapping. These inputs are invented teaching data.</p>
<section><h2>Material and information take different paths</h2><div class="signal"><strong>Information:</strong> order record → planner release → production instructions.<br>An instruction provides permission or timing; it does not move the pack.</div><p class="arrow">Material moves through these operations ↓</p><div class="row"><div class="step"><strong>P1 · Print</strong><br>12 minutes</div><div class="step"><strong>P2 · Fold</strong><br>8 minutes</div><div class="step"><strong>P3 · Pack</strong><br>18 minutes, then dispatch-ready</div></div><p><button id="release" type="button" aria-expanded="false" aria-controls="release-detail">Planner release</button></p><div id="release-detail" class="signal" hidden><h3>Planner's instruction → folding operation</h3><p>The current model associates W2's 120-minute queue before folding with its batch-release arrangement. Review who sends the instruction, its trigger and the receiving operation. This is a question about the release rule, not evidence that folding is slow.</p><p>No real batch release or machine control occurs here.</p></div></section>
<section><h2>Six intervals within the same boundary</h2><div class="controls" role="group" aria-label="Timing model"><button id="current" aria-pressed="true" type="button">Current model</button><button id="future" aria-pressed="false" type="button">Proposed future model</button><button id="missing" aria-pressed="false" type="button">Missing interval case</button></div><h3 id="model-title">Current teaching model</h3><div id="intervals" class="intervals"></div><div class="row" aria-live="polite"><p class="metric">Processing<br><strong id="processing" class="big"></strong></p><p class="metric">Waiting<br><strong id="waiting" class="big"></strong></p><p class="metric">Elapsed in boundary<br><strong id="elapsed" class="big"></strong></p></div><p id="counting" class="note"></p><p id="difference"></p><h3>Unchanged current reference</h3><p id="reference">W1 60 + P1 12 + W2 120 + P2 8 + W3 42 + P3 18 = 260 minutes. Processing 38; waiting 222.</p><p>Processing is not automatically value-adding time. This serial elapsed-time sum is not throughput, machine cycle time or a staffing estimate. No demand, available production time, inventory, uptime or changeover data is supplied, so no takt calculation or production-control recommendation is made.</p></section>
<section><h2>Your observation record</h2><p>Record the actual start/end events and sources before applying this model to a real stream.</p><div id="fields"></div><p><button id="reset" type="button">Clear my observation notes</button></p><div id="confirm" hidden><p>Clear all six writing fields? The teaching inputs and selected model stay unchanged.</p><div class="controls"><button id="clear" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div><p id="status" role="status">Six fields start blank. Switching models preserves your writing.</p></section><footer>Temporary notes stay only in this open page and disappear on reload. No network, storage, machine control or actual production outcome is represented.</footer></main><script>(()=>{'use strict';const $=id=>document.getElementById(id);const base=[['W1','Wait before printing',60],['P1','Print',12],['W2','Wait before folding',120],['P2','Fold',8],['W3','Wait before packing',42],['P3','Pack',18]];function show(mode){for(const key of ['current','future','missing'])$(key).setAttribute('aria-pressed',String(mode===key));$('model-title').textContent=mode==='future'?'Proposed future scenario · only W2 changes':mode==='missing'?'Missing interval case · W2 not supplied':'Current teaching model';const rows=base.map(r=>[...r]);rows[2][2]=mode==='future'?30:mode==='missing'?null:120;$('intervals').replaceChildren();for(const [id,label,time]of rows){const a=document.createElement('article');a.className='interval'+(id.startsWith('P')?' work':'');a.id='interval-'+id;const h=document.createElement('h3');h.textContent=id+' · '+label;const p=document.createElement('p');p.textContent=time===null?'Not supplied':time+' minutes';a.append(h,p);$('intervals').append(a);}const sum=prefix=>rows.filter(r=>r[0].startsWith(prefix)).reduce((v,r)=>v+r[2],0);$('processing').textContent=sum('P')+' minutes';$('waiting').textContent=mode==='missing'?'Not known':sum('W')+' minutes';$('elapsed').textContent=mode==='missing'?'Not known':(sum('P')+sum('W'))+' minutes';$('counting').textContent=mode==='missing'?'W2 has no supplied duration. Its row remains present. An exact waiting or elapsed total is withheld; unknown is not zero.':'Processing 12 + 8 + 18 = 38. Waiting 60 + '+rows[2][2]+' + 42 = '+sum('W')+'. Add the nonoverlapping intervals once; do not add a second whole-stream lead time.';$('difference').textContent=mode==='future'?'260 − 170 = 90 minutes less, entirely from the W2 assumption (120 → 30). This is a proposed arithmetic scenario, not a measured improvement or guarantee.':mode==='missing'?'Neither the future 30 nor the current 120 is substituted for the missing duration.':'Current model is the comparison reference; no change is represented.';}for(const id of ['current','future','missing'])$(id).addEventListener('click',()=>show(id));$('release').addEventListener('click',()=>{const open=$('release-detail').hidden;$('release-detail').hidden=!open;$('release').setAttribute('aria-expanded',String(open));});for(const [id,label]of [['boundary','Product family and start/end boundary'],['intervals','Observed intervals · start/end, units and overlap rules'],['sources','Measurement sources and observation conditions'],['signals','Who sends each instruction, its trigger and receiver'],['assumptions','Proposed future change and assumptions'],['review','Temporary review notes and next observation questions']]){const l=document.createElement('label');l.htmlFor='own-'+id;l.textContent=label;const t=document.createElement('textarea');t.id=l.htmlFor;$('fields').append(l,t);}$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('status').textContent='Kept all six observation fields.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const t of document.querySelectorAll('textarea'))t.value='';$('confirm').hidden=true;$('status').textContent='All six observation fields were cleared. Teaching inputs and model are unchanged.';$('own-boundary').focus();});show('current');})();</script></body></html>