Leave with one testable change.
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 http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'"><title>Leave with one testable change.</title><style>:root{--accent:#294c66;--wash:#e9f0f4;--paper:#f5f7f7}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper,#f6f4ee);color:#222b32;font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1040px;margin:0 auto;padding:32px}header{padding-bottom:20px;border-bottom:2px solid var(--accent);margin-bottom:24px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}h1{font:600 clamp(28px,4.5vw,40px)/1.13 Georgia,serif;letter-spacing:-.025em;margin:0 0 12px;max-width:760px}h2{font-size:21px;line-height:1.3;margin:0 0 12px}h3{font-size:17px;line-height:1.4;margin:0 0 8px}p{margin:0 0 12px}p:last-child{margin-bottom:0}.lede{max-width:740px;color:#47545c}.small{font-size:13px;line-height:1.5;color:#53616b}.tag{display:inline-block;font:700 12px/1.4 system-ui,sans-serif;letter-spacing:.02em;padding:4px 8px;background:var(--wash);color:var(--accent)}.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px}.split>*{min-width:0}.panel{padding:22px;background:#fff;border:1px solid #cbd1d1}.callout{padding:16px 20px;border-left:4px solid var(--accent);background:var(--wash);margin-bottom:20px}.warning{background:#fff2df;border-left-color:#8a4c17}.section{margin-top:26px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}button,input,select,textarea{font:inherit}button,select,summary{min-height:44px}button{background:#fff;color:#24313c;border:1px solid #9aa6aa;border-radius:5px;padding:9px 13px;cursor:pointer;text-align:left;line-height:1.4}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}:is(button,input,select,textarea,summary,a):focus-visible{outline:3px solid #bb5b1d;outline-offset:3px}select{width:100%;padding:9px;border:1px solid #859397;background:white;color:#222b32;border-radius:4px}textarea{width:100%;padding:12px;min-height:100px;border:1px solid #859397;border-radius:4px}label{cursor:pointer}input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}fieldset{min-width:0;border:1px solid #c4cece;margin:0 0 16px;padding:18px}legend{font-weight:700;padding:0 7px}.choice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;min-height:44px;border:1px solid #cbd1d1;background:white;margin-right:8px;margin-bottom:8px;border-radius:4px}.choice:has(input:checked){border-color:var(--accent);background:var(--wash)}.feedback{padding:10px 12px;background:#edf1f3;font-size:14px;margin-top:12px;min-height:44px}.feedback[data-state=correct]{background:#e4f1e9;color:#194c35}.feedback[data-state=incorrect]{background:#fff0e3;color:#79451f}details{border-top:1px solid #cbd1d1;margin-top:14px}summary{padding:10px 0;font-weight:650;cursor:pointer}details>div,details>p{padding-bottom:12px}.list{list-style:none;padding:0;margin:0}.list>li{padding:13px 0;border-bottom:1px solid #d2d9da}.list b{display:block}dl{margin:0}dt{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:#53616b;margin-top:14px}dt:first-child{margin-top:0}dd{margin:3px 0 0}table{width:100%;border-collapse:collapse;font-size:14px}caption{text-align:left;font-weight:700;margin-bottom:10px}th,td{padding:12px 9px;border-bottom:1px solid #cbd1d1;text-align:left;vertical-align:top}th{font-size:12px;color:#52616c;letter-spacing:.04em;background:var(--wash)}td .mobile-label{display:none}.rule{padding:16px 0;border-top:1px solid #cbd1d1;margin-top:24px}footer{margin-top:30px;padding-top:16px;border-top:1px solid #bac7cb;font-size:13px;color:#53616b}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.number{font-variant-numeric:tabular-nums}.empty{color:#754d23;font-weight:650}.row-button{width:100%;border:0;border-bottom:1px solid #cbd1d1;border-radius:0;padding:14px;background:transparent}.row-button[aria-pressed=true]{background:var(--wash);color:var(--accent);border-left:4px solid var(--accent)}.row-button small{display:block;font-size:12px;margin-bottom:4px}.rows{border-top:1px solid #cbd1d1}.timeline{list-style:none;padding:0;margin:0}.timeline li{padding:12px 0 12px 18px;border-left:2px solid #b8c5ca;position:relative}.timeline li:before{content:'';position:absolute;width:8px;height:8px;left:-5px;top:23px;background:var(--accent);border-radius:50%}.timeline time{font-size:12px;font-weight:750;color:var(--accent);display:block}main>*{overflow-wrap:break-word}
@media(max-width:760px){main{padding:24px}.split{grid-template-columns:1fr;gap:20px}h1{font-size:31px}}@media(max-width:480px){main{padding:18px 16px}h1{font-size:28px}.panel{padding:16px}header{margin-bottom:18px}table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}table.responsive thead{display:none}table.responsive tr{border-bottom:1px solid #aebec2;padding:10px 0}table.responsive td{border:0;padding:4px 0}td .mobile-label{display:inline;font-weight:650}fieldset{padding:14px}.toolbar button{flex:1 1 auto}}@media print{body{background:white}main{max-width:none;padding:0}button{color:black!important;background:white!important}.panel{break-inside:avoid}footer{margin-top:18px}}
.row-button b{display:block}.row-button .small{display:block;margin-top:4px}</style></head><body><main><header><p class="eyebrow">Sprint 12 → Sprint 13 · Six-person team · 45 minutes</p><h1>Leave with one testable change.</h1><p class="lede">Fictional facilitation plan. Examine delayed code reviews, then carry one owned experiment into the next sprint.</p></header>
<div class="callout"><b>Commitment stays visible</b><p>Try independently reviewable slices in Sprint 13. <b>Owner: Maya</b> · Check: October 30, 2026, at the Sprint 13 retrospective.</p></div>
<div class="split"><section><h2>The whole meeting path</h2><div class="rows"><button class="row-button" data-phase="0" aria-pressed="true" aria-controls="phase-note"><small>0–5 MINUTES</small><b>Review the previous experiment</b><span class="small">Reproduction steps appeared in four sample bug reports. Review-time evidence is missing.</span></button><button class="row-button" data-phase="1" aria-pressed="false" aria-controls="phase-note"><small>5–12 MINUTES</small><b>Write observations individually</b><span class="small">Three review requests arrived on the final Thursday; one lacked test instructions.</span></button><button class="row-button" data-phase="2" aria-pressed="false" aria-controls="phase-note"><small>12–22 MINUTES</small><b>Group and clarify</b><span class="small">Keep late handoffs and unclear review requests as separate groups.</span></button><button class="row-button" data-phase="3" aria-pressed="false" aria-controls="phase-note"><small>22–32 MINUTES</small><b>Compare possible changes</b><span class="small">Compare smaller review batches with clearer review instructions.</span></button><button class="row-button" data-phase="4" aria-pressed="false" aria-controls="phase-note"><small>32–40 MINUTES</small><b>Define one experiment</b><span class="small">Smaller review batches; Maya brings the experiment back at the Sprint 13 retrospective.</span></button><button class="row-button" data-phase="5" aria-pressed="false" aria-controls="phase-note"><small>40–45 MINUTES</small><b>Read back the commitment</b><span class="small">Put the agreed experiment and evidence request in the maintained sprint record.</span></button></div><p id="phase-note" class="feedback" aria-live="polite"></p></section><section><h2>Observation → experiment</h2><div class="toolbar" role="group" aria-label="view"><button type="button" data-view="0" aria-pressed="true">Observation</button><button type="button" data-view="1" aria-pressed="false">Selected experiment</button></div><div id="connection" class="panel" aria-live="polite"></div><div class="rule"><span class="tag">Check method</span><p>Record request time, first-review time, and whether each slice had enough context to review. Compare observed cases; no speed improvement is assumed.</p></div><p class="small">The owner makes the follow-up findable. Authors and reviewers agree how to try it; meaningful testing must remain possible.</p></section></div><footer>Original illustrative example · Local controls only. Changes are temporary and clear when this page is reloaded. Keep actual records in your approved source tools.</footer></main><script>const $=s=>document.querySelector(s);const $$=s=>Array.from(document.querySelectorAll(s));function pressed(attr,i){$$('[data-'+attr+']').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset[attr])===i)));}
const phases=[["0–5","Review the previous experiment","Reproduction steps appeared in four sample bug reports. Review-time evidence is missing.","Did we try it? Separate evidence of doing the experiment from evidence of its effect."],["5–12","Write observations individually","Three review requests arrived on the final Thursday; one lacked test instructions.","Ask what helped, what caused trouble, and what could change. Describe observable events, not motives."],["12–22","Group and clarify","Keep late handoffs and unclear review requests as separate groups.","What happened? The team has not established why the requests arrived late."],["22–32","Compare possible changes","Compare smaller review batches with clearer review instructions.","Which condition can we change next sprint? Check whether reviewable slices still allow meaningful testing."],["32–40","Define one experiment","Smaller review batches; Maya brings the experiment back at the Sprint 13 retrospective.","Name the owner, evidence request, and the check before moving on."],["40–45","Read back the commitment","Put the agreed experiment and evidence request in the maintained sprint record.","Confirm where it will be tracked. At the next retrospective, decide whether to keep, modify, or stop."]];
function phase(i){pressed('phase',i);$('#phase-note').textContent=phases[i][3];}
const views=['<h3>Late handoffs</h3><p>Three review requests arrived on the final Thursday of Sprint 12. The cause is not established.</p><dl><dt>Separate observation</dt><dd>One request lacked test instructions. Keep this distinct from arrival timing.</dd><dt>Hypothesis to test</dt><dd>Sending a reviewable slice earlier may expose review needs sooner.</dd></dl>','<h3>Smaller review batches</h3><p>In Sprint 13, split suitable changes into independently reviewable slices and request review when each slice is ready.</p><dl><dt>Linked observation</dt><dd>Three review requests arrived on the final Thursday.</dd><dt>Owner</dt><dd>Maya brings the experiment back for review.</dd><dt>Check</dt><dd>October 30, 2026 · Sprint 13 retrospective: keep, modify, or stop.</dd></dl>'];
function view(i){pressed('view',i);$('#connection').innerHTML=views[i];}$$('[data-phase]').forEach(b=>b.addEventListener('click',()=>phase(Number(b.dataset.phase))));$$('[data-view]').forEach(b=>b.addEventListener('click',()=>view(Number(b.dataset.view))));phase(0);view(0);</script></body></html>