An original bakery concept review with working tabs and a visible selection. This is a standalone illustration, not a Claude migration screen.

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>Bakery concept review — independent reading copy</title><style>*{box-sizing:border-box}body{margin:0;background:#eeeae1;color:#292b27;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:940px;margin:32px auto;background:#fffdf7;padding:34px clamp(18px,5vw,48px);border-top:5px solid #a94e28}h1{font:500 clamp(34px,5vw,51px)/1.12 Georgia,serif;max-width:720px;margin:17px 0}h2{font:500 25px/1.3 Georgia,serif;margin:24px 0 12px}p{margin:12px 0}.eyebrow{font-size:13px;letter-spacing:.13em;font-weight:750;color:#6d5040}.intro{max-width:650px;color:#595b52}.stamp{border-top:1px solid #d9d6ca;margin-top:28px;padding-top:17px;color:#686a5e;font-size:14px}.panel{padding:23px;background:#f0eee4;border:1px solid #d9d5c6;margin-top:22px}.result{font:500 49px/1.2 Georgia,serif;color:#864021;margin:12px 0}.note{padding:14px 17px;border-left:3px solid #a94e28;background:#f7ebda;color:#514535}button,select{font:inherit;max-width:100%}button{padding:10px 17px;border:1px solid #bab9ac;background:white;color:#30392d;cursor:pointer;border-radius:3px}button[aria-pressed=true],button.active{color:white;background:#314939;border-color:#314939}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c9652b;outline-offset:4px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}select{padding:11px;background:white;color:#293128;border:1px solid #9c9d90;width:100%;margin-top:8px}.label{font-weight:650}small{font-size:14px}table{width:100%;border-collapse:collapse;margin:20px 0}th,td{padding:12px 7px;border-bottom:1px solid #d9d5c6;text-align:left;font-variant-numeric:tabular-nums}th:last-child,td:last-child{text-align:right}svg{max-width:100%;height:auto}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hide{display:none}@media(max-width:600px){main{margin:0;padding:24px 18px 30px}h1{font-size:37px}.two{grid-template-columns:1fr}.panel{padding:18px}.result{font-size:43px}}@media print{body{background:white}main{margin:0;border-top:3px solid #a94e28}}</style></head><body><main><p class="eyebrow">FIELD NOTES / CONCEPT REVIEW 02</p><h1>A warmer welcome<br>for the bakery.</h1><p class="intro">Original fictional handover copy. Compare two directions before approving a sign color. This page contains no native Claude project, chats, or comments.</p><div class="controls" role="group" aria-label="Concept"><button type="button" data-concept="sunroom" aria-pressed="true">Sunroom</button><button type="button" data-concept="hearth" aria-pressed="false">Hearth</button></div><section class="panel" id="concept"><div class="two"><div><svg viewBox="0 0 320 230" role="img" aria-label="Original bakery identity illustration"><rect id="paper" x="0" y="0" width="320" height="230" rx="4" fill="#f5db91"/><path id="mark" d="M75 145a85 85 0 0 1 170 0z" fill="#945023"/><path d="M85 161h150M105 177h110" stroke="#fff9e9" stroke-width="5"/><text x="160" y="206" text-anchor="middle" font-family="Georgia,serif" font-size="20" fill="#463523">FLOUR &amp; FIELD</text></svg></div><div><p class="eyebrow">CURRENT DIRECTION</p><h2 id="name">Sunroom</h2><p id="rationale">A golden sign and an open sunrise mark for a bright morning counter.</p><p class="note"><strong>Approval pending.</strong> The owner still needs to confirm the sign color.</p></div></div></section><h2>Keep with the handover</h2><p>Source revision: round 2. Decision: neither direction approved. Next check: sign color under the actual storefront lighting.</p><footer class="stamp">Independent reading copy · Selection is not an approval · No comments or choices are saved</footer></main><script>const buttons=[...document.querySelectorAll('[data-concept]')];const themes={sunroom:['Sunroom','A golden sign and an open sunrise mark for a bright morning counter.','#f5db91','#945023'],hearth:['Hearth','A moss sign and a warm clay mark for a quieter neighborhood storefront.','#d9e0ce','#a24d32']};buttons.forEach(b=>b.addEventListener('click',()=>{const t=themes[b.dataset.concept];document.querySelector('#name').textContent=t[0];document.querySelector('#rationale').textContent=t[1];document.querySelector('#paper').setAttribute('fill',t[2]);document.querySelector('#mark').setAttribute('fill',t[3]);buttons.forEach(x=>x.setAttribute('aria-pressed',String(x===b)));}));</script></body></html>