HistoryApp:Landing

Up to 100 versions are kept, as small diffs with a full copy every 10th. Restore makes a new version with the old text: nothing is lost.

version 16current 2026-10-06 00:57 UTC · razie via designer-56designer View Text
version 15diff 2026-10-06 00:02 UTC · razie via designer-55designer View Text

What version 16 changed
…
</div>
<div>
- <div class="stat"><span class="big">Refunds</span><span class="small">One feature: spec, model, tests and working pages, kept in step.</span></div>
+ <div class="stat"><span class="big" style="color:var(--indigo)">5 minutes<br>That's the bar!</span><span class="small">One feature: spec, model, tests and working pages, kept in step.</span></div>
<div class="doors"><a class="btn" href="/signup?next=/home">Start a project</a><a class="btn ghost" href="#pro" onclick="return false" id="lp5-replay">Watch it again</a></div>
</div>
…
version 14diff 2026-10-06 00:01 UTC · razie via designer-55designer View Text

What version 15 changed
…
<a class="rung" href="#d2-master-sec"><span class="lv">Master</span><span class="sp">?x</span><span class="rl">How fast can a team of agents go?</span></a>
</div>
- <p class="sub" style="margin:12px 0 0">Your AI builds working apps, with their data, in minutes. You pick how complex. Start below to <a href="#hero">learn</a>, <a href="#creator">play</a> or <a href="#pro">work</a>.</p>
+ <p class="sub" style="margin:12px 0 0">Your AI builds working apps, with their data, in minutes. You pick the complexity. Start below to <a href="#hero">learn</a>, <a href="#creator">play</a> or <a href="#pro">work</a>.</p>
</div>
</header>
…
version 13diff 2026-10-04 23:41 UTC · razie via designer-34administrator View Text

What version 14 changed
…
.hero2{padding:clamp(20px,5vw,56px) 0 clamp(40px,6vw,72px)}
.ladder{margin:0 0 clamp(36px,6vw,64px)}.ladder .tag{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,28px);margin:0 0 4px}.ladder .sub{color:var(--soft);margin:0 0 14px}
-.ladder .rungs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rung{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card)}
-.rung .lv{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.rung .sp{display:block;font-size:20px;font-weight:800;color:var(--indigo);margin:2px 0}.rung.plain .sp{color:var(--ink)}.rung .rl{display:block;font-size:14px;color:var(--soft)}
+.ladder .rungs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rung{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:8px 14px 6px;background:var(--card)}
+.rung .lv{grid-column:2;grid-row:1;justify-self:end;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.rung .sp{grid-column:1;grid-row:1;font-size:20px;font-weight:800;color:var(--indigo);margin:0;line-height:1.2}.rung.plain .sp{color:var(--indigo)}.rung .rl{grid-column:1/-1;grid-row:2;font-size:14px;line-height:1.3;color:var(--soft)}
.rung.hi{border:2px solid var(--indigo)}@media (max-width:700px){.ladder .rungs{grid-template-columns:1fr 1fr}}
.hero2 h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-.03em;margin:0 0 16px;max-width:14em}
…
<header class="hero2" style="padding-top:4px;padding-bottom:0">
<div class="ladder" aria-label="How fast" style="margin-bottom:8px">
- <p class="sub">Your AI builds working apps, with their data. You pick how fast. Start below to learn, play or work.</p>
<div class="rungs">
- <a class="rung plain" href="#hero"><span class="lv">Hero</span><span class="sp">Just ask</span><span class="rl">Your AI makes your app</span></a>
+ <a class="rung plain" href="#hero"><span class="lv">Hero</span><span class="sp">Hobby apps</span><span class="rl">Your AI makes your app</span></a>
<a class="rung" href="#creator"><span class="lv">Creator</span><span class="sp">10x</span><span class="rl">For people who think in models</span></a>
<a class="rung hi" href="#pro"><span class="lv">Pro</span><span class="sp">50x</span><span class="rl">For architects and teams</span></a>
<a class="rung" href="#d2-master-sec"><span class="lv">Master</span><span class="sp">?x</span><span class="rl">How fast can a team of agents go?</span></a>
</div>
+ <p class="sub" style="margin:12px 0 0">Your AI builds working apps, with their data, in minutes. You pick how complex. Start below to <a href="#hero">learn</a>, <a href="#creator">play</a> or <a href="#pro">work</a>.</p>
</div>
</header>
</div>

+
+<section id="voice-to-app" style="max-width:1080px;margin:24px auto 8px;padding:0 16px">
+<iframe id="v2a-f" title="From voice to a running app" style="width:100%;border:0;display:block;height:760px;background:transparent" srcdoc="<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>From voice to a running app</title>
+<style>
+:root{--paper:#fbfaf7;--card:#ffffff;--ink:#1d1d1b;--soft:#6b6a66;--line:#e4e1da;--indigo:#9a4b12;--sun:#d99a2b;--sun-bg:#fbf1dc;--leaf:#3f7d4e;--rose:#b23a48;--attn:#5b5fd6;--me:#5b5fd6}
+@media (prefers-color-scheme:dark){:root{--paper:#141413;--card:#1d1d1b;--ink:#ecebe6;--soft:#9c9a93;--line:#33322f;--indigo:#f0a35e;--sun:#e5b454;--sun-bg:#2c2515;--leaf:#6cc08a;--rose:#f08a92;--attn:#9296f5;--me:#6b6fe0}}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif}
+.w{max-width:1040px;margin:0 auto;padding:14px}
+.top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:stretch}
+.chat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column}
+.hd{font:600 11px system-ui;color:var(--soft);letter-spacing:.05em;text-transform:uppercase;margin:0 2px 8px}
+.tk{display:flex;flex-direction:column;gap:7px;height:190px;flex:none;overflow-y:auto;scroll-behavior:smooth;padding-right:2px}
+.tk>*{flex:none}
+.b{max-width:92%;padding:8px 12px;border-radius:15px;font-size:13.5px;line-height:1.35;animation:pop .35s ease-out}
+.b.me{align-self:flex-end;background:var(--me);color:#fff;border-bottom-right-radius:5px}
+.b.ai{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px}
+.b.ai small{display:block;font-size:11px;color:var(--soft)}
+.mic{display:flex;align-items:center;gap:10px;margin-top:10px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
+.mic .mb{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--soft)}
+.mic.on .mb{background:#e5484d;border-color:#e5484d;color:#fff;animation:mp 1.2s ease-out infinite}
+.mic .wave{flex:1;display:flex;align-items:center;gap:3px;height:24px}
+.mic .wave i{flex:1;max-width:5px;height:4px;border-radius:3px;background:var(--line)}
+.mic.on .wave i{background:var(--attn);animation:mbar .9s ease-in-out infinite}
+.mic .ml{flex:none;font:600 11px system-ui;color:var(--soft);min-width:64px;text-align:right}
+@keyframes mbar{0%,100%{height:4px}50%{height:var(--h,20px)}}
+@keyframes mp{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}100%{box-shadow:0 0 0 9px rgba(229,72,77,0)}}
+@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+.agents{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 12px 6px;margin-left:12px;display:flex;flex-direction:column}
+.agents svg{width:100%;height:auto;display:block}
+.msg{min-height:26px;margin-top:4px;display:flex;justify-content:center}
+.msg span{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--attn) 55%,transparent);background:color-mix(in srgb,var(--attn) 12%,var(--card));font-size:12px;opacity:0;transition:opacity .35s}
+.msg span.on{opacity:1}
+.msg i{width:7px;height:7px;border-radius:50%;background:var(--attn);animation:pl 1s ease-in-out infinite}
+@keyframes pl{50%{opacity:.3}}
+.low{position:relative;margin-top:14px;height:330px}
+.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
+.col{background:color-mix(in srgb,var(--line) 35%,var(--paper));border:1px solid var(--line);border-radius:10px;padding:8px;height:330px;overflow:hidden;transition:opacity .6s}
+.board.half .c3,.board.half .c4{opacity:0}
+.board.gone .c1,.board.gone .c2{opacity:0}
+.col h4{margin:0 0 8px;font-size:12.5px;display:flex;justify-content:space-between}
+.col h4 small{color:var(--soft);font-weight:400}
+.cards{display:flex;flex-direction:column;gap:7px}
+.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12px;animation:pop .4s ease-out;transition:opacity .45s,transform .45s}
+.card.out{opacity:0;transform:translateX(30px)}
+.card .h{display:flex;align-items:center;gap:6px}
+.card .id{font:600 11px ui-monospace,Menlo,monospace;color:var(--indigo)}
+.card .st{margin-left:auto;font-size:10px;color:var(--soft)}
+.card .t{font-weight:600;margin-top:2px}
+.card.work{background:color-mix(in srgb,var(--leaf) 9%,var(--card))}
+.card.done .st{color:var(--leaf);font-weight:600}
+.side{position:absolute;top:0;right:0;bottom:0;width:calc(50% - 5px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;opacity:0;transition:opacity .6s;overflow:hidden}
+.side.on{opacity:1}
+.pane{position:absolute;inset:12px;transition:opacity .6s}
+.pane.off{opacity:0}
+.doc{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--paper)}
+.doc .ti{font-weight:700;font-size:14px;margin-bottom:8px}
+.sec{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);margin-top:8px;animation:pop .45s ease-out}
+.sec .tag{flex:none;font:600 10.5px system-ui;padding:2px 8px;border-radius:999px;color:#fff}
+.sec .tx{flex:1;font-size:13px}
+.sec .cnt{font-weight:700;font-variant-numeric:tabular-nums}
+.ln{height:7px;border-radius:4px;background:var(--line);margin:6px 0;width:0;transition:width .7s}
+.dm svg{width:100%;height:auto;display:block}
+.dm .draw{stroke-dasharray:200;stroke-dashoffset:200;animation:dr 1s ease-out forwards}
+@keyframes dr{to{stroke-dashoffset:0}}
+.dm .bx{opacity:0;animation:pop .45s ease-out forwards}
+.side h5{margin:0 0 10px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center}
+.side h5 small{font-weight:400;color:var(--soft)}
+.ent{border:1.5px solid var(--sun);background:var(--sun-bg);border-radius:9px;padding:6px 9px;margin-bottom:8px;animation:pop .45s ease-out}
+.ent b{font-size:12.5px}
+.ent .f{font-size:11.5px;color:var(--soft)}
+.ent .f span{animation:pop .4s ease-out}
+.lk{font-size:11px;color:var(--indigo);margin:-4px 0 8px 10px;animation:pop .4s ease-out}
+.tr{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;animation:pop .35s ease-out}
+.tr .r{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--attn);animation:sp .8s linear infinite}
+.tr.ok .r{animation:none;border:none;background:var(--leaf);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
+.tr.ok .r:after{content:"✓"}
+.tr .x{flex:1}
+.sum{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--leaf);opacity:0;transition:opacity .4s}
+.sum.on{opacity:1}
+@keyframes sp{to{transform:rotate(360deg)}}
+.app{position:absolute;top:0;left:0;bottom:0;width:calc(50% - 5px);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;opacity:0;transform:scale(1.02);transition:opacity .7s,transform .7s;pointer-events:none}
+.app.on{opacity:1;transform:none;pointer-events:auto}
+.chrome{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--soft)}
+.chrome .dt{width:8px;height:8px;border-radius:50%;background:var(--line)}
+.chrome .pill{margin-left:auto;font:600 10.5px system-ui;padding:2px 9px;border-radius:999px;background:#3ecf8e;color:#06120c}
+.ap{padding:16px;flex:1;background:color-mix(in srgb,var(--attn) 5%,var(--card))}
+.ap .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
+.ap h3{margin:2px 0 4px;font-size:19px}
+.ap .meta{font-size:12.5px;color:var(--soft);margin-bottom:12px}
+.full{display:inline-block;font:600 11px system-ui;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--rose) 15%,var(--card));color:var(--rose);margin-left:6px}
+.place{border:1.5px solid var(--attn);border-radius:12px;padding:12px;background:var(--card)}
+.place .n{font-size:28px;font-weight:700;color:var(--attn);line-height:1}
+.place .s{font-size:12.5px;color:var(--soft)}
+.line{display:flex;gap:6px;margin:10px 0 2px}
+.line i{flex:1;height:8px;border-radius:4px;background:var(--line)}
+.line i.me{background:var(--attn)}
+.offer{margin-top:12px;border:1px dashed var(--leaf);border-radius:10px;padding:9px 11px;font-size:12.5px;opacity:0;transition:opacity .5s}
+.offer.on{opacity:1}
+.offer b{color:var(--leaf)}
+.btn{display:inline-block;margin-top:8px;padding:6px 14px;border-radius:999px;background:var(--attn);color:#fff;font:600 12.5px system-ui}
+.ctl{display:flex;justify-content:flex-end;margin-top:10px}
+.ctl button{border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 12.5px system-ui;padding:5px 14px;border-radius:999px;cursor:pointer;min-height:32px}
+@media (max-width:700px){.top{grid-template-columns:minmax(0,1fr)}.agents{margin-left:0}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.c3,.c4{display:none}.low{height:690px}.side{top:auto;height:340px;width:100%}.app{bottom:auto;height:340px;width:100%}}
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+</style></head><body><div class="w">
+<div class="top">
+ <div class="chat"><div class="hd">You and your AI</div><div class="tk" id="tk"></div>
+ <div class="mic" id="mic"><span class="mb"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span class="wave" id="wave"></span><span class="ml" id="ml">tap to talk</span></div>
+ </div>
+ <div class="agents"><div class="hd">Your agents</div><div id="map"></div><div class="msg"><span id="msg"><i></i><b id="msgt"></b></span></div></div>
+</div>
+<div class="low">
+ <div class="board" id="board">
+ <div class="col c1"><h4>New <small id="n0"></small></h4><div class="cards" id="c0"></div></div>
+ <div class="col c2"><h4>In progress <small id="n1"></small></h4><div class="cards" id="c1"></div></div>
+ <div class="col c3"><h4>Review <small id="n2"></small></h4><div class="cards" id="c2"></div></div>
+ <div class="col c4"><h4>Done <small id="n3"></small></h4><div class="cards" id="c3"></div></div>
+ </div>
+ <div class="side" id="side"><div class="pane" id="pSpec"></div><div class="pane off" id="pDm"></div><div class="pane off" id="pTest"></div></div>
+ <div class="app" id="app">
+ <div class="chrome"><span class="dt"></span><span class="dt"></span><span class="dt"></span><span>northconf.ai-putty.com/sessions/agents</span><span class="pill">live</span></div>
+ <div class="ap"><div class="k">NorthConf · AI agents in practice · Thu 2 pm</div><h3>Join the Waitlist<span class="full">Full</span></h3><div class="meta">Room B · 120 seats · 14 on the waitlist</div>
+ <div class="place"><div class="s">You're on the waitlist</div><div class="n">#2</div><div class="s">in line</div><div class="line"><i></i><i class="me"></i><i></i><i></i><i></i><i></i></div></div>
+ <div class="offer" id="offer"><b>A seat just freed up.</b> It's yours for 24 hours.<br><span class="btn">Take the seat</span></div>
+ </div>
+ </div>
+</div>
+<div class="ctl"><button id="rp" type="button">Watch it again</button></div>
+</div>
+<script>
+(function(){
+var $=function(i){return document.getElementById(i)};
+var wave=$('wave');for(var i=0;i<16;i++){var b=document.createElement('i');b.style.setProperty('--h',(8+Math.round(Math.abs(Math.sin(i*1.7))*16))+'px');b.style.animationDelay=(i*0.06)+'s';wave.appendChild(b)}
+var COL={you:['#fbf1dc','#d99a2b','#633806'],up:'#6b7fd7',idle:'#9aa3b2',working:'#2f9a6f',listening:'#2f9a6f',waiting:'#d9a520',done:'#1f6b4c'};
+var NS='http://www.w3.org/2000/svg';
+function el(n,a,t){var e=document.createElementNS(NS,n);for(var k in a)e.setAttribute(k,a[k]);if(t!=null)e.textContent=t;return e}
+function map(st){var h=$('map');h.innerHTML='';var svg=el('svg',{viewBox:'0 0 380 110',role:'img','aria-label':'You, designer, coder and guardian'});
+ var d=el('defs',{}),m=el('marker',{id:'ar',viewBox:'0 0 10 10',refX:8,refY:5,markerWidth:6,markerHeight:6,orient:'auto'});m.appendChild(el('path',{d:'M0 0L10 5L0 10z',fill:'#9c9a93'}));d.appendChild(m);svg.appendChild(d);
+ var N=[['you','you',st.you],['designer','D',st.designer],['coder','C',st.coder],['guardian','G',st.guardian]],x=40;
+ N.forEach(function(n,i){var cx=40+i*100;if(i)svg.appendChild(el('path',{d:'M'+(cx-75)+' 44H'+(cx-27),stroke:'#9c9a93','stroke-width':1.5,fill:'none','marker-end':'url(#ar)'}));
+ var s=n[2];
+ if(i===0)svg.appendChild(el('circle',{cx:cx,cy:44,r:23,fill:COL.you[0],stroke:COL.you[1],'stroke-width':1.5}));
+ else if(s)svg.appendChild(el('circle',{cx:cx,cy:44,r:23,fill:COL[s]||'#9aa3b2'}));
+ else svg.appendChild(el('circle',{cx:cx,cy:44,r:23,fill:'none',stroke:'#9c9a93','stroke-width':1.5,'stroke-dasharray':'3 3'}));
+ if(s==='working'&&i){var r=el('circle',{cx:cx,cy:44,r:23,fill:'none',stroke:COL.working,'stroke-width':2});r.appendChild(el('animate',{attributeName:'r',values:'23;31',dur:'1.4s',repeatCount:'indefinite'}));r.appendChild(el('animate',{attributeName:'opacity',values:'.8;0',dur:'1.4s',repeatCount:'indefinite'}));svg.appendChild(r)}
+ svg.appendChild(el('text',{x:cx,y:48,'text-anchor':'middle','font-size':12,fill:i===0?COL.you[2]:(s?'#fff':'#9c9a93')},n[1]));
+ svg.appendChild(el('text',{x:cx,y:86,'text-anchor':'middle','font-size':12,fill:'currentColor'},i===0?'you':n[0]));
+ svg.appendChild(el('text',{x:cx,y:101,'text-anchor':'middle','font-size':11,fill:i===0?COL.you[1]:(s?COL[s]:'#9c9a93')},i===0?(s||''):(s||'not started')));
+ });h.appendChild(svg)}
+var IT={a:['P-21','Waitlist: sessions and seats'],b:['P-22','Offer a freed seat for 24 h'],c:['P-23','Show your place in line'],
+ s1:['P-17','Speaker badges with QR check-in'],s2:['P-14','Room map on the schedule'],s3:['P-12','Ticket refunds'],s4:['P-11','Session feedback form'],s5:['P-9','Schedule export to calendar']};
+var cards={};
+function counts(){for(var i=0;i<4;i++)$('n'+i).textContent=$('c'+i).children.length||''}
+function card(k,c,st,cls){var d=cards[k];if(d&&d.parentNode)d.parentNode.removeChild(d);d=document.createElement('div');d.className='card '+(cls||'');d.innerHTML='<div class="h"><span class="id">'+IT[k][0]+'</span><span class="st">'+st+'</span></div><div class="t">'+IT[k][1]+'</div>';$(c).appendChild(d);cards[k]=d;counts();return d}
+function say(t){var s=$('msg');$('msgt').textContent=t;s.classList.add('on')}
+function bub(cls,t,who){var b=document.createElement('div');b.className='b '+cls;b.innerHTML=(who?'<small>'+who+'</small>':'')+t;var tk=$('tk');tk.appendChild(b);tk.scrollTop=tk.scrollHeight}
+function mic(on,l){$('mic').classList.toggle('on',on);$('ml').textContent=l}
+function pane(id){['pSpec','pDm','pTest'].forEach(function(p){$(p).classList.toggle('off',p!==id)})}
+function sec(tag,col,txt,n){var d=document.createElement('div');d.className='sec';d.innerHTML='<span class="tag" style="background:'+col+'">'+tag+'</span><span class="tx">'+txt+'</span><span class="cnt">0</span>';$('specDoc').appendChild(d);var c=d.querySelector('.cnt'),i=0;var t=setInterval(function(){i++;c.textContent=i;if(i>=n)clearInterval(t)},260)}
+function specInit(){$('pSpec').innerHTML='<div class="hd">Designer · writing it up</div><div class="doc" id="specDoc"><div class="ti">Waitlist</div><div class="ln" id="l1"></div><div class="ln" id="l2"></div></div>'}
+function dmDraw(){$('pDm').innerHTML='<div class="hd">Domain model</div><div class="dm"><svg viewBox="0 0 320 250" font-family="system-ui,sans-serif">'+
+ '<g stroke="var(--indigo)" stroke-width="1.5" fill="none"><path class="draw" style="animation-delay:.9s" d="M110 52H200"/><path class="draw" style="animation-delay:1.3s" d="M70 76V150"/><path class="draw" style="animation-delay:1.7s" d="M110 174H200"/></g>'+
+ '<g font-size="10" fill="var(--indigo)"><text x="155" y="46" text-anchor="middle" class="bx" style="animation-delay:1.1s">seats *</text><text x="76" y="118" class="bx" style="animation-delay:1.5s">waitlist *</text><text x="155" y="168" text-anchor="middle" class="bx" style="animation-delay:1.9s">attendee</text></g>'+
+ box(20,28,'Session','title, room, seats',0)+box(200,28,'Seat','attendee',.3)+box(20,150,'WaitlistEntry','place, offeredUntil',.6)+box(200,150,'Attendee','name, email',.9)+
+ '</svg></div>'}
+function box(x,y,n,f,dl){return '<g class="bx" style="animation-delay:'+dl+'s"><rect x="'+x+'" y="'+y+'" width="'+(n.length>8?118:100)+'" height="48" rx="9" fill="var(--sun-bg)" stroke="var(--sun)" stroke-width="1.5"/><text x="'+(x+10)+'" y="'+(y+20)+'" font-size="13" font-weight="700" fill="var(--ink)">'+n+'</text><text x="'+(x+10)+'" y="'+(y+37)+'" font-size="10.5" fill="var(--soft)">'+f+'</text></g>'}
+function test(t){var r=document.createElement('div');r.className='tr';r.innerHTML='<span class="r"></span><span class="x">'+t+'</span>';$('pTest').appendChild(r);return r}
+var TESTS=['A full session takes a waitlist entry','A freed seat goes to the next in line','The offer expires after 24 hours','Your place in line updates','Nobody is offered the same seat twice'];
+var trs=[];
+var S=[
+ [900,function(){mic(true,'listening…');map({you:'',designer:'listening',coder:'idle',guardian:''});say('designer is listening')}],
+ [1500,function(){bub('me','Our sessions keep selling out. Add a waitlist.')}],
+ [1500,function(){mic(false,'thinking…');bub('ai','When a seat frees up, offer it to the next person for 24 hours?','designer')}],
+ [1600,function(){mic(true,'listening…')}],
+ [1300,function(){bub('me','Yes. And show people their place in line.')}],
+ [1300,function(){mic(false,'tap to talk');bub('ai','Got it. Three items for the team.','designer');map({you:'',designer:'working',coder:'idle',guardian:''});say('designer is filing the items')}],
+ [600,function(){card('a','c0','new')}],[500,function(){card('b','c0','new')}],[500,function(){card('c','c0','new')}],
+ [1000,function(){map({you:'',designer:'working',coder:'idle',guardian:''});say('designer is writing the spec');$('board').classList.add('half');specInit();pane('pSpec');$('side').classList.add('on')}],
+ [500,function(){$('l1').style.width='80%'}],[400,function(){$('l2').style.width='55%'}],
+ [700,function(){sec('Spec','#5b5fd6','1 feature added',1)}],
+ [1100,function(){sec('Design','#b06a1c','4 behaviours added',4)}],
+ [1500,function(){sec('Test','#2f9a6f','5 tests added',5)}],
+ [2200,function(){dmDraw();pane('pDm');say('designer drafts the domain model')}],
+ [3200,function(){map({you:'',designer:'done',coder:'working',guardian:''});say('coder took P-21, P-22, P-23');['a','b','c'].forEach(function(k){card(k,'c1','in progress','work')});$('pTest').innerHTML='<div class="hd">Tests · run by the coder</div>';pane('pTest');trs=[]}],
+ [500,function(){trs.push(test(TESTS[0]))}],[450,function(){trs.push(test(TESTS[1]))}],[450,function(){trs.push(test(TESTS[2]))}],[450,function(){trs.push(test(TESTS[3]))}],[450,function(){trs.push(test(TESTS[4]))}],
+ [700,function(){trs[0].classList.add('ok')}],[420,function(){trs[1].classList.add('ok')}],[420,function(){trs[2].classList.add('ok')}],[420,function(){trs[3].classList.add('ok')}],[420,function(){trs[4].classList.add('ok');var s=document.createElement('div');s.className='sum';s.textContent='5 of 5 pass';$('pTest').appendChild(s);setTimeout(function(){s.classList.add('on')},30)}],
+ [900,function(){map({you:'',designer:'done',coder:'done',guardian:'working'});say('guardian: app and tests match the spec')}],
+ [1200,function(){['a','b','c'].forEach(function(k){card(k,'c1','done','done')})}],
+ [800,function(){['a','b','c'].forEach(function(k,i){setTimeout(function(){cards[k].classList.add('out')},i*220)})}],
+ [1000,function(){['a','b','c'].forEach(function(k){var c=cards[k];if(c&&c.parentNode)c.parentNode.removeChild(c)});counts();$('board').classList.add('gone');$('app').classList.add('on');map({you:'1 to look at',designer:'done',coder:'done',guardian:'done'});say('live: the waitlist is in the app')}],
+ [2200,function(){$('offer').classList.add('on')}],
+ [6000,null]
+];
+function seed(){card('s1','c0','new');card('s2','c1','in progress','work');card('s3','c2','review');card('s4','c3','done','done');card('s5','c3','done','done')}
+var k=0,tm=null;
+function reset(){clearTimeout(tm);k=0;$('tk').innerHTML='';['c0','c1','c2','c3'].forEach(function(c){$(c).innerHTML=''});cards={};seed();$('side').classList.remove('on');pane('pSpec');$('board').classList.remove('half');$('board').classList.remove('gone');$('app').classList.remove('on');$('offer').classList.remove('on');$('msg').classList.remove('on');mic(false,'tap to talk');map({you:'',designer:'idle',coder:'idle',guardian:''})}
+function run(){if(k>=S.length){reset();tm=setTimeout(run,800);return}var s=S[k];tm=setTimeout(function(){if(s[1])s[1]();k++;run()},s[0])}
+$('rp').addEventListener('click',function(){reset();run()});
+reset();run();
+})();
+</script></body></html>
+"></iframe>
+<script>(function(){var f=document.getElementById("v2a-f");function fit(){try{var d=f.contentDocument;if(d&&d.body)f.style.height=(d.documentElement.scrollHeight+4)+"px"}catch(e){}}f.addEventListener("load",function(){fit();setInterval(fit,1500)})})()</script>
+</section>
+

<style>
…
version 12diff 2026-10-04 22:15 UTC · razie via designer-34administrator View Text

What version 13 changed
…
<li><b>Step in any time.</b> Read, approve or send back any spec, design or build between them.</li>
</ul>
- <div class="cta"><a class="primary" href="https://d2master.aiheroapps.com" data-wire="see-it-live">See it live</a><a href="/sso/login?next=/home%3Flevel%3Dmaster" data-wire="start-master">Start a Master project</a></div>
+ <div class="cta"><a class="primary" href="https://d2master.ai-putty.com" data-wire="see-it-live">See it live</a><a href="/sso/login?next=/home%3Flevel%3Dmaster" data-wire="start-master">Start a Master project</a></div>
</div>
<div class="pic"><div class="dark">
…
'<text x="222" y="80" text-anchor="middle" fill="#46c48e" font-size="11">coder · working</text><text x="312" y="80" text-anchor="middle" fill="#a8abb2" font-size="11">guardian</text></g></svg>';
function R(c,l,t,m,ok){return '<div class="row"><span class="ps '+c+'">'+l+'</span><div class="t"><div>'+t+'</div><div class="m">'+m+'</div></div>'+(ok?'<span class="ok" aria-label="Close">✓</span>':'')+'</div>';}
-var MANAGE=MAP+'<div class="rows">'+R('ps-rv','Review','Design calls: waitlist cap 50, offers expire at midnight','P-14 · coder → you',1)+R('ps-ip','In progress','Waitlist: offer a freed seat to the next person','P-13 · designer → coder')+R('ps-wt','Waiting','Payment provider key, put it in the vault','P-16 · coder → you',1)+R('ps-nw','New','Speaker badges with QR check-in','P-15 · you → designer')+'<div class="pk">▸ Parked (2)</div></div><a class="try" href="https://d2master.aiheroapps.com/pipeline">Open the pipeline on d2master</a>';
+var MANAGE=MAP+'<div class="rows">'+R('ps-rv','Review','Design calls: waitlist cap 50, offers expire at midnight','P-14 · coder → you',1)+R('ps-ip','In progress','Waitlist: offer a freed seat to the next person','P-13 · designer → coder')+R('ps-wt','Waiting','Payment provider key, put it in the vault','P-16 · coder → you',1)+R('ps-nw','New','Speaker badges with QR check-in','P-15 · you → designer')+'<div class="pk">▸ Parked (2)</div></div><a class="try" href="https://d2master.ai-putty.com/pipeline">Open the pipeline on d2master</a>';
function M(c,w,t){return '<div class="msg '+c+'"><div class="who">'+w+'</div>'+t+'</div>';}
var RELEASE=M('you','You','Looks good. Release it.')+'<div style="margin:10px 0;padding:12px 14px;border:1px solid #454b57;border-radius:12px;background:#1f2229;color:#eceae4"><div style="font-weight:700;margin-bottom:2px">Release 3 items?</div><div style="font-size:12px;color:#a8abb2;margin-bottom:8px">Full suite, then deploy.</div><div style="font-size:13px;line-height:1.55;border-top:1px solid #33373f;padding-top:6px"><div><span style="color:#9296f5;font-family:ui-monospace,monospace">P-12</span>  Waitlist: written up, three behaviours, five tests</div><div><span style="color:#9296f5;font-family:ui-monospace,monospace">P-13</span>  Waitlist: offer a freed seat to the next person</div><div><span style="color:#9296f5;font-family:ui-monospace,monospace">P-14</span>  Design calls: cap of 50, offers expire at midnight</div></div><div style="margin-top:10px;display:flex;gap:8px"><span style="background:#5b5fd6;color:#fff;border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700">Release</span><span style="border:1px solid #454b57;border-radius:999px;padding:4px 14px;font-size:13px">Cancel</span></div></div>'+M('ag','Dispatcher','Released v1.4: the full suite passed, it\'s deployed, and the live checks are green. Shipped: P-12, P-13 and P-14.')+'<a class="try" href="https://d2master.ai-putty.com/pipeline">Open the pipeline on d2master</a>';
var T=[DIAG,
-M('you','You → designer','Sessions sell out fast. Add a waitlist: when a seat frees up, offer it to the next person for 24 hours.')+M('ag','Designer','Written up for your review as P-12: the waitlist in the spec (three behaviours), how it works, and five design tests. One question: should people see their place in line?')+'<a class="try" href="https://d2master.aiheroapps.com">Try it on d2master</a>',
+M('you','You → designer','Sessions sell out fast. Add a waitlist: when a seat frees up, offer it to the next person for 24 hours.')+M('ag','Designer','Written up for your review as P-12: the waitlist in the spec (three behaviours), how it works, and five design tests. One question: should people see their place in line?')+'<a class="try" href="https://d2master.ai-putty.com">Try it on d2master</a>',
M('you','You → coder','You are the coder on northconf. Work the pipeline.')+M('ag','Coder','Took P-13, the waitlist. Built it, ran the tests (5 of 5 pass), deployed a preview. Two details came up in the build; sending them to the designer.'),
M('ag','Coder → designer','Built P-13. Settled in the build: a waitlist holds 50 people per session, and an offer expires at midnight instead of after 24 hours. Design calls: P-14.')+M('gd','Designer → you','The coder capped waitlists at 50 and changed the offer to expire at midnight. I\'d keep the cap and go back to 24 hours. OK?')+M('you','You','Keep both as the coder built them.'),
…
version 11diff 2026-10-04 22:11 UTC · razie via designer-34administrator View Text

What version 12 changed
…
<a class="rung" href="#creator"><span class="lv">Creator</span><span class="sp">10x</span><span class="rl">For people who think in models</span></a>
<a class="rung hi" href="#pro"><span class="lv">Pro</span><span class="sp">50x</span><span class="rl">For architects and teams</span></a>
- <a class="rung" href="https://d2master.aiheroapps.com/"><span class="lv">Master</span><span class="sp">?x</span><span class="rl">How fast can a team of agents go?</span></a>
+ <a class="rung" href="#d2-master-sec"><span class="lv">Master</span><span class="sp">?x</span><span class="rl">How fast can a team of agents go?</span></a>
</div>
</div>
…
<section class="door t1 t6" id="pro">
<div class="wrap">
- <p style="font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 10px">Proposal 4 · Pro section</p>
<div class="intro">
<div>
…
version 10full copy 2026-10-04 15:52 UTC · razie via designer-30administrator View Text

What version 11 changed
…
section.extras p{color:var(--soft);margin:0}
section.door.extra{border-top:0}
+#hero.door{border-top:0;padding-top:clamp(18px,3vw,32px)}
+#hero.door h2{font-size:clamp(22px,2.8vw,32px)}

/* hero door app mockups */
…
@media (prefers-color-scheme:dark){:root{--review:#9296f5;--paper:#141413;--card:#1d1d1b;--ink:#ecebe6;--soft:#9c9a93;--line:#33322f;--indigo:#f0a35e;--indigo-bg:#2e2419;--slate:#9c9a93;--slate-bg:#22211f;--sun:#e5b454;--sun-bg:#2c2515;--leaf:#6cc08a;--rose:#f08a92;--rose-bg:#3a2022;--god:#c5a0f5;--god-bg:#2a2038;--admin:#6cc3d5;--admin-bg:#17292d;--attn:#9296f5}}
</style>
+<script>
+/* Landing demos start when scrolled into view, pause when scrolled away, replay on return */
+window.lpView=function(el,enter,leave){if(!el||!('IntersectionObserver' in window))return enter();var on=false;
+new IntersectionObserver(function(es){var v=es[0].isIntersecting;if(v===on)return;on=v;if(v)enter();else if(leave)leave()},{rootMargin:'0px 0px -30% 0px',threshold:0}).observe(el)};
+</script>
</head>
<body>
…
</div>

- <header class="hero2" style="padding-bottom:0">
+ <header class="hero2" style="padding-top:4px;padding-bottom:0">
<div class="ladder" aria-label="How fast" style="margin-bottom:8px">
<p class="sub">Your AI builds working apps, with their data. You pick how fast. Start below to learn, play or work.</p>
…
<div class="intro">
<div>
- <span class="badge">Hero</span>
<h2>Talk your app into existence. Watch it grow.</h2>
<p class="who">For you, your family, your club.</p>
…
nx.addEventListener('click',function(){ if(cur>=4) play(); else {stopAuto();go(cur+1,true);} });
document.getElementById('lp3-replay').addEventListener('click',play);
- play();
+ lpView(bc.closest('section')||bc.parentNode,play,function(){stopAuto();talk(false);timers.forEach(clearTimeout);timers=[];});
})();
</script>
…
nx.addEventListener('click',function(){ if(cur>=4) play(); else {stopAuto();go(cur+1,true);} });
document.getElementById('lp4-replay').addEventListener('click',play);
- play();
+ lpView(bc.closest('section')||bc.parentNode,play,function(){stopAuto();talk(false);timers.forEach(clearTimeout);timers=[];});
})();
</script>
…
[].forEach.call($('lp5-nav').children,function(s){s.addEventListener('click',function(){setView(s.dataset.v)})});
function arm(){clearTimeout(window.__lp5t);window.__lp5t=setTimeout(function(){go(cur>=S.length-1?0:cur+1)},6000)}
-var sec=$('lp5-bc').closest('section'),started=false;
-function start(){if(started)return;started=true;go(0)}
-function visible(){var r=sec.getBoundingClientRect();return r.top<(window.innerHeight||800)*0.85&&r.bottom>0}
-if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){start();io.disconnect()}},{threshold:0.1});io.observe(sec)}
-window.addEventListener('scroll',function(){if(visible())start()},{passive:true});
-setTimeout(function(){if(visible())start()},300);
-setTimeout(start,2000);
+var bc5=$('lp5-bc');lpView(bc5.closest('section')||bc5.parentNode,function(){go(0)},function(){clearTimeout(window.__lp5t)});
})();
</script>
…
version 9diff 2026-10-04 12:48 UTC · razie via designer-28administrator View Text

What version 10 changed
…
</script>

-<section class="door t1" id="pro">
- <div class="wrap grid">
- <div>
- <span class="badge">Pro</span>
- <h2>Prototype big domains, rules and APIs, fast.</h2>
- <p class="who">For architects and teams prototyping enterprise-grade domain models and functionality.</p>
- <p>Specs and stories live in readable pages, code sits in small strict blocks, and every story is a test. Mock APIs by example, orchestrate with rules and flows, and prove the model before anyone writes production code.</p>
- <div class="doors">
- <a class="btn" href="/fiddle">Open the fiddle</a>
+<section class="door t1 t6" id="pro">
+ <div class="wrap">
+ <p style="font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 10px">Proposal 4 · Pro section</p>
+ <div class="intro">
+ <div>
+ <span class="badge">Pro</span>
+ <h2>Spec-first design and building of large apps.</h2>
+ <p class="who">For product managers, analysts and architects, and their teams.</p>
+ <p>Hand your AI the requirements. It turns them into a spec, a domain model, a design and tests, one feature at a time, and builds the real pages from them. Change a feature and all of it moves together. Guardians check that the app and the tests still match the spec, continuously.</p>
</div>
+ <div>
+ <div class="stat"><span class="big">Refunds</span><span class="small">One feature: spec, model, tests and working pages, kept in step.</span></div>
+ <div class="doors"><a class="btn" href="/signup?next=/home">Start a project</a><a class="btn ghost" href="#pro" onclick="return false" id="lp5-replay">Watch it again</a></div>
+ </div>
</div>
- <div class="stage">
- <p class="hint" style="margin:2px 2px 8px">The same portfolio, as source.</p>
- <pre class="src" id="srcpre" aria-label="Source"></pre>
+ <div class="split">
+ <div class="chat">
+ <div class="hd">You and your AI</div>
+ <div class="tk" id="lp5-tk" aria-live="polite"></div>
+ <div class="mic" id="lp5-mic"><svg viewBox="0 0 16 22" class="micico" aria-hidden="true"><rect x="5" y="1" width="6" height="12" rx="3" fill="currentColor"/><path d="M2.5 10a5.5 5.5 0 0 0 11 0" fill="none" stroke="currentColor" stroke-width="1.5"/><line x1="8" y1="15.5" x2="8" y2="20" stroke="currentColor" stroke-width="1.5"/><line x1="5" y1="20" x2="11" y2="20" stroke="currentColor" stroke-width="1.5"/></svg><span class="wav"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><span class="mtxt">listening\u2026</span></div>
+ <div class="ctl">
+ <div class="dots" id="lp5-dots"><button data-s="0">0</button><button data-s="1">1</button><button data-s="2">2</button><button data-s="3">3</button><button data-s="4">4</button><button data-s="5">5</button></div>
+ <button class="nx" id="lp5-next">Next &rsaquo;</button>
+ </div>
+ </div>
+ <div class="frame">
+ <div class="chrome"><i></i><i></i><i></i><span class="url" id="lp5-url">demo-3.ai-putty.com/feature/refund</span><span class="pill" id="lp5-pill">spec · draft</span></div>
+ <div class="bc" id="lp5-bc">
+ <div class="pc hero" id="lp5-hero"><h3 id="lp5-htitle">Refund an order</h3><p id="lp5-hsub">Feature · in sync, layer by layer</p>
+ <nav id="lp5-nav"><span data-v="feature" class="on">Feature</span><span data-v="pipe">Pipeline</span><span data-v="sys">System</span></nav></div>
+
+ <div class="body" id="lp5-feat">
+ <div class="pc card" id="lp5-left">
+ <h5 id="lp5-lh">Spec</h5>
+ <div id="lp5-spec">
+ <div class="row">A paid order can be refunded.</div>
+ <div class="row">A refund puts the items back in stock.</div>
+ <div class="row" id="lp5-spec3" style="display:none">Refunds over $500 need a manager's OK.</div>
+ </div>
+ </div>
+ <div class="pc card" id="lp5-tests"><h5>Tests</h5><div class="wrapx"><table class="t"><tr><th>Case</th><th>Result</th></tr>
+ <tr><td>Paid order refunds</td><td class="n" id="lp5-r1">—</td></tr>
+ <tr><td>Stock goes back up</td><td class="n" id="lp5-r2">—</td></tr>
+ <tr><td>Unpaid order refused</td><td class="n" id="lp5-r3">—</td></tr>
+ <tr id="lp5-t4" style="display:none"><td>$600 waits for approval</td><td class="n" id="lp5-r4">—</td></tr></table></div></div>
+ </div>
+
+ <div class="body one" id="lp5-pipeview" style="display:none">
+ <div class="pc card" style="grid-column:1/-1">
+ <h5>Pipeline · the maker is on it</h5>
+ <svg viewBox="0 0 300 92" class="pipe" role="img" aria-label="You, the pipeline and the maker building the refund feature">
+ <defs><marker id="pa" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#8fb0cf"/></marker></defs>
+ <circle cx="34" cy="46" r="20" fill="none" stroke="#d9a520" stroke-width="2"/><text x="34" y="50" text-anchor="middle" fill="#d9a520" font-size="11" font-weight="700">you</text>
+ <path d="M56 46H98" stroke="#8fb0cf" stroke-width="1.5" marker-end="url(#pa)"/>
+ <rect x="104" y="26" width="86" height="40" rx="9" fill="none" stroke="#8fb0cf" stroke-dasharray="4 3"/><text x="147" y="43" text-anchor="middle" fill="#8fb0cf" font-size="10">pipeline</text>
+ <circle cx="134" cy="56" r="4" fill="#2f9a6f"><animate attributeName="opacity" values="1;.3;1" dur="1.1s" repeatCount="indefinite"/></circle><text x="147" y="60" text-anchor="middle" fill="#8fb0cf" font-size="9">Refund</text>
+ <path d="M192 46H234" stroke="#8fb0cf" stroke-width="1.5" marker-end="url(#pa)"/>
+ <circle cx="262" cy="46" r="20" fill="#1f674a" stroke="#2f9a6f" stroke-width="2"/><text x="262" y="43" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">AI</text><text x="262" y="56" text-anchor="middle" fill="#bfe8d4" font-size="8">building</text>
+ </svg>
+ <div class="tiny" id="lp5-pipetxt">Writing the pages from the spec and design…</div>
+ </div>
+ </div>
+
+ <div class="ribbon" id="lp5-guard">Guardian: prototype and tests match the spec · all pass</div>
+ </div>
+ </div>
</div>
</div>
<div class="wrap minis">
- <div><strong>Write</strong>Prose first, with small blocks of rules where they're explained.</div>
- <div><strong>Mock</strong>Describe an API by example before it exists.</div>
- <div><strong>Test</strong>Stories double as acceptance tests that keep running.</div>
+ <div><strong>Define</strong>Requirements become spec, model, design and tests — one anchor per feature.</div>
+ <div><strong>Prototype</strong>The maker builds the real pages from the spec, not a drawing of them.</div>
+ <div><strong>Keep in sync</strong>Change a feature and every layer moves; guardians catch drift.</div>
</div>
</section>
+<script>
+(function(){
+var $=function(i){return document.getElementById(i)};
+var tk=$('lp5-tk'),dots=[].slice.call(document.querySelectorAll('#lp5-dots button')),cur=-1,timers=[];
+var MODEL='<svg viewBox="0 0 300 150" class="dm" role="img" aria-label="Order, OrderLine and Product with the refund rule">'+
+ '<defs><marker id="ma" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#8fb0cf"/></marker></defs>'+
+ '<g class="box k"><rect x="18" y="20" width="86" height="34" rx="8"/><text x="61" y="36" text-anchor="middle">Order</text><text x="61" y="48" text-anchor="middle" class="f">state: paid</text></g>'+
+ '<path d="M104 40h44" stroke="#8fb0cf" stroke-width="1.4" marker-end="url(#ma)"/><text x="126" y="34" text-anchor="middle" class="lb">has</text>'+
+ '<g class="box"><rect x="150" y="20" width="96" height="34" rx="8"/><text x="198" y="36" text-anchor="middle">OrderLine</text><text x="198" y="48" text-anchor="middle" class="f">qty</text></g>'+
+ '<path d="M198 54v30" stroke="#8fb0cf" stroke-width="1.4" marker-end="url(#ma)"/><text x="222" y="72" text-anchor="middle" class="lb">of</text>'+
+ '<g class="box"><rect x="150" y="90" width="96" height="34" rx="8"/><text x="198" y="106" text-anchor="middle">Product</text><text x="198" y="118" text-anchor="middle" class="f">stock</text></g>'+
+ '<path d="M61 54v46a8 8 0 0 0 8 8h73" stroke="#3ecf8e" stroke-width="1.4" stroke-dasharray="4 3" marker-end="url(#ma)"/>'+
+ '<text x="92" y="140" class="rule">refund → stock +qty</text></svg>';
+var PAGES='<div class="appscreen">'+'<aside class="side"><div class="brand">\u25c9 Corner Shop</div>'+'<a>Dashboard</a><a class="on">Orders</a><a>Products</a><a>Customers</a><a>Settings</a></aside>'+'<main class="main">'+'<header class="mhead"><h4>Orders</h4><div class="hr"><span class="srch">Search\u2026</span><span class="ava">RC</span></div></header>'+'<div class="toolbar"><span class="seg on">All</span><span class="seg">Paid</span><span class="seg">Refunded</span><span class="spacer"></span><button class="new">+ New order</button></div>'+'<table class="otbl"><thead><tr><th>Order</th><th>Customer</th><th>Total</th><th>Status</th><th></th></tr></thead><tbody>'+'<tr><td>#1042</td><td>A. Fenwick</td><td class="n">$86.50</td><td><span class="chip paid">Paid</span></td><td><button class="abtn" id="lp5-rb1">Refund</button></td></tr>'+'<tr><td>#1051</td><td>M. Oduya</td><td class="n">$612.00</td><td><span class="chip paid">Paid</span></td><td><button class="abtn" id="lp5-rb2">Refund</button></td></tr>'+'<tr><td>#1039</td><td>J. Park</td><td class="n">$41.00</td><td><span class="chip ref">Refunded</span></td><td></td></tr>'+'</tbody></table>'+'<div class="ptoast" id="lp5-pt"></div>'+'<div class="stkcard">Pour-over cone \u00b7 <b id="lp5-stk">2</b> in stock</div>'+'</main></div>';
+var S=[
+ {me:"Client notes: customers can return what they bought and get their money back.",
+ ai:"I'll make that a feature, Refund. Here's the spec.",view:'feature',left:'spec',url:'demo-3.ai-putty.com/feature/refund',pill:'spec \u00b7 draft'},
+ {ai:"Design's in. The model: an Order has lines, each line is of a Product; refunding a paid order adds the quantity back to stock.",
+ left:'model',pill:'spec + model'},
+ {ai:"Tests written from the spec.",left:'model',tests:{r1:'pass',r2:'pass',r3:'pass'},pill:'tests pass'},
+ {ai:"Now I'm building the pages \u2014 watch the pipeline.",view:'pipe',pill:'maker working'},
+ {ai:"Pages are live. Try refunding order #1042.",view:'feature',left:'pages',pill:'prototype \u00b7 live',live:1},
+ {me:"One more: refunds over $500 need a manager's OK.",
+ ai:"Updated together \u2014 a spec line, a test, and the page now asks for approval. Guardian says it's in sync.",
+ left:'pages',add:1,tests:{r4:'pass'},guard:1,pill:'in sync',live:1}
+];
+function b(cls,t){var d=document.createElement('div');d.className='b '+cls;d.textContent=t;tk.appendChild(d)}
+function setLeft(kind){var L=$('lp5-left'),h=$('lp5-lh'),body=$('lp5-spec');$('lp5-bc').classList.toggle('proto',kind==='pages');
+ var inj=L.querySelector('.injx');if(inj)inj.remove();
+ if(kind==='spec'){body.style.display='';h.textContent='Spec';return}
+ body.style.display='none';
+ var d=document.createElement('div');d.className='injx';
+ d.innerHTML=(kind==='model')?MODEL:PAGES;L.appendChild(d);
+ h.textContent=(kind==='model')?'Domain model':'Prototype \u00b7 live';
+ if(kind==='pages')wirePages();}
+function wirePages(){var done=function(id,msg,drop){var b=$(id);if(!b)return;b.addEventListener('click',function(){
+ $('lp5-pt').textContent=msg;$('lp5-pt').classList.add('in');if(drop){$('lp5-stk').textContent=String(+($('lp5-stk').textContent)+drop)}b.textContent='Refunded';b.disabled=true})};
+ done('lp5-rb1','Order #1042 refunded \u00b7 stock restored',3);
+ var b2=$('lp5-rb2');if(b2)b2.addEventListener('click',function(){$('lp5-pt').textContent=($('lp5-spec3').style.display==='none')?'Order #1051 refunded':'Over $500 \u2014 sent to a manager';$('lp5-pt').classList.add('in')});}
+function setView(v){$('lp5-feat').style.display=v==='feature'?'':'none';$('lp5-pipeview').style.display=v==='pipe'?'':'none';
+ [].forEach.call($('lp5-nav').children,function(s){s.classList.toggle('on',s.dataset.v===v)})}
+function reset(){tk.innerHTML='';var mic=$('lp5-mic');if(mic)mic.classList.remove('on');$('lp5-bc').classList.remove('proto');setView('feature');setLeft('spec');
+ ['lp5-spec3','lp5-t4'].forEach(function(i){$(i).style.display='none'});
+ ['r1','r2','r3','r4'].forEach(function(r){var e=$('lp5-'+r);e.textContent='\u2014'});
+ $('lp5-guard').classList.remove('in');$('lp5-pill').textContent='spec \u00b7 draft';$('lp5-pill').classList.remove('live');$('lp5-url').classList.remove('live')}
+function apply(s){
+ var mic=$('lp5-mic');if(mic)mic.classList.toggle('on',!!s.me);
+ if(s.me)b('me',s.me);if(s.ai)b('ai',s.ai);
+ if(s.view)setView(s.view);
+ if(s.left)setLeft(s.left);
+ if(s.add){$('lp5-spec3').style.display='';$('lp5-t4').style.display=''}
+ if(s.tests)Object.keys(s.tests).forEach(function(r){var e=$('lp5-'+r);e.innerHTML='<span class="pass">\u2713 pass</span>'});
+ if(s.guard)$('lp5-guard').classList.add('in');
+ if(s.pill){$('lp5-pill').textContent=s.pill;$('lp5-pill').classList.toggle('live',!!s.live)}
+ if(s.url)$('lp5-url').textContent=s.url;$('lp5-url').classList.toggle('live',!!s.live);
+ tk.scrollTop=tk.scrollHeight}
+function go(n){reset();for(var i=0;i<=n;i++)apply(S[i]);cur=n;
+ dots.forEach(function(d,i){d.classList.toggle('on',i===n)});$('lp5-next').textContent=n>=S.length-1?'Again \u21ba':'Next \u203a';arm()}
+dots.forEach(function(d){d.addEventListener('click',function(){go(+d.dataset.s)})});
+$('lp5-next').addEventListener('click',function(){go(cur>=S.length-1?0:cur+1)});
+$('lp5-replay').addEventListener('click',function(){go(0)});
+[].forEach.call($('lp5-nav').children,function(s){s.addEventListener('click',function(){setView(s.dataset.v)})});
+function arm(){clearTimeout(window.__lp5t);window.__lp5t=setTimeout(function(){go(cur>=S.length-1?0:cur+1)},6000)}
+var sec=$('lp5-bc').closest('section'),started=false;
+function start(){if(started)return;started=true;go(0)}
+function visible(){var r=sec.getBoundingClientRect();return r.top<(window.innerHeight||800)*0.85&&r.bottom>0}
+if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){if(es[0].isIntersecting){start();io.disconnect()}},{threshold:0.1});io.observe(sec)}
+window.addEventListener('scroll',function(){if(visible())start()},{passive:true});
+setTimeout(function(){if(visible())start()},300);
+setTimeout(start,2000);
+})();
+</script>
+<style>
+#pro .bc .pc{opacity:1;transform:none}
+#pro .bc .ribbon{opacity:0;transform:scale(.9)}#pro .bc .ribbon.in{opacity:1;transform:none}
+#pro .bc{--b-acc:#8fb0cf;--b-acc2:#1e2a38;--b-hero1:#1d2633;--b-hero2:#15171c}
+#pro .bc .body{grid-template-columns:1fr 1fr}
+#pro .bc .body.one{grid-template-columns:1fr}
+#pro .t1 .badge,#pro .badge{background:var(--slate-bg);color:var(--slate)}
+#pro .bc .row{font-size:13px;padding:5px 0;border-top:1px solid var(--b-line)}#pro .bc .row:first-child{border-top:none}
+#pro .bc .pipe,#pro .bc .dm{width:100%;height:auto;display:block;margin:4px 0}
+#pro .bc .dm .box rect{fill:var(--b-card);stroke:var(--b-line);stroke-width:1.5}#pro .bc .dm .box.k rect{stroke:var(--b-acc)}
+#pro .bc .dm text{fill:var(--b-ink);font:600 11px var(--body)}#pro .bc .dm .f{fill:var(--b-soft);font:400 9px var(--mono)}
+#pro .bc .dm .lb{fill:var(--b-soft);font:400 9px var(--body)}#pro .bc .dm .rule{fill:#3ecf8e;font:600 10px var(--body)}
+#pro .bc .pg{font-size:13px}#pro .bc .pgtop{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px}#pro .bc .pgtop span{color:#3ecf8e;font-weight:400;font-size:11px}
+#pro .bc .orow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--b-line)}
+#pro .bc .rbtn{font:700 11px var(--body);padding:3px 10px;border-radius:999px;background:var(--b-acc2);color:var(--b-acc);border:1px solid var(--b-acc);cursor:pointer}
+#pro .bc .rbtn:disabled{opacity:.6;cursor:default}
+#pro .bc .ptoast{min-height:16px;color:#3ecf8e;font-size:12px;margin:6px 0;opacity:0;transition:opacity .3s}#pro .bc .ptoast.in{opacity:1}
+#pro .bc .stk{margin-top:6px;color:var(--b-soft);font-size:12px}#pro .bc .stk b{color:var(--b-ink)}
+#pro .bc .tiny{color:var(--b-soft);font-size:12px;margin-top:6px}

+#pro .bc .app{font-size:13px}
+#pro .bc .appbar{display:flex;align-items:center;gap:12px;padding:8px 10px;background:var(--b-card);border-radius:10px;margin-bottom:10px}
+#pro .bc .appbar b{font-family:var(--display);font-size:15px}
+#pro .bc .atabs{display:flex;gap:12px;margin-left:6px}
+#pro .bc .atabs span{color:var(--b-soft);font-size:12px}#pro .bc .atabs span.on{color:var(--b-acc);border-bottom:2px solid var(--b-acc);padding-bottom:2px}
+#pro .bc .ava{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--b-acc2);color:var(--b-acc);font:700 10px/26px var(--body);text-align:center}
+#pro .bc .apptop{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 8px}
+#pro .bc .apptop h4{margin:0;font-family:var(--display);font-size:16px}
+#pro .bc .srch{font-size:12px;color:var(--b-soft);border:1px solid var(--b-line);border-radius:999px;padding:4px 12px}
+#pro .bc .otbl{width:100%;border-collapse:collapse}
+#pro .bc .otbl th{text-align:left;font:700 10px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--b-soft);padding:6px 8px;border-bottom:1px solid var(--b-line)}
+#pro .bc .otbl td{padding:8px;border-bottom:1px solid var(--b-line);font-size:13px}
+#pro .bc .otbl td.n{text-align:right;font-variant-numeric:tabular-nums}
+#pro .bc .chip{font:700 10px var(--body);padding:2px 9px;border-radius:999px}
+#pro .bc .chip.paid{background:var(--b-acc2);color:var(--b-acc)}
+#pro .bc .chip.ref{background:#3a2a22;color:#e0a06a}
+#pro .bc .abtn{font:700 11px var(--body);padding:4px 12px;border-radius:999px;background:#3ecf8e;color:#06120c;border:none;cursor:pointer}
+#pro .bc .abtn:disabled{opacity:.55;cursor:default;background:var(--b-acc2);color:var(--b-acc)}
+#pro .bc .stkcard{margin-top:10px;padding:8px 12px;background:var(--b-card);border-radius:10px;color:var(--b-soft);font-size:12px}#pro .bc .stkcard b{color:var(--b-ink)}
+
+#pro .bc.proto{padding:0;background:#0f1216}
+#pro .bc.proto .hero{display:none}
+#pro .bc.proto .body{display:flex;flex-direction:column;gap:12px}
+#pro .bc.proto #lp5-left{border:none;background:transparent;padding:0;border-radius:0}
+#pro .bc.proto #lp5-left>h5{display:none}
+#pro .bc .appscreen{display:grid;grid-template-columns:132px 1fr;min-height:360px;background:#0f1216;border-radius:10px;overflow:hidden;border:1px solid #1e2630}
+#pro .bc .side{background:#0b0e12;padding:14px 10px;display:flex;flex-direction:column;gap:3px;border-right:1px solid #1a222b}
+#pro .bc .side .brand{font-family:var(--display);font-size:13px;color:#8fb0cf;margin-bottom:10px}
+#pro .bc .side a{font-size:12px;color:#8a97a5;padding:6px 8px;border-radius:7px}
+#pro .bc .side a.on{background:#182230;color:#cfe0f0}
+#pro .bc .main{padding:14px 16px}
+#pro .bc .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
+#pro .bc .mhead h4{margin:0;font-family:var(--display);font-size:17px;color:#e6edf3}
+#pro .bc .hr{display:flex;align-items:center;gap:10px}
+#pro .bc .main .srch{font-size:12px;color:#8a97a5;border:1px solid #27313c;border-radius:999px;padding:4px 12px}
+#pro .bc .main .ava{width:26px;height:26px;border-radius:50%;background:#182230;color:#8fb0cf;font:700 10px/26px var(--body);text-align:center}
+#pro .bc .toolbar{display:flex;align-items:center;gap:6px;margin-bottom:10px}
+#pro .bc .seg{font:600 11px var(--body);color:#8a97a5;padding:4px 10px;border-radius:999px;border:1px solid #27313c}
+#pro .bc .seg.on{background:#182230;color:#cfe0f0;border-color:#2a3a4c}
+#pro .bc .spacer{flex:1}
+#pro .bc .new{font:700 11px var(--body);color:#06120c;background:#8fb0cf;border:none;border-radius:8px;padding:5px 12px;cursor:pointer}
+#pro .bc.proto .otbl td,#pro .bc.proto .otbl th{color:#cfd7df;border-color:#1c2530}
+#pro .bc.proto .otbl th{color:#6f7d8a}
+#pro .bc.proto .stkcard{background:#131920;color:#8a97a5}
+#pro .bc .otbl td .pass,#pro .bc .t .pass{display:inline-flex;align-items:center;gap:4px;color:#3ecf8e;font-weight:700}
+#pro .bc .pass{color:#3ecf8e;font-weight:700}
+#pro .bc.proto #lp5-tests{background:#0f1216;border:1px solid #1e2630;border-radius:10px;padding:12px}
+#pro .bc.proto #lp5-tests h5{color:#8fb0cf}
+#pro .bc.proto #lp5-tests .t td,#pro .bc.proto #lp5-tests .t th{color:#cfd7df;border-color:#1c2530}
+#pro .bc.proto #lp5-tests .t th{color:#6f7d8a}
+
+#pro .mic{display:none;align-items:center;gap:8px;margin:2px 0 8px;color:var(--b-acc,#8fb0cf)}
+#pro .mic.on{display:flex}
+#pro .mic .micico{width:15px;height:20px;flex:none}
+#pro .mic .wav{display:inline-flex;align-items:center;gap:3px;height:18px}
+#pro .mic .wav i{width:3px;height:6px;border-radius:2px;background:currentColor;opacity:.85;animation:lp5w 1s ease-in-out infinite}
+#pro .mic .wav i:nth-child(2){animation-delay:.1s}#pro .mic .wav i:nth-child(3){animation-delay:.2s}
+#pro .mic .wav i:nth-child(4){animation-delay:.3s}#pro .mic .wav i:nth-child(5){animation-delay:.15s}
+#pro .mic .wav i:nth-child(6){animation-delay:.25s}#pro .mic .wav i:nth-child(7){animation-delay:.05s}
+@keyframes lp5w{0%,100%{height:5px}50%{height:17px}}
+#pro .mic .mtxt{font-size:11px;color:var(--b-soft)}
+
+
+#pro .frame .bc{height:560px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
+#pro .bc .hero,#pro .bc .body,#pro .bc .appscreen{flex:none}
+#pro .bc.proto{height:560px}
+#pro .bc .ribbon{margin-top:auto}
+#pro .bc .appscreen{min-height:0}
+</style>
+
<!--
d2 landing: a Pipeline tab on the Creator and Pro sections (designer-built, Razie approved 2026-09-28).
…
version 8diff 2026-10-04 12:47 UTC · razie via designer-28administrator View Text

What version 9 changed
…
'<rect x="136" y="162" width="86" height="40" rx="8" fill="#1f2229" stroke="#454b57"/><text x="179" y="186" text-anchor="middle" fill="#eceae4" font-size="11" font-weight="700">Review</text>'+
'<g stroke="#8a8f99" stroke-width="1.3" fill="none" marker-end="url(#d2ms-arrow)"><path d="M82 114H122"/><path d="M124 134H84"/><path d="M179 90V104"/><path d="M179 146V160"/><path d="M234 64H274"/><path d="M276 118H236"/><path d="M276 178H236"/></g>'+
-'<rect x="276" y="40" width="112" height="44" rx="10" fill="#23265a" stroke="#9296f5"/><text x="332" y="67" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">Designer</text>'+
+'<text x="332" y="30" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">AI Agents</text><rect x="276" y="40" width="112" height="44" rx="10" fill="#23265a" stroke="#9296f5"/><text x="332" y="67" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">Designer</text>'+
'<rect x="276" y="96" width="112" height="44" rx="10" fill="#23265a" stroke="#9296f5"/><text x="332" y="123" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">Coder</text>'+
'<rect x="276" y="152" width="112" height="44" rx="10" fill="#23265a" stroke="#9296f5"/><text x="332" y="179" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">Tester</text>'+
…
version 7diff 2026-10-04 12:45 UTC · razie · in person View Text

What version 8 changed
…
(function(){
var root=document.getElementById('d2-master-sec'); if(!root) return;
-var DIAG='<svg viewBox="0 0 400 250" role="img" aria-label="You, the pipeline, and the designer, coder, tester and guardian agents"><defs><marker id="d2ms-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#8a8f99"/></marker></defs><g font-family="system-ui,sans-serif">'+
+var DIAG='<svg viewBox="0 0 480 250" role="img" aria-label="You, the pipeline, and the designer, coder, tester and guardian agents; the coder sends design calls to the designer and the tester sends bugs to the coder"><defs><marker id="d2ms-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#8a8f99"/></marker></defs><g font-family="system-ui,sans-serif">'+
'<rect x="10" y="94" width="72" height="54" rx="10" fill="#3a2a0e" stroke="#f2b84b"/><text x="46" y="126" text-anchor="middle" fill="#eceae4" font-size="13" font-weight="700">You</text>'+
'<rect x="124" y="16" width="110" height="216" rx="12" fill="none" stroke="#6b707a" stroke-dasharray="5 4"/><text x="179" y="36" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">Pipeline</text>'+
…
'<rect x="276" y="152" width="112" height="44" rx="10" fill="#23265a" stroke="#9296f5"/><text x="332" y="179" text-anchor="middle" fill="#eceae4" font-size="12" font-weight="700">Tester</text>'+
'<rect x="276" y="206" width="112" height="34" rx="10" fill="#10291f" stroke="#46c48e" stroke-dasharray="4 3"/><text x="332" y="228" text-anchor="middle" fill="#eceae4" font-size="11" font-weight="700">Guardian</text>'+
-'<text x="103" y="108" text-anchor="middle" fill="#a8abb2" font-size="9">direct</text><text x="103" y="148" text-anchor="middle" fill="#a8abb2" font-size="9">review</text></g></svg>';
+'<text x="103" y="108" text-anchor="middle" fill="#a8abb2" font-size="9">direct</text><text x="103" y="148" text-anchor="middle" fill="#a8abb2" font-size="9">review</text></g><defs><marker id="d2ms-a3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#c7a6ff"/></marker></defs><g stroke="#c7a6ff" stroke-width="1.4" fill="none" marker-end="url(#d2ms-a3)"><path d="M390 112 C 414 108, 414 70, 392 64"/><path d="M390 168 C 414 164, 414 126, 392 122"/></g><g font-family="system-ui,sans-serif" font-size="10" fill="#c7a6ff"><text x="418" y="86">design</text><text x="418" y="97">calls</text><text x="418" y="142">bugs</text><text x="418" y="153">found</text></g></svg>';
var MAP='<svg class="pm" viewBox="0 0 360 96" role="img" aria-label="You, designer, coder and guardian, with open items per role"><defs><marker id="d2ms-a2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#8a8f99"/></marker></defs><g font-family="system-ui,sans-serif">'+
'<g stroke="#8a8f99" stroke-width="1.3" fill="none" marker-end="url(#d2ms-a2)"><path d="M62 44H112"/><path d="M152 44H202"/><path d="M242 44H292"/></g>'+
…
version 6diff 2026-10-04 12:35 UTC · razie · in person View Text

What version 7 changed
…
<div class="doors">
<a class="btn" href="/fiddle">Open the fiddle</a>
- <a class="btn ghost" href="https://metals.dieselapps.com/wiki/metals.Topic:Diesel2">Read the spec</a>
</div>
</div>
…
<div class="pane">
<h6>Your vault</h6>
- <div class="tree">Diesel/<br>  metals/<br>    Topic/<br>      <span class="hl">Buying rules.md</span><br>      Gold juniors.md<br>  Cards/</div>
+ <div class="tree">Diesel/<br>  my-notes/<br>    Topic/<br>      <span class="hl">Buying rules.md</span><br>      Gold juniors.md<br>  Cards/</div>
</div>
<div class="arrows" aria-hidden="true">
…
<footer>
<div class="wrap">
- Diesel 2 is being specified in the open, in <a href="https://metals.dieselapps.com/wiki/metals.Topic:Diesel2">the spec</a>. This page is an early sketch on a sandbox; the notebook isn't open yet.
+ This page is an early sketch; the notebook isn't open yet.
</div>
</footer>
…
version 5diff 2026-10-04 11:23 UTC · razie via designer-28administrator View Text

What version 6 changed
…
<div class="pic"><div class="dark">
<div class="tabs" role="tablist" aria-label="How a Master team works">
- <button role="tab" data-i="0">Agents</button><button role="tab" data-i="1">Imagine</button><button role="tab" data-i="2">Build</button><button role="tab" data-i="3">Feedback</button><button role="tab" data-i="4">Manage</button>
+ <button role="tab" data-i="0">Agents</button><button role="tab" data-i="1">Imagine</button><button role="tab" data-i="2">Build</button><button role="tab" data-i="3">Feedback</button><button role="tab" data-i="4">Manage</button><button role="tab" data-i="5">Release</button>
</div>
<div class="body" role="tabpanel" aria-live="polite"></div>
…
var MANAGE=MAP+'<div class="rows">'+R('ps-rv','Review','Design calls: waitlist cap 50, offers expire at midnight','P-14 · coder → you',1)+R('ps-ip','In progress','Waitlist: offer a freed seat to the next person','P-13 · designer → coder')+R('ps-wt','Waiting','Payment provider key, put it in the vault','P-16 · coder → you',1)+R('ps-nw','New','Speaker badges with QR check-in','P-15 · you → designer')+'<div class="pk">▸ Parked (2)</div></div><a class="try" href="https://d2master.aiheroapps.com/pipeline">Open the pipeline on d2master</a>';
function M(c,w,t){return '<div class="msg '+c+'"><div class="who">'+w+'</div>'+t+'</div>';}
+var RELEASE=M('you','You','Looks good. Release it.')+'<div style="margin:10px 0;padding:12px 14px;border:1px solid #454b57;border-radius:12px;background:#1f2229;color:#eceae4"><div style="font-weight:700;margin-bottom:2px">Release 3 items?</div><div style="font-size:12px;color:#a8abb2;margin-bottom:8px">Full suite, then deploy.</div><div style="font-size:13px;line-height:1.55;border-top:1px solid #33373f;padding-top:6px"><div><span style="color:#9296f5;font-family:ui-monospace,monospace">P-12</span>  Waitlist: written up, three behaviours, five tests</div><div><span style="color:#9296f5;font-family:ui-monospace,monospace">P-13</span>  Waitlist: offer a freed seat to the next person</div><div><span style="color:#9296f5;font-family:ui-monospace,monospace">P-14</span>  Design calls: cap of 50, offers expire at midnight</div></div><div style="margin-top:10px;display:flex;gap:8px"><span style="background:#5b5fd6;color:#fff;border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700">Release</span><span style="border:1px solid #454b57;border-radius:999px;padding:4px 14px;font-size:13px">Cancel</span></div></div>'+M('ag','Dispatcher','Released v1.4: the full suite passed, it\'s deployed, and the live checks are green. Shipped: P-12, P-13 and P-14.')+'<a class="try" href="https://d2master.ai-putty.com/pipeline">Open the pipeline on d2master</a>';
var T=[DIAG,
M('you','You → designer','Sessions sell out fast. Add a waitlist: when a seat frees up, offer it to the next person for 24 hours.')+M('ag','Designer','Written up for your review as P-12: the waitlist in the spec (three behaviours), how it works, and five design tests. One question: should people see their place in line?')+'<a class="try" href="https://d2master.aiheroapps.com">Try it on d2master</a>',
M('you','You → coder','You are the coder on northconf. Work the pipeline.')+M('ag','Coder','Took P-13, the waitlist. Built it, ran the tests (5 of 5 pass), deployed a preview. Two details came up in the build; sending them to the designer.'),
M('ag','Coder → designer','Built P-13. Settled in the build: a waitlist holds 50 people per session, and an offer expires at midnight instead of after 24 hours. Design calls: P-14.')+M('gd','Designer → you','The coder capped waitlists at 50 and changed the offer to expire at midnight. I\'d keep the cap and go back to 24 hours. OK?')+M('you','You','Keep both as the coder built them.'),
-MANAGE];
+MANAGE,
+RELEASE];
var body=root.querySelector('.body'),bs=[].slice.call(root.querySelectorAll('.tabs button'));
function show(i){body.innerHTML=T[i];bs.forEach(function(b,j){b.setAttribute('aria-selected',j===i?'true':'false')});}
…
version 4diff 2026-10-03 15:02 UTC · razie · in person View Text

What version 5 changed
…
</div>

-<section class="door t3" id="creator">
- <div class="wrap grid">
- <div>
- <span class="badge">Creator</span>
- <h2>Describe a domain. Use the app it becomes, right away.</h2>
- <p class="who">For people who build apps and think in models.</p>
- <p class="say" aria-label="What you tell your AI">Create a domain model for a mining company: its properties and claims, the deposits and their resource estimates, drill programs with holes and assays, and who owns what. Seed it with a few sample companies and let me see it.</p>
- <p>Model your domain with AI, see it as a graph, and work with live objects the moment a class exists. Sketch draft views, mock APIs by example, then wire behaviour in with rules, flows and streams. <em>Work on a live specification, not an abstract one!</em></p>
- <div class="stat"><span class="big">5 minutes</span><span class="small">From a 20-class model to a working, navigable app, with zero code. That's the bar.</span></div>
- <div class="doors">
- <a class="btn" href="/dom">Open the domain browser</a>
- <a class="btn ghost" href="/domain/overview">See the model graph</a>
+<style>
+/* creator section: the shop demo (designer-28, approved by Razie 2026-10-04) */
+.bc .scr{position:absolute;inset:0;padding:14px;background:var(--b-bg);opacity:0;transform:scale(.98);transition:opacity .5s,transform .5s;z-index:3;pointer-events:none;overflow:hidden}
+.bc .scr.in{opacity:1;transform:none}
+.bc .scr .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
+.bc .scr .top b{font-family:var(--display);font-size:18px}
+.bc .scr .top span{font-size:12px;color:var(--b-soft)}
+.bc .tabs{display:flex;gap:6px;margin-bottom:10px}.bc .tabs span{font:700 11px var(--body);padding:3px 9px;border-radius:999px;border:1px solid var(--b-line);color:var(--b-soft)}.bc .tabs span.on{border-color:var(--b-acc);color:var(--b-acc)}
+.bc svg.dm{width:100%;height:auto;display:block}
+.bc svg.dm .cl rect{fill:var(--b-card);stroke:var(--b-line);stroke-width:1.5}.bc svg.dm .cl.k rect{stroke:var(--b-acc)}
+.bc svg.dm .cl text{fill:var(--b-ink);font:400 12px var(--body)}.bc svg.dm .cl text.f{fill:var(--b-soft);font:400 10.5px var(--mono)}
+.bc svg.dm .ln{stroke:var(--b-soft);stroke-width:1.4;fill:none}.bc svg.dm .lb{fill:var(--b-soft);font:400 10px var(--body)}
+.bc svg.dm .cl{opacity:0;transition:opacity .5s}.bc .scr.in svg.dm .cl{opacity:1}
+.bc svg.dm .ln,.bc svg.dm .lb{opacity:0;transition:opacity .6s .9s}.bc .scr.in svg.dm .ln,.bc .scr.in svg.dm .lb{opacity:1}
+.bc .dx{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
+.bc .dx .cls div{display:flex;justify-content:space-between;padding:6px 9px;border-radius:9px;font-size:13px;color:var(--b-soft)}
+.bc .dx .cls div.on{background:var(--b-acc2);color:var(--b-acc);font-weight:700}
+.bc table.t{width:100%;border-collapse:collapse;font-size:12.5px}
+.bc table.t th{text-align:left;font:700 10.5px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--b-soft);padding:5px 6px;border-bottom:1px solid var(--b-line)}
+.bc table.t td{padding:6px;border-bottom:1px solid var(--b-line)}
+.bc table.t td.n{text-align:right;font-variant-numeric:tabular-nums}
+.bc .low{font:700 10px var(--body);padding:1px 7px;border-radius:999px;background:#3a1f1f;color:#f08a8a}
+.bc .chg{animation:nbflash 2.4s ease-out 1;border-radius:6px}
+.bc .wrapx{overflow-x:auto}
+.t6 .chrome .pill.meld{background:#7a7fc9;border-color:#7a7fc9;color:#fff}
+</style>
+<section class="door t3 t6" id="creator">
+ <div class="wrap">
+ <div class="intro">
+ <div>
+ <span class="badge">Creator</span>
+ <h2>Describe what you need. Get the model, the data and the app.</h2>
+ <p class="who">For people who build apps and think in models.</p>
+ <p>Tell your AI what your app is about. It writes the model, fills in sample data and builds the pages, with the rules that keep them right: pay an order and the stock goes down. Then ask to see what's underneath: with Mind Meld on, your AI shows you the model and the data, live.</p>
</div>
+ <div>
+ <div class="stat"><span class="big">My shop</span><span class="small">A real app with its model, rules and data, from one paragraph.</span></div>
+ <div class="doors"><a class="btn" href="/signup?next=/home">Start a project</a><a class="btn ghost" href="#creator" onclick="return false" id="lp4-replay">Watch it again</a></div>
+ </div>
</div>
- <div class="stage" id="stage">
- <p class="hint" style="margin:2px 2px 8px">Tap a class. Its screens already exist.</p>
- <svg class="mini" viewBox="0 0 420 64" role="group" aria-label="A small model. Pick a class to see its generated screen.">
- <path class="link" d="M108 40 H164"/><text class="ltxt" x="118" y="30">owns *</text>
- <path class="link" d="M270 40 H322"/><text class="ltxt" x="289" y="30">of</text>
- <g class="node" data-c="dep" tabindex="0" role="button" aria-label="Deposit"><rect x="8" y="18" width="100" height="44" rx="12"/><text x="28" y="45">Deposit</text></g>
- <g class="node on" data-c="co" tabindex="0" role="button" aria-label="Company"><rect x="164" y="18" width="106" height="44" rx="12"/><text x="183" y="45">Company</text></g>
- <g class="node" data-c="hold" tabindex="0" role="button" aria-label="Holding"><rect x="322" y="18" width="92" height="44" rx="12"/><text x="340" y="45">Holding</text></g>
- </svg>
+ <div class="split">
+ <div class="chat">
+ <div class="hd">You and your AI</div>
+ <div class="tk" id="lp4-tk" aria-live="polite"></div>
+ <div class="mic" id="lp4-mic" aria-hidden="true"><span class="mb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><div class="wave"><i style="--h:10px;animation-delay:-0.00s"></i><i style="--h:18px;animation-delay:-0.07s"></i><i style="--h:26px;animation-delay:-0.14s"></i><i style="--h:14px;animation-delay:-0.21s"></i><i style="--h:22px;animation-delay:-0.28s"></i><i style="--h:28px;animation-delay:-0.35s"></i><i style="--h:12px;animation-delay:-0.42s"></i><i style="--h:20px;animation-delay:-0.49s"></i><i style="--h:26px;animation-delay:-0.56s"></i><i style="--h:16px;animation-delay:-0.63s"></i><i style="--h:24px;animation-delay:-0.70s"></i><i style="--h:10px;animation-delay:-0.77s"></i><i style="--h:18px;animation-delay:-0.84s"></i><i style="--h:22px;animation-delay:-0.91s"></i><i style="--h:14px;animation-delay:-0.98s"></i><i style="--h:26px;animation-delay:-1.05s"></i><i style="--h:12px;animation-delay:-1.12s"></i><i style="--h:20px;animation-delay:-1.19s"></i></div><span class="ml" id="lp4-ml">Tap to talk</span></div>
+ <div class="ctl">
+ <div class="dots" id="lp4-dots"><button data-s="0">0</button><button data-s="1">1</button><button data-s="2">2</button><button data-s="3">3</button><button data-s="4">4</button></div>
+ <button class="nx" id="lp4-next">Next ›</button>
+ </div>
+ </div>
<div class="frame">
- <div class="chrome"><i></i><i></i><i></i><span class="url" id="url">/app/Company</span></div>
- <div class="screen" id="screen"></div>
+ <div class="chrome"><i></i><i></i><i></i><span class="url" id="lp4-url">demo-2.ai-putty.com/Home</span><span class="pill" id="lp4-pill">draft · only you</span></div>
+ <div class="bc" id="lp4-bc">
+ <div class="home" id="lp4-home"><div class="top"><b>Home</b><span>demo-2 · your project</span></div><div id="lp4-hb"></div></div>
+ <div class="pc hero"><h3>Corner Shop</h3><p>Coffee, tea and things for the kitchen</p><nav><span class="on">Shop</span><span>Orders</span><span>Customers</span></nav></div>
+ <div class="body">
+ <div class="pc card"><h5>Running low</h5><div class="wrapx"><table class="t"><tr><th>Product</th><th>Stock</th><th>Supplier</th></tr>
+ <tr><td>Pour-over cone</td><td class="n">2</td><td>Hill Pottery · 14 d</td></tr>
+ <tr><td>Swiss-water decaf</td><td class="n">3</td><td>Roastworks · 5 d</td></tr>
+ <tr><td>Earl Grey 100 g</td><td class="n">4</td><td>Leaf House · 10 d</td></tr></table></div></div>
+ <div class="pc card"><h5>Products</h5><div class="wrapx"><table class="t"><tr><th>Product</th><th>Category</th><th>Price</th><th>Stock</th></tr>
+ <tr><td>House espresso beans</td><td>Coffee</td><td class="n">28.00</td><td class="n">12</td></tr>
+ <tr id="lp4-tea"><td>Sencha green tea</td><td>Tea</td><td class="n">11.00</td><td class="n" id="lp4-tea-n">20</td></tr>
+ <tr id="lp4-bis"><td>Almond biscotti</td><td>Snacks</td><td class="n">7.50</td><td class="n" id="lp4-bis-n">25</td></tr>
+ <tr><td>Blue stoneware mug</td><td>Kitchen</td><td class="n">18.00</td><td class="n">9</td></tr></table></div></div>
+ </div>
+ <div class="scr" id="lp4-dm"><div class="top"><b>Product</b><span>its links · live</span></div>
+ <div class="tabs"><span class="on">Graph</span></div>
+ <svg class="dm" viewBox="0 0 640 260" role="img" aria-label="Product and the classes it links to: Category, Supplier, and OrderLine pointing to it"><line class="ln" x1="320" y1="130" x2="320" y2="38" stroke-dasharray="6 4"/><g class="cl"><rect x="280" y="26" width="81" height="24" rx="7"/><text x="320" y="42" text-anchor="middle">Category</text></g><line class="ln" x1="320" y1="130" x2="471" y2="176" stroke-dasharray="6 4"/><g class="cl"><rect x="431" y="164" width="81" height="24" rx="7"/><text x="471" y="180" text-anchor="middle">Supplier</text></g><line class="ln" x1="320" y1="130" x2="169" y2="176" stroke-dasharray="6 4"/><g class="cl"><rect x="117" y="164" width="104" height="24" rx="7"/><text x="169" y="180" text-anchor="middle">OrderLine ←</text></g><g class="cl k"><rect x="276" y="115" width="88" height="30" rx="8" style="stroke-width:2"/><text x="320" y="135" text-anchor="middle" style="font-size:14px;fill:var(--b-acc)">Product</text></g></svg>
+ <p class="tiny" style="margin:6px 2px 0">Dashed = a reference · ← points here. Tap a class to go to it.</p>
+ </div>
+ <div class="scr" id="lp4-dx"><div class="top"><b>Data</b><span>live objects · tap one to edit</span></div>
+ <div class="dx"><div class="cls"><div><span>Category</span><span>5</span></div><div><span>Supplier</span><span>4</span></div><div class="on"><span>Product</span><span>7</span></div><div><span>Customer</span><span>3</span></div><div><span>Order</span><span>3</span></div></div>
+ <div class="wrapx"><table class="t"><tr><th>SKU</th><th>Name</th><th>Price</th><th>Stock</th><th></th></tr>
+ <tr><td>coffee-beans</td><td>House espresso beans</td><td class="n">28.00</td><td class="n">12</td><td></td></tr>
+ <tr><td>coffee-decaf</td><td>Swiss-water decaf</td><td class="n">16.50</td><td class="n">3</td><td><span class="low">low</span></td></tr>
+ <tr><td>tea-green</td><td>Sencha green tea</td><td class="n">11.00</td><td class="n">18</td><td></td></tr>
+ <tr><td>tea-earl</td><td>Earl Grey 100 g</td><td class="n">9.50</td><td class="n">4</td><td><span class="low">low</span></td></tr>
+ <tr><td>mug-blue</td><td>Blue stoneware mug</td><td class="n">18.00</td><td class="n">9</td><td></td></tr>
+ <tr><td>pour-over</td><td>Pour-over cone</td><td class="n">32.00</td><td class="n">2</td><td><span class="low">low</span></td></tr>
+ <tr><td>biscotti</td><td>Almond biscotti</td><td class="n">7.50</td><td class="n">24</td><td></td></tr></table></div></div>
+ </div>
+ <div class="ribbon" id="lp4-ribbon">● Mind Meld on</div>
+ </div>
</div>
- <p class="hint">Generated from the model. No screens were designed for this.</p>
</div>
</div>
<div class="wrap minis">
- <div><strong>Model</strong>Classes, keys and references, drafted with AI, editable as text or as a diagram.</div>
- <div><strong>Run</strong>Lists, object pages, maps and editors, live from the model, no build step.</div>
- <div><strong>Orchestrate</strong>Sequential rules for the everyday, flows for parallel steps, streams when you need them.</div>
+ <div><strong>Describe</strong>Say what your app is about. Your AI writes the model and the pages.</div>
+ <div><strong>Use it</strong>Real data, real rules: pay an order and the stock goes down.</div>
+ <div><strong>Look underneath</strong>With Mind Meld on, your AI shows you the model and the data, live.</div>
</div>
</section>
+<script>
+(function(){
+ var tk=document.getElementById('lp4-tk'), bc=document.getElementById('lp4-bc'), pcs=bc.querySelectorAll('.pc'),
+ url=document.getElementById('lp4-url'), pill=document.getElementById('lp4-pill'), rib=document.getElementById('lp4-ribbon'),
+ dots=document.querySelectorAll('#lp4-dots button'), nx=document.getElementById('lp4-next'),
+ home=document.getElementById('lp4-home'), hb=document.getElementById('lp4-hb'), dm=document.getElementById('lp4-dm'), dx=document.getElementById('lp4-dx');
+ var S=[null,
+ {me:'Make me a shop app: products in categories, with price and stock, my suppliers, customers, and their orders. When an order is paid, take it off stock, and show me what\u2019s running low.', ai:'Done: your shop\u2019s model, sample products and orders, and a Shop page. Tap the Shop tile on your home page.'},
+ {me:'Omar just paid his order.', ai:'Marked paid. Two green teas and a biscotti came off stock.'},
+ {me:'Turn on Mind Meld and show me the data model.', ai:'Mind Meld is on. Here\u2019s Product in your model, and what it links to.'},
+ {me:'Show me the data.', ai:'Here it is, class by class. Products is open.'}];
+ var mic=document.getElementById('lp4-mic'), ml=document.getElementById('lp4-ml');
+ function talk(on){ if(!mic) return; mic.classList.toggle('on',on); ml.textContent=on?'Listening\u2026':'Tap to talk'; }
+ var cur=0, timers=[];
+ function later(f,ms){timers.push(setTimeout(f,ms));}
+ function bub(c,t){var d=document.createElement('div');d.className='b '+c;d.textContent=t;tk.appendChild(d);tk.scrollTop=tk.scrollHeight;}
+ var NONE='<div class="none"><b>No apps here yet.</b>Ask your AI for one.</div>';
+ var TILE='<div class="grid"><div class="tile" id="lp4-tile"><div class="t">Shop</div><div class="m">new · just now</div></div></div>';
+ function chrome(where,meld){ url.textContent='demo-2.ai-putty.com/'+where; pill.textContent=meld?'Mind Meld on':'draft · only you'; pill.classList.toggle('meld',!!meld); rib.classList.toggle('in',!!meld); }
+ function stock(paid){ var t=document.getElementById('lp4-tea-n'), b=document.getElementById('lp4-bis-n');
+ t.textContent=paid?'18':'20'; b.textContent=paid?'24':'25';
+ ['lp4-tea','lp4-bis'].forEach(function(id){var r=document.getElementById(id); r.classList.remove('chg'); if(paid){void r.offsetWidth; r.classList.add('chg');}}); }
+ function screens(s){ dm.classList.toggle('in',s===3); dx.classList.toggle('in',s>=4); }
+ function page(s,grow){
+ if(s<1){ hb.innerHTML=NONE; home.classList.remove('away'); pcs.forEach(function(p){p.classList.remove('in');}); stock(false); screens(0); chrome('Home'); return; }
+ screens(s);
+ if(s===3){ chrome('domain/cat/Product',true); return; }
+ if(s>=4){ chrome('dom/Product',true); return; }
+ stock(s>=2);
+ if(!grow){ home.classList.add('away'); pcs.forEach(function(p){p.classList.add('in');}); chrome('Shop'); return; }
+ pcs.forEach(function(p){p.classList.remove('in');}); home.classList.remove('away'); hb.innerHTML=TILE; chrome('Home');
+ later(function(){var t=document.getElementById('lp4-tile'); if(t) t.classList.add('tap');},2600);
+ later(function(){home.classList.add('away'); chrome('Shop');
+ pcs.forEach(function(p,i){ later(function(){p.classList.add('in');},300+i*650); });},3000);
+ }
+ function mark(s){dots.forEach(function(b){b.classList.toggle('on',+b.getAttribute('data-s')===s);}); nx.textContent=s>=4?'Again \u21ba':'Next \u203a';}
+ function go(s,anim){
+ talk(false); timers.forEach(clearTimeout); timers=[]; cur=s; tk.innerHTML=''; mark(s);
+ if(s===0){var t=document.createElement('div');t.className='typing';t.textContent='A new creator project. Say what you need.';tk.appendChild(t);page(0);return;}
+ for(var i=1;i<s;i++){bub('me',S[i].me);bub('ai',S[i].ai);}
+ if(s>=2){ home.classList.add('away'); pcs.forEach(function(p){p.classList.add('in');}); }
+ page(s-1,false);
+ if(!anim){bub('me',S[s].me);bub('ai',S[s].ai);page(s,false);return;}
+ talk(true); bub('me',S[s].me);
+ later(function(){talk(false);},2800);
+ var w=document.createElement('div');w.className='typing';w.textContent='working…';
+ later(function(){tk.appendChild(w);},3300);
+ later(function(){w.remove();bub('ai',S[s].ai);page(s,s===1);},4800);
+ }
+ var auto=[];
+ function stopAuto(){auto.forEach(clearTimeout);auto=[];}
+ function play(){ stopAuto(); go(0); [[1,2500],[2,16500],[3,27500],[4,38500]].forEach(function(x){ auto.push(setTimeout(function(){ go(x[0],true); },x[1])); }); }
+ dots.forEach(function(b){b.addEventListener('click',function(){stopAuto();go(+b.getAttribute('data-s'),true);});});
+ nx.addEventListener('click',function(){ if(cur>=4) play(); else {stopAuto();go(cur+1,true);} });
+ document.getElementById('lp4-replay').addEventListener('click',play);
+ play();
+})();
+</script>

<section class="door t1" id="pro">
…
version 3diff 2026-10-03 14:35 UTC · razie · in person View Text

What version 4 changed
…
<div>
<div class="stat"><span class="big">3 sentences</span><span class="small">From an empty project to a live app. That's the bar.</span></div>
- <div class="doors"><a class="btn" href="#hero" aria-disabled="true">Start an app</a><a class="btn ghost" href="#hero" onclick="return false" id="lp3-replay">Watch it again</a></div><div class="soon">Opening soon.</div>
+ <div class="doors"><a class="btn" href="/signup?next=/home">Start an app</a><a class="btn ghost" href="#hero" onclick="return false" id="lp3-replay">Watch it again</a></div>
</div>
</div>
…
version 2diff 2026-10-03 14:25 UTC · razie · in person View Text

What version 3 changed
…

<style>
+#lp .t6 .mic, .t6 .mic{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
+.t6 .mic .mb{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--soft);transition:all .3s}
+.t6 .mic .mb svg{width:18px;height:18px}
+.t6 .mic.on .mb{background:#e5484d;border-color:#e5484d;color:#fff;box-shadow:0 0 0 0 rgba(229,72,77,.5);animation:micpulse 1.2s ease-out infinite}
+.t6 .mic .wave{flex:1;display:flex;align-items:center;gap:3px;height:28px;overflow:hidden}
+.t6 .mic .wave i{flex:1;max-width:5px;height:4px;border-radius:3px;background:var(--line);transition:background .3s}
+.t6 .mic.on .wave i{background:var(--indigo);animation:micbar .9s ease-in-out infinite}
+.t6 .mic .ml{flex:none;font:600 12px var(--body);color:var(--soft);min-width:72px;text-align:right}
+@keyframes micbar{0%,100%{height:4px}50%{height:var(--h,22px)}}
+@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}100%{box-shadow:0 0 0 10px rgba(229,72,77,0)}}
+@media (prefers-reduced-motion: reduce){.t6 .mic.on .wave i{animation:none;height:14px}}
+
.t6 .intro{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,3vw,40px);align-items:end;margin-bottom:18px}
.t6 .split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;align-items:stretch}
…
<div class="hd">You and your AI</div>
<div class="tk" id="lp3-tk" aria-live="polite"></div>
+ <div class="mic" id="lp3-mic" aria-hidden="true"><span class="mb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><div class="wave"><i style="--h:10px;animation-delay:-0.00s"></i><i style="--h:18px;animation-delay:-0.07s"></i><i style="--h:26px;animation-delay:-0.14s"></i><i style="--h:14px;animation-delay:-0.21s"></i><i style="--h:22px;animation-delay:-0.28s"></i><i style="--h:28px;animation-delay:-0.35s"></i><i style="--h:12px;animation-delay:-0.42s"></i><i style="--h:20px;animation-delay:-0.49s"></i><i style="--h:26px;animation-delay:-0.56s"></i><i style="--h:16px;animation-delay:-0.63s"></i><i style="--h:24px;animation-delay:-0.70s"></i><i style="--h:10px;animation-delay:-0.77s"></i><i style="--h:18px;animation-delay:-0.84s"></i><i style="--h:22px;animation-delay:-0.91s"></i><i style="--h:14px;animation-delay:-0.98s"></i><i style="--h:26px;animation-delay:-1.05s"></i><i style="--h:12px;animation-delay:-1.12s"></i><i style="--h:20px;animation-delay:-1.19s"></i></div><span class="ml" id="lp3-ml">Tap to talk</span></div>
<div class="ctl">
<div class="dots" id="lp3-dots"><button data-s="0" aria-label="Start">0</button><button data-s="1" aria-label="Ask for the app">1</button><button data-s="2" aria-label="Change the colours">2</button><button data-s="3" aria-label="Publish">3</button><button data-s="4" aria-label="Add a book">4</button></div>
…
}
function mark(s){dots.forEach(function(b){b.classList.toggle('on',+b.getAttribute('data-s')===s);}); nx.textContent=s>=4?'Again ↺':'Next ›';}
+ var mic=document.getElementById('lp3-mic'), ml=document.getElementById('lp3-ml');
+ function talk(on){ if(!mic) return; mic.classList.toggle('on',on); ml.textContent=on?'Listening…':'Tap to talk'; }
function go(s,anim){
+ talk(false);
timers.forEach(clearTimeout); timers=[]; cur=s; tk.innerHTML=''; mark(s);
if(s===0){var t=document.createElement('div');t.className='typing';t.textContent='A new project. Say what you want.';tk.appendChild(t);page(0);return;}
for(var i=1;i<s;i++){bub('me',S[i].me);bub('ai',S[i].ai);}
page(s-1,false);
- bub('me',S[s].me);
- if(!anim){bub('ai',S[s].ai);page(s,false);return;}
+ if(!anim){bub('me',S[s].me);bub('ai',S[s].ai);page(s,false);return;}
+ talk(true); bub('me',S[s].me);
+ later(function(){talk(false);},2800);
var w=document.createElement('div');w.className='typing';w.textContent='working…';
- later(function(){tk.appendChild(w);},1800);
- later(function(){w.remove();bub('ai',S[s].ai);page(s,s===1);},3400);
+ later(function(){tk.appendChild(w);},3300);
+ later(function(){w.remove();bub('ai',S[s].ai);page(s,s===1);},4800);
}
var auto=[];
function stopAuto(){auto.forEach(clearTimeout);auto=[];}
- function play(){ stopAuto(); go(0); [[1,2500],[2,15500],[3,24500],[4,33500]].forEach(function(x){ auto.push(setTimeout(function(){ go(x[0],true); },x[1])); }); }
+ function play(){ stopAuto(); go(0); [[1,2500],[2,16500],[3,27500],[4,38500]].forEach(function(x){ auto.push(setTimeout(function(){ go(x[0],true); },x[1])); }); }
dots.forEach(function(b){b.addEventListener('click',function(){stopAuto();go(+b.getAttribute('data-s'),true);});});
nx.addEventListener('click',function(){ if(cur>=4) play(); else {stopAuto();go(cur+1,true);} });
…
version 1diff 2026-10-03 13:13 UTC · razie · in person View Text

What version 2 changed
…
</div>

- <header class="hero2">
- <div class="ladder" aria-label="How fast">
+ <header class="hero2" style="padding-bottom:0">
+ <div class="ladder" aria-label="How fast" style="margin-bottom:8px">
<p class="sub">Your AI builds working apps, with their data. You pick how fast. Start below to learn, play or work.</p>
<div class="rungs">
…
</div>
</div>
- <h1>Imagine it. Model it. Use it live.</h1>
- <p class="lede">Say what you want to keep track of. Diesel turns it into a model, and the model is already a working app, with your data in it.</p>
- <ol class="steps">
- <li class="step s1">
- <span class="num">1</span><h3>Imagine</h3>
- <div class="card imag">
- <div class="bub me">I run a small coffee-gear shop: my products, my customers and their orders, and what's in stock.</div>
- <div class="bub ai">Got it. A customer places orders, each order lists products, and every product has stock in a warehouse.</div>
- </div>
- <p class="cap">In your own words, or talking it through with AI.</p>
- </li>
- <li class="step s2">
- <span class="num">2</span><h3>Model</h3>
- <div class="card model"><span class="aitag">✦ drafted by AI</span>
- <svg viewBox="0 0 420 270" role="img" aria-label="Model: a Customer places Orders, each Order lists Products, a Product has Stock">
- <path class="edge" d="M150 55 H250"/><text class="elabel" x="168" y="47">places *</text>
- <path class="edge" d="M320 82 V165"/><text class="elabel" x="328" y="128">lines *</text>
- <path class="edge" d="M250 195 H150"/><text class="elabel" x="176" y="187">stock *</text>
- <g class="box"><rect x="20" y="25" width="130" height="62" rx="14"/><text x="36" y="51">Customer</text><text class="attr" x="36" y="72">name, email</text></g>
- <g class="box"><rect x="250" y="25" width="150" height="62" rx="14"/><text x="266" y="51">Order</text><text class="attr" x="266" y="72">status, total</text></g>
- <g class="box"><rect x="250" y="165" width="150" height="62" rx="14"/><text x="266" y="191">Product</text><text class="attr" x="266" y="212">name, price</text></g>
- <g class="box"><rect x="20" y="165" width="130" height="62" rx="14"/><text x="36" y="191">Stock</text><text class="attr" x="36" y="212">qty, warehouse</text></g>
- </svg>
- </div>
- <p class="cap">Drafted by AI from what you said: the things you track and how they link. Change it by talking, or by hand.</p>
- </li>
- <li class="step s3">
- <span class="num">3</span><h3>Create live</h3>
- <div class="card note">
- <h4>Grindstone Coffee Gear</h4>
- <div class="when">Updated 2 minutes ago</div>
- <div class="rows">
- <div class="row"><b>Order o-1004 · Ana Souza</b><span class="up">$58</span><span class="pill">placed</span></div>
- <div class="row"><b>Harbour French press 0.5 l</b><span class="down">3 left</span><span class="pill">reorder from Coastal</span></div>
- <div class="row"><b>Ridge electric grinder</b><span class="up">+3 today</span><span class="pill">4 in stock</span></div>
- </div>
- </div>
- <p class="cap">A working app, right away. No code, no screens to design.</p>
- </li>
- </ol>
- <div class="doors">
- <a class="btn tier" href="#hero">Hero<small>your own app</small></a>
- <a class="btn ghost tier" href="#creator">Creator<small>model and build</small></a>
- <a class="btn ghost tier" href="#pro">Pro<small>prototype at scale</small></a>
- </div>
</header>
</div>
…
</script>

+
+<div class="wrap">
+ <header class="hero2">
+ <h1>Imagine it. Model it. Use it live.</h1>
+ <p class="lede">Say what you want to keep track of. Diesel turns it into a model, and the model is already a working app, with your data in it.</p>
+ <ol class="steps">
+ <li class="step s1">
+ <span class="num">1</span><h3>Imagine</h3>
+ <div class="card imag">
+ <div class="bub me">I run a small coffee-gear shop: my products, my customers and their orders, and what's in stock.</div>
+ <div class="bub ai">Got it. A customer places orders, each order lists products, and every product has stock in a warehouse.</div>
+ </div>
+ <p class="cap">In your own words, or talking it through with AI.</p>
+ </li>
+ <li class="step s2">
+ <span class="num">2</span><h3>Model</h3>
+ <div class="card model"><span class="aitag">✦ drafted by AI</span>
+ <svg viewBox="0 0 420 270" role="img" aria-label="Model: a Customer places Orders, each Order lists Products, a Product has Stock">
+ <path class="edge" d="M150 55 H250"/><text class="elabel" x="168" y="47">places *</text>
+ <path class="edge" d="M320 82 V165"/><text class="elabel" x="328" y="128">lines *</text>
+ <path class="edge" d="M250 195 H150"/><text class="elabel" x="176" y="187">stock *</text>
+ <g class="box"><rect x="20" y="25" width="130" height="62" rx="14"/><text x="36" y="51">Customer</text><text class="attr" x="36" y="72">name, email</text></g>
+ <g class="box"><rect x="250" y="25" width="150" height="62" rx="14"/><text x="266" y="51">Order</text><text class="attr" x="266" y="72">status, total</text></g>
+ <g class="box"><rect x="250" y="165" width="150" height="62" rx="14"/><text x="266" y="191">Product</text><text class="attr" x="266" y="212">name, price</text></g>
+ <g class="box"><rect x="20" y="165" width="130" height="62" rx="14"/><text x="36" y="191">Stock</text><text class="attr" x="36" y="212">qty, warehouse</text></g>
+ </svg>
+ </div>
+ <p class="cap">Drafted by AI from what you said: the things you track and how they link. Change it by talking, or by hand.</p>
+ </li>
+ <li class="step s3">
+ <span class="num">3</span><h3>Create live</h3>
+ <div class="card note">
+ <h4>Grindstone Coffee Gear</h4>
+ <div class="when">Updated 2 minutes ago</div>
+ <div class="rows">
+ <div class="row"><b>Order o-1004 · Ana Souza</b><span class="up">$58</span><span class="pill">placed</span></div>
+ <div class="row"><b>Harbour French press 0.5 l</b><span class="down">3 left</span><span class="pill">reorder from Coastal</span></div>
+ <div class="row"><b>Ridge electric grinder</b><span class="up">+3 today</span><span class="pill">4 in stock</span></div>
+ </div>
+ </div>
+ <p class="cap">A working app, right away. No code, no screens to design.</p>
+ </li>
+ </ol>
+ <div class="doors">
+ <a class="btn tier" href="#hero">Hero<small>your own app</small></a>
+ <a class="btn ghost tier" href="#creator">Creator<small>model and build</small></a>
+ <a class="btn ghost tier" href="#pro">Pro<small>prototype at scale</small></a>
+ </div>
+ </header>
+</div>
+
<section class="door t3" id="creator">
<div class="wrap grid">
…