Fictional crew run: original plan versus a two-minute demo delay
HTML for this example
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"><meta name="nos-demo-layout" content="responsive-lab"><title>Crew sequence and finish constraint</title><style>body{font:17px/1.6 system-ui,sans-serif;color:#1e2c37;margin:0}main{max-width:850px;margin:auto;padding:22px}h1{font-size:clamp(26px,5vw,38px);line-height:1.2}section{border-top:2px solid #59718a;margin:24px 0;padding:14px 0}h2{font-size:23px;margin:0}dt{font-weight:700;margin-top:10px}dd{margin:0}select{font:inherit;padding:8px;max-width:100%}label{display:block;font-weight:700}#result{background:#f3f1e9;padding:18px;overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.6 system-ui,sans-serif;border:1px solid #bdc5cb;padding:16px}a{color:#184f88}@media print{select{display:none}section{break-inside:avoid}}body{font-size:16px;line-height:1.5}main{padding:18px}section{margin:20px 0;padding:12px 0}dt{margin-top:8px}h1{font-size:clamp(26px,5vw,36px)}</style></head><body><main><h1>Crew sequence: show the cue and its owner</h1><p>Fictional presentation, not a running event. Actual date, time zone, venue and assigned people are not supplied. No equipment is controlled or instructions sent.</p><label for="scenario">Timing scenario — illustrative only</label><select id="scenario"><option value="plan">Original planned sequence</option><option value="delay">Demo starts two minutes late</option></select><p id="result" aria-live="polite"></p><section><h2>C01 • Welcome</h2><dl><dt>Original plan</dt><dd>9:00-9:10 a.m. • 10 minutes</dd><dt>Execution role</dt><dd>Host</dd><dt>Start condition in this exercise</dt><dd>Designated caller gives the start instruction after the crew confirms the agreed readiness checks.</dd></dl></section><section><h2>C02 • Demo</h2><dl><dt>Original plan</dt><dd>9:10-9:25 a.m. • 15 minutes</dd><dt>Execution roles</dt><dd>Presenter demonstrates; slide operator changes to opening demo slide.</dd><dt>Start condition</dt><dd>Caller gives the instruction after presenter readiness is confirmed.</dd></dl></section><section><h2>C03 • Questions</h2><dl><dt>Original plan</dt><dd>9:25-9:30 a.m. • 5 minutes</dd><dt>Execution role</dt><dd>Moderator</dd><dt>Start condition</dt><dd>Demo ends and caller gives the transition instruction.</dd></dl></section><h2>Blank cue record</h2><pre>Cue ID and segment: __________
Planned time/duration and time zone: __________
Readiness/start condition: __________
Caller / execution role / assigned person: __________
Actual observation and source, if any: __________
Change authority / accepted revision: __________</pre><p>The finish constraint is 9:30 a.m. The delayed scenario preserves both durations and reports the conflict. A responsible person must choose the real revision; this page neither approves it nor claims an actual cue occurred.</p><script>const clock=m=>{const h=Math.floor(m/60),n=m%60;return h+':'+String(n).padStart(2,'0')+' a.m.';};function draw(){const delayed=document.querySelector('#scenario').value==='delay',demoStart=550+(delayed?2:0),demoEnd=demoStart+15,finish=demoEnd+5,overrun=finish-570;window.timing={demoStart,demoEnd,finish,overrun};document.querySelector('#result').textContent='Demo '+clock(demoStart)+' to '+clock(demoEnd)+'; questions end '+clock(finish)+'. '+(overrun?'Conflict: '+overrun+' minutes beyond the 9:30 a.m. finish. Revision decision not supplied.':'Original plan fits the 9:30 a.m. finish; no actual execution recorded.');}document.querySelector('#scenario').addEventListener('change',draw);draw();</script></main></body></html>