---
layout: full
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Diesel: one engine, three doors</title>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{
--paper:#f4f7fb; --card:#ffffff; --ink:#1c2340; --soft:#5b6380; --line:#dfe5ef;
--sun:#f2b84b; --leaf:#2f9a6f; --indigo:#5550d8; --slate:#4e6a86; --attn:#7a7fc9;
--sun-bg:#fff6e0; --indigo-bg:#eeedff; --slate-bg:#e9f0f6;
--display:'Bricolage Grotesque',system-ui,sans-serif;
--body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
:root{
--paper:#141a2b; --card:#1c2338; --ink:#eef1fa; --soft:#a4acc6; --line:#2c3552;
--sun-bg:#2e2816; --indigo-bg:#24234a; --slate-bg:#1e2a38;
--indigo:#8d88ff; --slate:#8fb0cf; --leaf:#4cc392; --attn:#9296f5;
}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;
padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}
/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.mark svg{width:30px;height:30px}
.mark svg.wm{width:auto;height:30px}
@keyframes d2blink{50%{opacity:0}}.d2cur{animation:d2blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.d2cur{animation:none}}
.bar nav{display:flex;gap:4px;flex-wrap:wrap}
.bar nav a{text-decoration:none;color:var(--soft);padding:6px 10px;border-radius:999px;font-size:15px}
.bar nav a:hover{color:var(--ink);background:var(--card)}
.bar nav a.btn.login{color:var(--paper,#fff);padding:6px 16px;font-size:15px;margin-left:6px}
.bar nav a.btn.login:hover{color:var(--paper,#fff);background:var(--ink)}
.bar nav a.btn.signup{background:transparent;color:var(--ink);padding:6px 16px;font-size:15px;box-shadow:inset 0 0 0 2px var(--line)}
.bar nav a.btn.signup:hover{box-shadow:inset 0 0 0 2px var(--ink)}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(20px,5vw,56px) 0 clamp(40px,6vw,72px)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,52px);line-height:1.02;letter-spacing:-.025em;margin:0 0 18px;min-height:3.1em}
.hero p.lede{font-size:19px;color:var(--soft);max-width:34em;margin:0 0 26px;min-height:4.8em}
.swap{transition:opacity .25s ease}
.swap.fade{opacity:0}
.doors{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:600 16px var(--body);
padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.btn.tier{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}.btn.tier small{font-size:12px;font-weight:600;opacity:.75;margin-top:2px}
/* the three-lens card: the one bold element */
.lens{background:var(--card);border-radius:26px;padding:14px;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(28,35,64,.35);position:relative}
.lens .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--paper);border-radius:16px;padding:5px} /* scoped: the Master section has its own .tabs (P-131) */
.tab{border:0;background:transparent;border-radius:12px;padding:9px 6px;font:600 15px var(--body);color:var(--soft);cursor:pointer}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(28,35,64,.14)}
.tab .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}
.view{padding:18px 10px 8px;min-height:292px}
.view[hidden]{display:none}
.caption{font-size:14px;color:var(--soft);margin:12px 4px 2px}
/* notebook view */
.note h3{font-family:var(--display);font-size:22px;margin:0 0 4px}
.note .when{font-size:14px;color:var(--soft);margin-bottom:12px}
.note p{margin:0 0 12px;font-size:16px}
.rows{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 4.2em auto;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);font-size:15px}
.row:first-child{border-top:0}
.row b{font-weight:700}
.row .up,.row .down{text-align:right}
.up{color:var(--leaf);font-weight:700}
.down{color:#d0506a;font-weight:700}
.pill{font-size:13px;padding:3px 9px;border-radius:999px;background:var(--sun-bg);white-space:nowrap}
/* model view */
.model svg{width:100%;height:auto;display:block}
.model .box rect{fill:var(--indigo-bg);stroke:var(--indigo);stroke-width:2}
.model .box text{fill:var(--ink);font:600 15px var(--body)}
.model .box .attr{font:400 12px var(--mono);fill:var(--soft)}
.model .edge{stroke:var(--indigo);stroke-width:2;fill:none}
.model .elabel{font:400 12px var(--mono);fill:var(--indigo)}
/* source view */
pre.src{margin:0;background:var(--slate-bg);border-radius:16px;padding:16px;overflow-x:auto;font:400 13.5px/1.6 var(--mono);color:var(--ink)}
.src .k{color:var(--slate);font-weight:600}
.src .c{color:var(--soft)}
.src .s{color:var(--leaf)}
/* door sections */
section.door{padding:clamp(36px,6vw,64px) 0;border-top:1px solid var(--line)}
.door .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,48px);align-items:start}
.door h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.8vw,42px);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px}
.door .who{font-size:16px;color:var(--soft);margin:0 0 6px}
.door p{max-width:36em}
.badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.t2 .badge{background:var(--sun-bg)}
.t3 .badge{background:var(--indigo-bg);color:var(--indigo)}
.t1 .badge{background:var(--slate-bg);color:var(--slate)}
.verbs{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.verbs li{background:var(--card);border-radius:18px;padding:16px 18px;border:1px solid var(--line)}
.verbs li strong{display:block;font-family:var(--display);font-size:21px;margin-bottom:2px}
.t2 .verbs li strong{color:#b27a0e}
@media (prefers-color-scheme: dark){ .t2 .verbs li strong{color:var(--sun)} }
.t3 .verbs li strong{color:var(--indigo)}
.t1 .verbs li strong{color:var(--slate)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:15px}
.soon{font-size:14px;color:var(--soft);margin-top:10px}
.stat{display:flex;align-items:baseline;gap:14px;margin:18px 0 22px;flex-wrap:wrap}
.stat .big{font-family:var(--display);font-weight:800;font-size:48px;line-height:1;color:var(--indigo)}
.stat .small{color:var(--soft);max-width:18em}
/* modeller stage: tap a class, see the screens it already has */
.stage{background:var(--card);border-radius:22px;border:1px solid var(--line);padding:14px;overflow:hidden}
.stage svg.mini{width:100%;height:auto;display:block}
.stage .node{cursor:pointer}
.stage .node rect{fill:var(--indigo-bg);stroke:var(--indigo);stroke-width:2;transition:fill .2s}
.stage .node text{fill:var(--ink);font:600 14px var(--body);pointer-events:none}
.stage .node.on rect{fill:var(--indigo)}
.stage .node.on text{fill:#fff}
.stage .node:focus{outline:none}
.stage .node:focus-visible rect{stroke-width:4}
.stage .link{stroke:var(--indigo);stroke-width:2;stroke-dasharray:5 5;fill:none}
.stage .ltxt{font:400 11px var(--mono);fill:var(--soft)}
.frame{margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.frame .chrome{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--card)}
.frame .chrome i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.frame .chrome .url{margin-left:8px;font:400 12px var(--mono);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen{padding:12px;min-height:208px}
.screen h4{margin:0 0 8px;font-family:var(--display);font-size:18px;display:flex;justify-content:space-between;align-items:center}
.screen h4 small{font:400 12px var(--body);color:var(--soft)}
.tools{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tools span{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.tools span.act{border-color:var(--indigo);color:var(--indigo)}
.gl{display:grid;gap:4px}
.gr{display:grid;grid-template-columns:1.4fr 1fr auto;gap:8px;align-items:center;background:var(--card);border-radius:10px;padding:7px 10px;font-size:14px}
.ref{font:400 12px var(--mono);color:var(--indigo);background:var(--indigo-bg);padding:2px 7px;border-radius:6px;justify-self:start}
.stg{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--sun-bg)}
.map{position:relative;height:150px;border-radius:10px;background:
radial-gradient(circle at 30% 40%, rgba(47,154,111,.18) 0 22%, transparent 23%),
radial-gradient(circle at 70% 60%, rgba(47,154,111,.14) 0 26%, transparent 27%),
var(--slate-bg);margin-bottom:6px}
.map b{position:absolute;width:14px;height:14px;border-radius:50%;border:3px solid var(--card);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.map em{position:absolute;font:600 11px var(--body);font-style:normal;background:var(--card);padding:1px 6px;border-radius:6px;transform:translate(10px,-4px)}
.stage .hint{font-size:14px;color:var(--soft);margin:10px 2px 0}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.minis div{font-size:15px}
.minis strong{display:block;font-family:var(--display);font-size:19px;color:var(--indigo)}
@media (max-width:820px){ .minis{grid-template-columns:1fr} }
/* notebook stage */
.nstage{background:var(--card);border-radius:22px;border:1px solid var(--line);padding:14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--sun-bg);border-radius:14px;padding:5px}
.seg button{border:0;background:transparent;border-radius:10px;padding:8px 4px;font:600 15px var(--body);color:var(--soft);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(28,35,64,.14)}
.scene{min-height:300px;padding:14px 4px 4px}
.bub{max-width:82%;padding:9px 13px;border-radius:16px;margin:0 0 8px;font-size:15px}
.bub.me{margin-left:auto;background:var(--ink);color:var(--paper);border-bottom-right-radius:5px}
.bub.ai{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px}
.saved{display:flex;gap:10px;align-items:center;margin-top:12px;background:var(--sun-bg);border-radius:14px;padding:10px 12px;font-size:15px}
.saved .ic{width:30px;height:30px;border-radius:9px;background:var(--sun);display:grid;place-items:center;font-weight:800;color:#1c2340;flex:none}
.saved small{display:block;color:var(--soft);font-size:13px}
.web{position:relative;height:280px}
.web svg{position:absolute;inset:0;width:100%;height:100%}
.web svg path{vector-effect:non-scaling-stroke;stroke:var(--sun);stroke-width:2.5;fill:none;stroke-linecap:round}
.web .n{position:absolute;transform:translate(-50%,-50%);background:var(--card);border:2px solid var(--line);border-radius:14px;padding:7px 11px;font-size:14px;white-space:nowrap;box-shadow:0 2px 6px rgba(28,35,64,.08)}
.web .n small{display:block;color:var(--soft);font-size:12px}
.web .n.hub{border-color:var(--sun);background:var(--sun-bg);font-weight:700}
.live{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}
.live h5{margin:0;font-family:var(--display);font-size:19px}
.live .sub{font-size:13px;color:var(--soft);margin-bottom:8px}
.live .px{display:flex;align-items:baseline;gap:10px;margin:4px 0}
.live .px b{font-family:var(--display);font-size:32px}
.live svg{width:100%;height:70px;display:block}
.live svg path{stroke:var(--leaf);stroke-width:2.5;fill:none}
.toast{display:flex;gap:10px;align-items:flex-start;margin-top:12px;background:var(--card);border:2px solid var(--sun);border-radius:14px;padding:10px 12px;font-size:15px}
.toast .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-weight:800;color:#1c2340}
.ticker{margin-top:10px}
.pop{animation:pop .35s ease}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){ .pop{animation:none} }
.t2 .minis strong{color:#b27a0e}
@media (prefers-color-scheme: dark){ .t2 .minis strong{color:var(--sun)} }
/* obsidian band */
.obs{padding:clamp(36px,6vw,64px) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--paper),var(--card))}
.obs .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,4vw,48px);align-items:center}
.obs h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,38px);line-height:1.08;letter-spacing:-.02em;margin:0 0 12px}
.obs .badge{background:#efe9ff;color:#6b4fd8}
@media (prefers-color-scheme: dark){ .obs .badge{background:#2c2550;color:#b9a8ff} }
.facts{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:8px}
.facts li{padding-left:28px;position:relative}
.facts li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:12px;border-radius:4px;background:var(--sun)}
.sync{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.pane{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;font-size:14px;min-width:0}
.pane h6{margin:0 0 8px;font:700 13px var(--body);color:var(--soft)}
.tree{font:400 13px/1.8 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree .hl{background:var(--sun-bg);border-radius:6px;padding:1px 5px;font-weight:600}
.pg h5{margin:0 0 4px;font-family:var(--display);font-size:17px}
.pg p{margin:0 0 8px;color:var(--soft);font-size:13px}
.pg .bar2{height:8px;border-radius:4px;background:var(--line);margin:6px 0}
.pg .bar2.s{width:70%}
.pg .bar2.t{width:45%}
.arrows{display:grid;gap:6px;justify-items:center;color:var(--ink)}
.arrows svg{width:44px;height:22px}
.arrows small{font-size:12px;color:var(--soft)}
@media (max-width:820px){ .obs .grid{grid-template-columns:1fr} }
@media (max-width:480px){ .sync{grid-template-columns:1fr} .arrows{transform:rotate(90deg);margin:4px 0} .arrows small{display:none} }
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--soft);font-size:15px}
footer a{color:var(--ink)}
@media (max-width:820px){
.hero,.door .grid{grid-template-columns:1fr}
.hero h1{min-height:0}
.hero p.lede{min-height:0}
}
@media (prefers-reduced-motion: reduce){ .swap{transition:none} html{scroll-behavior:auto} }
/* hero2: imagine, model, create live */
.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)}
.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}
.hero2 p.lede{font-size:19px;color:var(--soft);max-width:36em;margin:0 0 clamp(36px,6vw,64px)}
.steps{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px)}
.step{position:relative;display:flex;flex-direction:column}
.step .num{position:absolute;top:-2px;left:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--display);color:#1c2340}
.s1 .num{background:var(--sun)} .s2 .num{background:var(--indigo);color:#fff} .s3 .num{background:var(--leaf);color:#fff}
.step h3{font-family:var(--display);font-weight:800;font-size:24px;margin:0 0 12px;padding-left:40px;line-height:30px}
.step .card{flex:1;background:var(--card);border-radius:22px;padding:16px;box-shadow:0 1px 0 var(--line),0 18px 40px -26px rgba(28,35,64,.35)}
.step .cap{font-size:14px;color:var(--soft);margin:10px 4px 0}
.step:not(:last-child)::after{content:"";position:absolute;top:13px;right:calc(-1 * clamp(12px,2vw,22px) + 2px);width:clamp(8px,1.4vw,16px);height:2px;background:var(--line)}
.say{max-width:600px;margin:16px 0 6px;padding:12px 16px;border-radius:16px;border-bottom-right-radius:5px;background:var(--sun-bg);color:var(--ink);font-size:17px;line-height:1.45}
.say::before{content:"You: ";font-weight:700}.saycap{color:var(--soft);font-size:15px;margin-top:4px}
.imag{display:flex;flex-direction:column;gap:10px;justify-content:center}
.imag .bub{border-radius:16px;padding:10px 13px;font-size:15px;max-width:92%}
.imag .bub.me{align-self:flex-end;background:var(--sun-bg);color:var(--ink)}
.imag .bub.ai{align-self:flex-start;background:var(--paper)}
.card.note h4{font-family:var(--display);font-size:20px;margin:0 0 2px}
.card.note .row{grid-template-columns:1fr auto;font-size:14px}
.card.note .row .pill{grid-column:1 / -1;justify-self:start}
.card.model{position:relative;padding-top:40px}
.aitag{position:absolute;top:10px;right:12px;font-size:12.5px;font-weight:700;color:var(--indigo);background:var(--indigo-bg);border-radius:999px;padding:3px 10px}
@media (max-width:820px){ .steps{grid-template-columns:1fr} .step:not(:last-child)::after{display:none} }
.t1 .minis strong{color:var(--slate)}
section.extras{padding:clamp(40px,6vw,72px) 0 0;border-top:6px solid var(--line)}
section.extras h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,36px);margin:0 0 4px}
section.extras p{color:var(--soft);margin:0}
section.door.extra{border-top:0}
/* hero door app mockups */
.chips.pick .chip{font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.chips.pick .chip:hover{border-color:var(--ink)}
.chips.pick .chip[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:#1c2340;font-weight:700}
.hs{min-height:260px;font-size:14px}
.hs .kpi{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.hs .kpi b{font:800 26px var(--display)}
.hs .muted{color:var(--soft);font-size:12.5px}
.hs .alloc{display:flex;height:10px;border-radius:999px;overflow:hidden;margin:0 0 6px}
.hs .legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--soft);margin-bottom:10px}
.hs .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.hs .gr{grid-template-columns:1fr auto auto}
.hs .dn{color:var(--rose,#c8435f);font-weight:700}
.hs .news{margin-top:10px;display:grid;gap:5px}.hs .nw{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.hs .bars{display:grid;gap:9px}
.hs .bar3 .lab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:3px}
.hs .bar3 .trk{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.hs .bar3 .fil{height:100%;border-radius:999px;background:var(--leaf)}
.hs .bar3.over .fil{background:var(--rose,#c8435f)}
.hs .note2{margin-top:10px;background:var(--sun-bg);border-radius:10px;padding:8px 10px;font-size:13px}
.hs .trails{position:relative;height:118px;border-radius:10px;background:var(--slate-bg);overflow:hidden;margin-bottom:8px}
.hs .trails svg{width:100%;height:100%;display:block}
.hs .tag{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);white-space:nowrap}
.hs .tag.ok{color:var(--leaf);border-color:var(--leaf)}
.hs .tag.warn{color:#b27a0e;border-color:#e3b04f}
.hs .beds{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.hs .beds div{background:var(--card);border-radius:8px;padding:6px 4px;text-align:center;font-size:18px;line-height:1.1}
.hs .beds small{display:block;font-size:10.5px;color:var(--soft)}
.hs .beds .dry{box-shadow:inset 0 0 0 2px #e3b04f}
.hs .coins{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.hs .coins div{background:var(--card);border-radius:10px;padding:8px;text-align:center;font-size:12px}
.hs .coins .c{width:34px;height:34px;border-radius:50%;margin:0 auto 5px;background:radial-gradient(circle at 35% 30%,#fff,#c9ced8 45%,#8c93a3);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.hs .coins .c.au{background:radial-gradient(circle at 35% 30%,#fff3c4,#f2b84b 45%,#b27a0e)}
.hs .coins b{display:block;font-size:12.5px}
.hs .cal{display:grid;gap:5px}
.hs .ev{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:var(--card);border-radius:10px;padding:7px 10px}
.hs .ev .d{text-align:center;font:800 17px/1 var(--display)}
.hs .ev .d small{display:block;font:600 10.5px var(--body);color:var(--soft);margin-bottom:2px}
.hs .ev.you{box-shadow:inset 3px 0 0 var(--sun)}
</style>
<link rel="icon" href="/favicon.ico" sizes="48x48"><link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<style id="d2style" data-name="stylesheet-orange1">:root{--paper:#fbfaf7;--card:#ffffff;--ink:#1d1d1b;--soft:#6b6a66;--line:#e4e1da;--indigo:#9a4b12;--indigo-bg:#f5e8dc;--slate:#6b6a66;--slate-bg:#f3f1ec;--sun:#d99a2b;--sun-bg:#fbf1dc;--leaf:#3f7d4e;--rose:#b23a48;--rose-bg:#f8e6e6;--god:#7b3fb8;--god-bg:#f2eafb;--admin:#1f7a8c;--admin-bg:#e3f2f5;--attn:#7a7fc9;--display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--body:system-ui,-apple-system,'Segoe UI',sans-serif;--mono:ui-monospace,Menlo,Consolas,monospace;color-scheme:light dark}
@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>
</head>
<body>
<div class="wrap">
<div class="bar">
<a class="mark" href="/" aria-label="Diesel home"><svg class="wm" viewBox="0 0 140 36" aria-hidden="true"><path fill="var(--ink)" d="M5.18 24.2Q3.54 24.2 2.56 23.08Q1.58 21.96 1.58 20.06V16.96Q1.58 15.04 2.56 13.92Q3.54 12.8 5.18 12.8Q6.36 12.8 7.17 13.4Q7.98 14 8.22 15.08L8.16 12.54V9.4H10.32V24H8.18V21.92Q7.96 23 7.17 23.6Q6.38 24.2 5.18 24.2ZM5.94 22.32Q6.98 22.32 7.57 21.69Q8.16 21.06 8.16 19.9V17.08Q8.16 15.94 7.57 15.31Q6.98 14.68 5.94 14.68Q4.9 14.68 4.32 15.23Q3.74 15.78 3.74 16.98V20Q3.74 21.22 4.32 21.77Q4.9 22.32 5.94 22.32ZM13.62 24V22.04H17.44V14.96H14.02V13H19.6V22.04H23.14V24ZM18.34 11.1Q17.64 11.1 17.22 10.73Q16.8 10.36 16.8 9.74Q16.8 9.1 17.22 8.73Q17.64 8.36 18.34 8.36Q19.04 8.36 19.46 8.73Q19.88 9.1 19.88 9.74Q19.88 10.36 19.46 10.73Q19.04 11.1 18.34 11.1ZM30 15.96Q29.16 15.96 28.7 15.53Q28.24 15.1 28.24 14.38Q28.24 13.66 28.7 13.23Q29.16 12.8 30 12.8Q30.84 12.8 31.3 13.23Q31.76 13.66 31.76 14.38Q31.76 15.1 31.3 15.53Q30.84 15.96 30 15.96ZM30 24.2Q29.16 24.2 28.7 23.77Q28.24 23.34 28.24 22.62Q28.24 21.9 28.7 21.47Q29.16 21.04 30 21.04Q30.84 21.04 31.3 21.47Q31.76 21.9 31.76 22.62Q31.76 23.34 31.3 23.77Q30.84 24.2 30 24.2ZM42 24.2Q39.98 24.2 38.76 23.02Q37.54 21.84 37.54 19.8V17.2Q37.54 15.16 38.76 13.98Q39.98 12.8 42 12.8Q43.36 12.8 44.36 13.33Q45.36 13.86 45.91 14.82Q46.46 15.78 46.46 17.06V19.04H39.62V19.94Q39.62 21.1 40.26 21.74Q40.9 22.38 42 22.38Q42.9 22.38 43.5 22.05Q44.1 21.72 44.22 21.14H46.36Q46.14 22.54 44.95 23.37Q43.76 24.2 42 24.2ZM39.62 17.06V17.52H44.38V17.04Q44.38 15.82 43.76 15.16Q43.14 14.5 42 14.5Q40.86 14.5 40.24 15.17Q39.62 15.84 39.62 17.06ZM53.56 24.18Q51.66 24.18 50.58 23.32Q49.5 22.46 49.5 20.92H51.64Q51.64 21.62 52.14 22.01Q52.64 22.4 53.56 22.4H54.44Q55.38 22.4 55.9 22.01Q56.42 21.62 56.42 20.9Q56.42 19.64 55.08 19.46L52.18 19.06Q50.96 18.9 50.29 18.09Q49.62 17.28 49.62 15.98Q49.62 14.48 50.64 13.65Q51.66 12.82 53.52 12.82H54.42Q56.14 12.82 57.21 13.64Q58.28 14.46 58.34 15.8H56.18Q56.14 15.26 55.67 14.91Q55.2 14.56 54.42 14.56H53.52Q52.66 14.56 52.19 14.94Q51.72 15.32 51.72 15.96Q51.72 16.98 52.86 17.14L55.58 17.5Q58.52 17.9 58.52 20.88Q58.52 22.46 57.46 23.32Q56.4 24.18 54.44 24.18ZM66 15.96Q65.16 15.96 64.7 15.53Q64.24 15.1 64.24 14.38Q64.24 13.66 64.7 13.23Q65.16 12.8 66 12.8Q66.84 12.8 67.3 13.23Q67.76 13.66 67.76 14.38Q67.76 15.1 67.3 15.53Q66.84 15.96 66 15.96ZM66 24.2Q65.16 24.2 64.7 23.77Q64.24 23.34 64.24 22.62Q64.24 21.9 64.7 21.47Q65.16 21.04 66 21.04Q66.84 21.04 67.3 21.47Q67.76 21.9 67.76 22.62Q67.76 23.34 67.3 23.77Q66.84 24.2 66 24.2ZM78 24.2Q75.98 24.2 74.76 23.02Q73.54 21.84 73.54 19.8V17.2Q73.54 15.16 74.76 13.98Q75.98 12.8 78 12.8Q79.36 12.8 80.36 13.33Q81.36 13.86 81.91 14.82Q82.46 15.78 82.46 17.06V19.04H75.62V19.94Q75.62 21.1 76.26 21.74Q76.9 22.38 78 22.38Q78.9 22.38 79.5 22.05Q80.1 21.72 80.22 21.14H82.36Q82.14 22.54 80.95 23.37Q79.76 24.2 78 24.2ZM75.62 17.06V17.52H80.38V17.04Q80.38 15.82 79.76 15.16Q79.14 14.5 78 14.5Q76.86 14.5 76.24 15.17Q75.62 15.84 75.62 17.06ZM91.7 24Q90.14 24 89.21 23.09Q88.28 22.18 88.28 20.66V11.36H84.58V9.4H90.44V20.62Q90.44 21.28 90.8 21.66Q91.16 22.04 91.78 22.04H95.1V24Z"/><rect class="d2cur" x="98" y="7" width="2.2" height="21" fill="#3cc2ae"/><path fill="var(--soft)" d="M109.42 15.8Q108.68 15.8 108.29 15.39Q107.9 14.98 108 14.3Q108.1 13.62 108.63 13.21Q109.16 12.8 109.9 12.8Q110.66 12.8 111.04 13.21Q111.42 13.62 111.32 14.3Q111.22 14.98 110.7 15.39Q110.18 15.8 109.42 15.8ZM108.08 24.2Q107.34 24.2 106.95 23.79Q106.56 23.38 106.66 22.7Q106.76 22.02 107.29 21.61Q107.82 21.2 108.56 21.2Q109.32 21.2 109.7 21.61Q110.08 22.02 109.98 22.7Q109.88 23.38 109.36 23.79Q108.84 24.2 108.08 24.2ZM119.1 24.2Q118.12 24.2 117.44 23.68Q116.76 23.16 116.49 22.24Q116.22 21.32 116.4 20.12L116.9 16.9Q117.1 15.68 117.68 14.76Q118.26 13.84 119.1 13.32Q119.94 12.8 120.92 12.8Q122.04 12.8 122.68 13.43Q123.32 14.06 123.28 15.1H123.34L123.64 13H125.44L124.1 21.46Q124.04 21.86 124.26 22.11Q124.48 22.36 124.86 22.36H125.76L125.5 24H124.5Q123.52 24 123 23.36Q122.48 22.72 122.62 21.78Q122.24 22.88 121.29 23.54Q120.34 24.2 119.1 24.2ZM119.96 22.64Q120.96 22.64 121.65 21.93Q122.34 21.22 122.54 20L123 17Q123.18 15.78 122.71 15.07Q122.24 14.36 121.26 14.36Q120.26 14.36 119.56 15.07Q118.86 15.78 118.68 17L118.22 20Q118.04 21.22 118.51 21.93Q118.98 22.64 119.96 22.64ZM127.72 24 127.98 22.36H131.88L133.1 14.64H129.7L129.96 13H135.16L133.68 22.36H137.38L137.12 24ZM134.48 11.02Q133.82 11.02 133.5 10.68Q133.18 10.34 133.26 9.76Q133.36 9.16 133.79 8.81Q134.22 8.46 134.88 8.46Q135.54 8.46 135.87 8.81Q136.2 9.16 136.1 9.76Q136.02 10.34 135.58 10.68Q135.14 11.02 134.48 11.02Z"/></svg></a>
<nav aria-label="Site">
<a class="btn signup" href="/signup?next=/home">Sign up</a><a class="btn login" id="login" href="/sso/login?next=/home">Log in</a>
</nav>
</div>
<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">
<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" 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>
</div>
</div>
</header>
</div>
<!-- Hero: talk your app into existence (designer-built, Razie approved 2026-10-03). Replaces the old Hero door and its app-chip mockups. Drop in as is. -->
<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}
.t6 .chat{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px;display:flex;flex-direction:column}
.t6 .chat .hd{font:600 12px var(--body);color:var(--soft);letter-spacing:.04em;text-transform:uppercase;margin:0 2px 10px}
.t6 .tk{display:flex;flex-direction:column;gap:8px;flex:1;min-height:260px}
.t6 .tk .b{max-width:90%;padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.35;animation:pop .35s ease-out}
.t6 .tk .me{align-self:flex-end;background:var(--indigo);color:#fff;border-bottom-right-radius:5px}
.t6 .tk .ai{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px}
.t6 .tk .typing{align-self:flex-start;color:var(--soft);font-size:13px;padding:2px 6px}
.t6 .ctl{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.t6 .ctl .dots{display:flex;gap:6px;margin-right:auto}
.t6 .ctl .dots button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--soft);font:600 12px var(--body);cursor:pointer}
.t6 .ctl .dots button.on{background:var(--sun);border-color:var(--sun);color:#1c1606}
.t6 .ctl .nx{border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 13px var(--body);padding:6px 14px;border-radius:999px;cursor:pointer;min-height:32px}
.t6 .frame{margin-top:0;display:flex;flex-direction:column}
.t6 .chrome .url{transition:color .4s}
.t6 .chrome .url.live{color:#1f7a4f;font-weight:600}
@media (prefers-color-scheme: dark){.t6 .chrome .url.live{color:#5fd59a}}
.t6 .chrome .pill{margin-left:auto;font:600 11px var(--body);padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--soft);white-space:nowrap;transition:all .4s}
.t6 .chrome .pill.live{background:#3ecf8e;border-color:#3ecf8e;color:#06120c}
/* the book club site */
.bc{--b-bg:#15171c;--b-card:#1e2128;--b-ink:#ecebe6;--b-soft:#a3a6ae;--b-line:#2c3038;--b-acc:#e08a5b;--b-acc2:#3a2a22;--b-hero1:#2a2622;--b-hero2:#15171c;
background:var(--b-bg);color:var(--b-ink);flex:1;min-height:360px;position:relative;transition:background .7s,color .7s;font-family:var(--body)}
.bc.dark{--b-bg:#0c1611;--b-card:#13231a;--b-ink:#e3f1e8;--b-soft:#8fb3a0;--b-line:#1f3729;--b-acc:#3ecf8e;--b-acc2:#173326;--b-hero1:#123222;--b-hero2:#0c1611}
.bc .home{position:absolute;inset:0;padding:14px;transition:opacity .45s,transform .45s;z-index:2;background:var(--b-bg)}
.bc .home.away{opacity:0;transform:scale(.97);pointer-events:none}
.bc .home .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bc .home .top b{font-family:var(--display);font-size:20px}
.bc .home .top span{font-size:12px;color:var(--b-soft)}
.bc .home .none{border:1px dashed var(--b-line);border-radius:14px;padding:26px 14px;text-align:center;color:var(--b-soft);font-size:14px}
.bc .home .none b{display:block;color:var(--b-ink);font-size:15px;margin-bottom:4px}
.bc .home .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bc .home .tile{background:var(--b-card);border:2px solid var(--b-acc);border-radius:14px;padding:12px;animation:pop .45s ease-out, glow 1.6s ease-out 1;transition:transform .15s}
.bc .home .tile.tap{transform:scale(.94)}
.bc .home .tile .t{font-weight:700} .bc .home .tile .m{font-size:12px;color:var(--b-soft);margin-top:3px}
.bc .pc{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s,background .7s,border-color .7s,color .7s}
.bc .pc.in{opacity:1;transform:none}
.bc .hero{padding:18px 18px 14px;background:linear-gradient(160deg,var(--b-hero1),var(--b-hero2));border-bottom:1px solid var(--b-line)}
.bc .hero h3{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em}
.bc .hero p{margin:4px 0 0;color:var(--b-soft);font-size:14px}
.bc nav{display:flex;gap:14px;margin-top:10px;font-size:13px;font-weight:700}
.bc nav span{color:var(--b-soft)} .bc nav span.on{color:var(--b-acc);border-bottom:2px solid var(--b-acc)}
.bc .body{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;padding:12px}
.bc .card{background:var(--b-card);border:1px solid var(--b-line);border-radius:14px;padding:12px}
.bc .card h5{margin:0 0 8px;font:700 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--b-soft)}
.bc .now{display:flex;gap:12px;align-items:flex-start}
.bc .cover{flex:none;width:62px;height:92px;border-radius:4px 7px 7px 4px;background:linear-gradient(150deg,#1f4e5f,#0f2a33);color:#f6e7c8;font:800 11px/1.1 var(--display);padding:8px 6px;box-shadow:inset 4px 0 0 rgba(0,0,0,.25),0 4px 10px rgba(0,0,0,.18);display:flex;flex-direction:column;justify-content:space-between}
.bc .cover small{font:400 8px var(--body);opacity:.8}
.bc .now b{display:block;font-size:16px}
.bc .now .by{color:var(--b-soft);font-size:13px}
.bc .prog{height:6px;border-radius:3px;background:var(--b-acc2);margin:10px 0 4px;overflow:hidden}
.bc .prog i{display:block;height:100%;width:0;background:var(--b-acc);transition:width 1.2s ease-out .3s,background .7s}
.bc .pc.in .prog i{width:34%}
.bc .tiny{font-size:12px;color:var(--b-soft)}
.bc .meet b{display:block;font-size:15px}
.bc .who{display:flex;margin-top:8px}
.bc .who i{width:26px;height:26px;border-radius:50%;margin-right:-6px;border:2px solid var(--b-card);font:700 10px/22px var(--body);text-align:center;color:#fff;font-style:normal}
.bc .shelf{grid-column:1/-1}
.bc .row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--b-line);font-size:14px}
.bc .row:first-of-type{border-top:none}
.bc .tag{font:700 11px var(--body);padding:2px 8px;border-radius:999px;background:var(--b-acc2);color:var(--b-acc)}
.bc .row.nb{border-top:none;animation:pop .45s ease-out, nbflash 2.4s ease-out 1;border-radius:8px;padding:7px 6px;margin:0 -6px}
@keyframes nbflash{0%{background:rgba(62,207,142,.35)}100%{background:transparent}}
.bc .ribbon{position:absolute;right:12px;bottom:12px;font:700 12px var(--body);padding:6px 12px;border-radius:999px;background:#3ecf8e;color:#06120c;box-shadow:0 6px 18px rgba(62,207,142,.35);opacity:0;transform:scale(.9);transition:all .4s}
.bc .ribbon.in{opacity:1;transform:none;animation:glow 1.6s ease-out 2}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(62,207,142,.55)}100%{box-shadow:0 0 0 14px rgba(62,207,142,0)}}
@media (max-width:820px){.t6 .intro,.t6 .split{grid-template-columns:1fr}}
@media (max-width:520px){.bc .body{grid-template-columns:1fr}}
</style>
<section class="door t2 t6" id="hero">
<div class="wrap">
<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>
<p>Tell your AI what you want, in your own words. On the right, your app builds itself while you talk: its page, its data, its look. Change your mind and it changes with it. Say <em>publish</em> and it is live at its own address.</p>
</div>
<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="/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>
<div class="split">
<div class="chat">
<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>
<button class="nx" id="lp3-next">Next ›</button>
</div>
</div>
<div class="frame">
<div class="chrome"><i></i><i></i><i></i><span class="url" id="lp3-url">demo-1.aiheroapps.com/Home</span><span class="pill" id="lp3-pill">draft · only you</span></div>
<div class="bc" id="lp3-bc">
<div class="home" id="lp3-home"><div class="top"><b>Home</b><span>demo-1 · your project</span></div><div id="lp3-hb"></div></div>
<div class="pc hero"><h3>The Tuesday Book Club</h3><p>Reading together since today · 6 members</p><nav><span class="on">Books</span><span>Members</span><span>Meetings</span></nav></div>
<div class="body">
<div class="pc card"><h5>Reading now</h5><div class="now"><div class="cover">The Salt Road<small>M. Arden</small></div><div><b>The Salt Road</b><span class="by">by M. Arden · 312 pages</span><div class="prog"><i></i></div><span class="tiny">week 1 of 3 · chapters 1–6</span></div></div></div>
<div class="pc card meet"><h5>Next meeting</h5><b>Tue 14 Oct, 7 pm</b><span class="tiny">at Maya's · bring a question</span><div class="who"><i style="background:#b4532a">MA</i><i style="background:#3d6b8f">JR</i><i style="background:#6b8f3d">SK</i><i style="background:#8f3d6b">LT</i><i style="background:#5a5a8f">PD</i><i style="background:#8f7a3d">RC</i></div></div>
<div class="pc card shelf" id="lp3-shelf"><h5>Our shelf</h5><div class="row"><span>The Salt Road · M. Arden</span><span class="tag">reading</span></div><div class="row"><span>Up next: vote by Sunday</span><span class="tiny">3 suggestions</span></div><div class="row"><span class="tiny">Books read since today: 0, your first one is on its way</span></div></div>
</div>
<div class="ribbon" id="lp3-ribbon">● Live at bookclub.aiheroapps.com</div>
</div>
</div>
</div>
</div>
<div class="wrap minis">
<div><strong>Talk</strong>Say what you want, as you would to a person. Your AI asks only when it has to.</div>
<div><strong>Watch</strong>The real page grows beside the chat, one answer at a time. Undo is one sentence.</div>
<div><strong>Publish</strong>"Publish it" puts it live at its own address. Keep talking; it keeps growing.</div>
</div>
</section>
<script>
(function(){
var tk=document.getElementById('lp3-tk'); if(!tk) return;
var bc=document.getElementById('lp3-bc'), pcs=bc.querySelectorAll('.pc'),
url=document.getElementById('lp3-url'), pill=document.getElementById('lp3-pill'), rib=document.getElementById('lp3-ribbon'),
dots=document.querySelectorAll('#lp3-dots button'), nx=document.getElementById('lp3-next');
var S=[null,
{me:'I want an app that tracks the books our club reads, starting today.', ai:'Done. Tap the new Book club tile on your home page.'},
{me:'Cool. Change the colour scheme to dark, with a green tint.', ai:'Done.'},
{me:'OK, publish it.', ai:'Done. It\u2019s live at bookclub.aiheroapps.com.'},
{me:'I\u2019m reading The Cartographer of Lost Rivers, by Elena Marsh.', ai:'Added to the top of your list.'}];
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);}
var home=document.getElementById('lp3-home'), hb=document.getElementById('lp3-hb');
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="lp3-tile"><div class="t">Book club</div><div class="m">new · just now</div></div></div>';
function chrome(s,where){
var live=s>=3; url.textContent=live?'bookclub.aiheroapps.com':('demo-1.aiheroapps.com/'+where); url.classList.toggle('live',live);
pill.textContent=live?'live · public':'draft · only you'; pill.classList.toggle('live',live); rib.classList.toggle('in',live);
}
var shelf=document.getElementById('lp3-shelf');
function book(s){
var r=document.getElementById('lp3-nb');
if(s<4){ if(r) r.remove(); return; }
if(!r){ r=document.createElement('div'); r.id='lp3-nb'; r.className='row nb'; r.innerHTML='<span><b>The Cartographer of Lost Rivers</b> · Elena Marsh</span><span class="tag">you\u2019re reading</span>'; shelf.insertBefore(r, shelf.querySelector('.row')); }
}
function page(s,grow){
book(s);
bc.classList.toggle('dark',s>=2);
if(s<1){ hb.innerHTML=NONE; home.classList.remove('away'); pcs.forEach(function(p){p.classList.remove('in');}); chrome(0,'Home'); return; }
if(!grow){ home.classList.add('away'); pcs.forEach(function(p){p.classList.add('in');}); chrome(s,'BookClub'); return; }
// grow: tile appears on the empty home, gets tapped, then the club page builds
pcs.forEach(function(p){p.classList.remove('in');}); home.classList.remove('away'); hb.innerHTML=TILE; chrome(s,'Home');
later(function(){var t=document.getElementById('lp3-tile'); if(t) t.classList.add('tap');},2600);
later(function(){home.classList.add('away'); chrome(s,'BookClub');
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 ↺':'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);
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('lp3-replay').addEventListener('click',play);
play();
})();
</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>
<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="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="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>
</div>
</div>
<div class="wrap minis">
<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">
<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>
</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>
</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>
</section>
<!--
d2 landing: a Pipeline tab on the Creator and Pro sections (designer-built, Razie approved 2026-09-28).
Drop in as is, after the Pro section (anywhere after #creator and #pro). It adds a tab bar to each
section's .stage: Creator = Model | Pipeline, Pro = Source | Pipeline. The first tab is the stage as it
is today (moved, not changed); the Pipeline tab is the pipe map with sample data, links made inert.
Carries its own copy of d2PipeMap (used only if the page doesn't have one); STATE must match the
Agents page's colours, as in pipeline/pipe-map.txt.
-->
<style>
.pm-map{flex:1 1 calc(280px*var(--fz,1));max-width:calc(380px*var(--fz,1))}
.pm-map svg{width:100%;height:auto;display:block}
.pm-map a{cursor:pointer}
.pm-map .pm-n:hover circle,.pm-map .pm-n:focus circle{stroke:var(--ink,#1d1d1b);stroke-width:2}
.pm-map text{font-family:inherit}
.pm-help{display:block;text-align:center;font-size:calc(12px*var(--fz,1));color:var(--soft,#6b6a66);margin-top:2px}
.lp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.lp-tabs button{background:transparent;border:1px solid var(--line,#ddd);color:var(--soft,#6b6a66);font:inherit;font-size:calc(13px*var(--fz,1));padding:5px 14px;border-radius:999px;min-height:32px;cursor:pointer}
#creator .lp-tabs button[aria-selected="true"]{background:var(--indigo-bg,#f5e8dc);border-color:var(--indigo,#9a4b12);color:var(--indigo,#9a4b12)}
#pro .lp-tabs button[aria-selected="true"]{background:var(--slate-bg,#e8ecf0);border-color:var(--slate,#4a5a6a);color:var(--slate,#4a5a6a)}
.lp-map{max-width:420px;margin:10px auto 4px}
.lp-map .pm-help{display:none}
.lp-cap{text-align:center}
</style>
<script>
(function(){
if(!window.d2PipeMap){
(function(){
var STATE={"up":"#6b7fd7","idle":"#9aa3b2","working":"#2f9a6f","merging":"#2f9a6f","waiting":"#d9a520","handing-over":"#8e5cc8","warning":"#e07a2e","stopped":"#c9483b","done":"#1f6b4c","stuck":"#c0392b","gone":"#555c66","dispatching":"#2a8a8f","quiet":"#7b828c","quiet:up":"#47558f","quiet:idle":"#676d77","quiet:working":"#1f674a","quiet:merging":"#1f674a","quiet:waiting":"#916e15","quiet:handing-over":"#5f3d85","quiet:warning":"#95511f","quiet:stopped":"#863027","quiet:done":"#154733","quiet:stuck":"#80261d","quiet:gone":"#393d44","quiet:dispatching":"#1c5c5f"};
var DARKTEXT={waiting:1};
var ITEM=[['new','var(--soft,#9c9a93)'],['in-progress','var(--leaf,#2f9a6f)'],['waiting','var(--sun,#d9a520)'],['review','var(--attn,#e07a2e)']];
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 pills(g,cx,y,c){var list=ITEM.filter(function(s){return (c&&c[s[0]])>0});var w=24,gap=4,x=cx-(list.length*w+(list.length-1)*gap)/2;
list.forEach(function(s){var p=el('g',{});p.appendChild(el('rect',{x:x,y:y,width:w,height:15,rx:7,fill:s[1]}));
p.appendChild(el('text',{x:x+w/2,y:y+11,'text-anchor':'middle','font-size':11,fill:'#fff'},String(c[s[0]])));
p.appendChild(el('title',{},c[s[0]]+' '+s[0]));g.appendChild(p);x+=w+gap});}
function node(svg,x,y,r,label,sub,state,href,isYou,initial){
var a=el('a',{href:href,class:'pm-n'});a.appendChild(el('title',{},label+(state?': '+state:'')));
if(isYou)a.appendChild(el('circle',{cx:x,cy:y,r:r,fill:'var(--sun-bg,#fbf1dc)',stroke:'var(--sun,#d99a2b)','stroke-width':1.5}));
else if(state)a.appendChild(el('circle',{cx:x,cy:y,r:r,fill:STATE[state]||'#9c9a93'}));
else a.appendChild(el('circle',{cx:x,cy:y,r:r,fill:'none',stroke:'var(--soft,#9c9a93)','stroke-width':1.5,'stroke-dasharray':'3 3'}));
var ink=isYou?'#633806':(state?(DARKTEXT[state]?'#412402':'#fff'):'var(--soft,#6b6a66)');
a.appendChild(el('text',{x:x,y:y+4,'text-anchor':'middle','font-size':12,fill:ink},initial));
a.appendChild(el('text',{x:x,y:y+r+20,'text-anchor':'middle','font-size':12,fill:'var(--ink,#1d1d1b)'},label));
a.appendChild(el('text',{x:x,y:y+r+36,'text-anchor':'middle','font-size':11,fill:isYou?'var(--sun,#d99a2b)':(state?(STATE[state]):'var(--soft,#6b6a66)')},sub));
svg.appendChild(a);}
function arrow(svg,x1,x2,y){svg.appendChild(el('path',{d:'M'+x1+' '+y+'H'+(x2-2),stroke:'var(--soft,#9c9a93)','stroke-width':1.5,fill:'none','marker-end':'url(#pm-a)'}));}
window.d2PipeMap=function(host,d){
host.innerHTML='';var complex=d.view==='complex',ag=d.agents||{},you=d.you||0;
var roles=complex?['designer','coder'].concat(ag.tester==='working'?['tester']:[]).concat(['guardian']):[];
var W=complex?90+roles.length*95:300,Y=52,r=complex?21:24;
var svg=el('svg',{viewBox:'0 0 '+W+' 120',role:'img'});
svg.appendChild(el('title',{},'How work flows: you, '+(complex?roles.join(', '):'the pipeline, your AI')));
var defs=el('defs',{}),m=el('marker',{id:'pm-a',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:'var(--soft,#9c9a93)'}));defs.appendChild(m);svg.appendChild(defs);
var youSub=you?you+' for you':'nothing for you';
if(!complex){
node(svg,38,Y,r,'you',youSub,null,'?who=mine',true,'you');
arrow(svg,64,100,Y);
var box=el('g',{});box.appendChild(el('rect',{x:102,y:Y-22,width:96,height:44,rx:10,fill:'none',stroke:'var(--soft,#9c9a93)','stroke-dasharray':'4 3'}));
box.appendChild(el('text',{x:150,y:Y-6,'text-anchor':'middle','font-size':11,fill:'var(--soft,#6b6a66)'},'pipeline'));
pills(box,150,Y+1,d.items||{});svg.appendChild(box);
arrow(svg,200,236,Y);
var st=ag.maker||null;node(svg,262,Y,r,'AI',st||'not started',st,'?role=maker',false,'AI');
} else {
node(svg,32,Y,r,'you',youSub,null,'?who=mine',true,'you');
var x=32;roles.forEach(function(role){var nx=x+95;arrow(svg,x+r+2,nx-r,Y);
pills(svg,(x+nx)/2,Y-38,(d.items||{})[role]||{});
var s=ag[role]||null;node(svg,nx,Y,r,role,s||'not started',s,'?role='+encodeURIComponent(role),false,role.charAt(0).toUpperCase());x=nx;});
}
host.appendChild(svg);
if(d.help){var h=document.createElement('a');h.className='pm-help';h.href=d.help;h.textContent='How it works ›';host.appendChild(h);}
};
})();
}
var CFG={
creator:{tabs:['Model','Pipeline'],cap:'Park an idea and your AI picks it up. One picture shows who has the work and where it stands.',
data:{view:'simple',you:1,items:{'new':2,'in-progress':1,review:1},agents:{maker:'working'}}},
pro:{tabs:['Source','Pipeline'],cap:'You, the designer, the coder and the guardian: every item and what each role is doing, in one picture.',
data:{view:'complex',you:2,items:{designer:{'new':2},coder:{'in-progress':1,'new':3},guardian:{review:1}},agents:{designer:'waiting',coder:'working',guardian:null}}}
};
Object.keys(CFG).forEach(function(id){
var c=CFG[id],sec=document.getElementById(id);if(!sec)return;var st=sec.querySelector('.stage');if(!st||st.querySelector('.lp-tabs'))return;
var p0=document.createElement('div');while(st.firstChild)p0.appendChild(st.firstChild);
var p1=document.createElement('div');p1.hidden=true;var map=document.createElement('div');map.className='pm-map lp-map';p1.appendChild(map);
var cap=document.createElement('p');cap.className='hint lp-cap';cap.textContent=c.cap;p1.appendChild(cap);
var bar=document.createElement('div');bar.className='lp-tabs';bar.setAttribute('role','tablist');
var ps=[p0,p1];ps.forEach(function(p){p.setAttribute('role','tabpanel')});
var bs=c.tabs.map(function(t,i){var b=document.createElement('button');b.type='button';b.setAttribute('role','tab');b.textContent=t;
b.addEventListener('click',function(){bs.forEach(function(x,j){x.setAttribute('aria-selected',j===i?'true':'false');ps[j].hidden=j!==i})});bar.appendChild(b);return b});
bs[0].setAttribute('aria-selected','true');bs[1].setAttribute('aria-selected','false');
st.appendChild(bar);st.appendChild(p0);st.appendChild(p1);
window.d2PipeMap(map,c.data);
[].forEach.call(map.querySelectorAll('a'),function(a){a.removeAttribute('href');a.style.cursor='default'});
});
})();
</script>
<span id="master"></span>
<!-- d2 landing, Master section (designer, 2026-09-28, Razie approved option B + tabs; Manage tab added 2026-09-28).
Self-contained: scoped to #d2-master-sec. The copy side uses the landing's own colours
(CSS vars with fallbacks); the picture side is always dark. Wire the two buttons' hrefs. -->
<section id="d2-master-sec" aria-labelledby="d2ms-h">
<style>
#d2-master-sec{padding:40px 16px}
#d2-master-sec .card{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
#d2-master-sec .copy{flex:1 1 300px;min-width:0}
#d2-master-sec .pic{flex:1 1 360px;min-width:0}
#d2-master-sec .kick{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft,#777);margin:0 0 8px}
#d2-master-sec h2{font-size:clamp(26px,4vw,36px);font-weight:700;line-height:1.15;margin:0 0 16px;color:var(--ink,#1d1d1b)}
#d2-master-sec ul{list-style:none;margin:0 0 22px;padding:0}
#d2-master-sec li{font-size:16px;line-height:1.5;margin:0 0 12px;color:var(--ink,#1d1d1b)}
#d2-master-sec li b{font-weight:700}
#d2-master-sec .cta{display:flex;gap:10px;flex-wrap:wrap}
#d2-master-sec .cta a{display:inline-block;padding:10px 18px;border-radius:999px;font-size:15px;text-decoration:none;border:1.5px solid var(--sun,#f2b84b);color:var(--ink,#1d1d1b)}
#d2-master-sec .cta a.primary{background:var(--sun,#f2b84b);color:#1d1d1b}
#d2-master-sec .dark{background:#16181d;border-radius:16px;padding:14px;color:#eceae4;font-family:system-ui,-apple-system,sans-serif;color-scheme:dark}
#d2-master-sec .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
#d2-master-sec .tabs button{background:transparent;border:1px solid #3a3f4a;color:#a8abb2;font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;min-height:32px;cursor:pointer}
#d2-master-sec .tabs button[aria-selected="true"]{background:#23265a;border-color:#9296f5;color:#eceae4}
#d2-master-sec .body{min-height:280px}
#d2-master-sec svg{width:100%;height:auto;display:block}
#d2-master-sec .msg{border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:14px;line-height:1.5}
#d2-master-sec .who{font-size:12px;color:#a8abb2;margin-bottom:3px}
#d2-master-sec .you{background:#3a2a0e;border:1px solid #f2b84b;margin-left:28px}
#d2-master-sec .ag{background:#23265a;border:1px solid #9296f5;margin-right:28px}
#d2-master-sec .gd{background:#10291f;border:1px solid #46c48e;margin-right:28px}
#d2-master-sec .try{display:inline-block;margin-top:4px;font-size:13px;color:#9296f5}
#d2-master-sec .pm{margin:0 0 10px}
#d2-master-sec .rows{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4}
#d2-master-sec .row{border:1px solid #2c3039;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start}
#d2-master-sec .row .t{flex:1;min-width:0}
#d2-master-sec .row .m{color:#a8abb2;font-size:11px}
#d2-master-sec .ps{border-radius:999px;padding:1px 8px;font-size:11px;white-space:nowrap}
#d2-master-sec .ps-rv{background:#5a1f3a;color:#f4a6c6}#d2-master-sec .ps-ip{background:#1f4a38;color:#8fe0b8}#d2-master-sec .ps-wt{background:#4a3510;color:#f2c46b}#d2-master-sec .ps-nw{background:#2c3039;color:#c9ccd2}
#d2-master-sec .ok{border:1px solid #3a3f4a;border-radius:6px;padding:0 7px;color:#46c48e}
#d2-master-sec .pk{color:#a8abb2;font-size:12px;padding:2px 4px}
</style>
<div class="card">
<div class="copy">
<p class="kick">Master</p>
<h2 id="d2ms-h">Work at the speed of thought.</h2>
<ul>
<li><b>Set up your team.</b> A designer, a coder, a tester, guardians: each an AI agent with its own role.</li>
<li><b>Point them.</b> Clear directions, then let them go at it through one shared pipeline.</li>
<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>
<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="5">Release</button>
</div>
<div class="body" role="tabpanel" aria-live="polite"></div>
</div></div>
</div>
<script>
(function(){
var root=document.getElementById('d2-master-sec'); if(!root) return;
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="136" y="50" width="86" height="40" rx="8" fill="#1f2229" stroke="#454b57"/><text x="179" y="74" text-anchor="middle" fill="#eceae4" font-size="11" font-weight="700">New</text>'+
'<rect x="136" y="106" width="86" height="40" rx="8" fill="#1f2229" stroke="#454b57"/><text x="179" y="130" text-anchor="middle" fill="#eceae4" font-size="11" font-weight="700">Working</text>'+
'<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>'+
'<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>'+
'<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><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>'+
'<rect x="72" y="10" width="20" height="14" rx="7" fill="#3a3f4a"/><text x="82" y="21" text-anchor="middle" fill="#eceae4" font-size="11">3</text>'+
'<rect x="160" y="10" width="20" height="14" rx="7" fill="#1f6b4c"/><text x="170" y="21" text-anchor="middle" fill="#eceae4" font-size="11">1</text>'+
'<rect x="184" y="10" width="20" height="14" rx="7" fill="#8a5a00"/><text x="194" y="21" text-anchor="middle" fill="#eceae4" font-size="11">1</text>'+
'<circle cx="40" cy="44" r="20" fill="#3a2a0e" stroke="#f2b84b" stroke-width="1.5"/><text x="40" y="48" text-anchor="middle" fill="#f2b84b" font-size="11">you</text>'+
'<circle cx="132" cy="44" r="20" fill="#5b5fd6"/><text x="132" y="48" text-anchor="middle" fill="#eceae4" font-size="12">D</text>'+
'<circle cx="222" cy="44" r="20" fill="#2f9a6f"/><text x="222" y="48" text-anchor="middle" fill="#eceae4" font-size="12">C</text>'+
'<circle cx="312" cy="44" r="20" fill="none" stroke="#8a8f99" stroke-dasharray="4 3"/><text x="312" y="48" text-anchor="middle" fill="#a8abb2" font-size="12">G</text>'+
'<text x="40" y="80" text-anchor="middle" fill="#f2b84b" font-size="11">2 for you</text><text x="132" y="80" text-anchor="middle" fill="#9296f5" font-size="11">designer · up</text>'+
'<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>';
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,
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')});}
bs.forEach(function(b){b.addEventListener('click',function(){show(+b.getAttribute('data-i'))});});
show(0);
})();
</script>
</section>
<section class="extras" id="extras">
<div class="wrap">
<h2>Extras</h2>
<p>More ways to live with diesel.</p>
</div>
</section>
<section class="door t2 extra" id="notebook">
<div class="wrap grid">
<div>
<span class="badge">Living notebook</span>
<h2>Keep everything you work on with AI in one living notebook.</h2>
<p class="who">For you, your hobby, or your small team.</p>
<p>Your chats with AI produce good stuff: plans, answers, lists, little tools. Then it scrolls away. Diesel keeps it, links it, and keeps it fresh, so next week you pick up where you left off.</p>
<div class="chips" aria-label="Things people keep here">
<span class="chip">Investment portfolio</span><span class="chip">Riding trails</span><span class="chip">Home budget</span>
<span class="chip">Garden plan</span><span class="chip">Research notes</span><span class="chip">Club schedule</span>
</div>
<a class="btn" href="#notebook" aria-disabled="true">Start a notebook</a>
<div class="soon">Opening soon.</div>
</div>
<div class="nstage">
<div class="seg" role="group" aria-label="What the notebook does">
<button type="button" data-s="cap" aria-pressed="true">Captures</button>
<button type="button" data-s="con" aria-pressed="false">Connects</button>
<button type="button" data-s="alive" aria-pressed="false">Stays alive</button>
</div>
<div class="scene" id="scene" aria-live="polite"></div>
</div>
</div>
<div class="wrap minis">
<div><strong>Captures</strong>What you and your AI make, without copy and paste.</div>
<div><strong>Connects</strong>Notes, documents and the things you track, like companies, trades or trails, linked to each other.</div>
<div><strong>Stays alive</strong>Numbers refresh, alerts fire, and pages rearrange as things change. Describe your world, get an app.</div>
</div>
</section>
<section class="obs" id="obsidian">
<div class="wrap grid">
<div>
<span class="badge">Works with Obsidian</span>
<h2>Prefer writing in Obsidian? Keep writing there.</h2>
<p>Your notes and guides can live in your Obsidian vault and in diesel at the same time. Edit on either side, sync, and both stay the same.</p>
<ul class="facts">
<li>Two-way sync: changes flow in both directions.</li>
<li>Plain markdown files, exactly as they are in diesel. Nothing extra added to your notes.</li>
<li>If both sides changed, you get both copies to compare. Nothing is ever overwritten or deleted behind your back.</li>
<li>Works on laptops and on the iPad.</li>
</ul>
<div class="doors">
<a class="btn" href="https://github.com/razie/obsidian-diesel-sync">Get the Diesel Sync plugin</a>
</div>
<p class="soon">Install it in Obsidian with the BRAT plugin: add <b>razie/obsidian-diesel-sync</b>.</p>
</div>
<div class="sync" aria-label="A note in an Obsidian vault and the same page in diesel, kept in sync">
<div class="pane">
<h6>Your vault</h6>
<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">
<svg viewBox="0 0 44 22"><path d="M4 7 H38 M32 2 L38 7 L32 12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/><path d="M40 16 H6 M12 11 L6 16 L12 21" fill="none" stroke="var(--sun)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<small>sync</small>
</div>
<div class="pane pg">
<h6>In diesel</h6>
<h5>Buying rules</h5>
<p>Linked from My gold juniors and 2 other notes</p>
<div class="bar2"></div><div class="bar2 s"></div><div class="bar2 t"></div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap">
This page is an early sketch; the notebook isn't open yet.
</div>
</footer>
<script>
(function(){
// source view built in JS so no line of this page starts with a DSL marker
var D = String.fromCharCode(36);
var src = [
'<span class="c">// a holding, and a rule that watches it</span>',
D + '<span class="k">class</span> Holding (portfolio: <>Portfolio,',
' company: <>Company, shares: Number)',
'',
D + '<span class="k">when</span> price.changed (company, move) {',
' <span class="k">if</span> (move > 5) {',
' notify (text = company.name + <span class="s">" moved "</span> + move + <span class="s">"%"</span>)',
' }',
'}',
'',
D + '<span class="k">send</span> price.changed (company = <span class="s">"FRST"</span>, move = 4.2)',
D + '<span class="k">expect</span> (notified is false)'
].join('\n');
document.getElementById('srcpre').innerHTML = src;
// hero door: see the talk-it-into-existence section (its own script)
// modeller stage
var screens = {
co: ['/app/Company', '<h4>Companies <small>3 records</small></h4>' +
'<div class="tools"><span class="act">List</span><span>Group by stage</span><span>Map</span><span>+ New</span></div>' +
'<div class="gl">' +
'<div class="gr"><b>Frostline Resources</b><span class="ref">2 deposits</span><span class="stg">explorer</span></div>' +
'<div class="gr"><b>Copperhead Mining</b><span class="ref">1 deposit</span><span class="stg">producer</span></div>' +
'<div class="gr"><b>North Royalty & Streaming</b><span class="ref">5 royalties</span><span class="stg">royalty</span></div>' +
'</div>'],
dep: ['/app/Deposit?view=map', '<h4>Deposits <small>on a map, because they have lat and lon</small></h4>' +
'<div class="map">' +
'<b style="left:24%;top:30%;background:#f2b84b"></b><em style="left:24%;top:30%">Aurora (Au)</em>' +
'<b style="left:58%;top:58%;background:#c46a3a"></b><em style="left:58%;top:58%">Red Creek (Cu)</em>' +
'<b style="left:44%;top:18%;background:#f2b84b"></b><em style="left:44%;top:18%">Frost Ridge (Au)</em>' +
'</div>' +
'<div class="tools"><span>List</span><span class="act">Map</span><span>Filter by commodity</span></div>'],
hold: ['/app/Holding', '<h4>Holdings <small>references become links</small></h4>' +
'<div class="tools"><span class="act">List</span><span>Sum by company</span><span>+ New</span></div>' +
'<div class="gl">' +
'<div class="gr"><span>1,200 shares</span><span class="ref">Company: Frostline</span><span class="stg">+4.2%</span></div>' +
'<div class="gr"><span>800 shares</span><span class="ref">Company: Copperhead</span><span class="stg">−1.1%</span></div>' +
'<div class="gr"><span>350 shares</span><span class="ref">Company: North Royalty</span><span class="stg">+0.6%</span></div>' +
'</div>']
};
var nodes = document.querySelectorAll('#stage .node');
var screen = document.getElementById('screen'), url = document.getElementById('url');
function show(c){
nodes.forEach(function(n){ n.classList.toggle('on', n.getAttribute('data-c') === c); n.setAttribute('aria-pressed', n.getAttribute('data-c') === c ? 'true' : 'false'); });
url.textContent = screens[c][0]; screen.innerHTML = screens[c][1];
}
nodes.forEach(function(n){
n.addEventListener('click', function(){ show(n.getAttribute('data-c')); });
n.addEventListener('keydown', function(e){ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); show(n.getAttribute('data-c')); } });
});
show('co');
// notebook stage
var price = 1.42, series = [1.18,1.21,1.2,1.26,1.24,1.3,1.29,1.35,1.33,1.42];
function spark(){
var mn = Math.min.apply(null, series), mx = Math.max.apply(null, series), w = 300, h = 60;
return series.map(function(v, i){
var x = (i / (series.length - 1)) * w, y = h - ((v - mn) / ((mx - mn) || 1)) * (h - 8) - 4;
return (i ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1);
}).join(' ');
}
var scenes = {
cap: function(){ return '' +
'<div class="bub me">Why did I buy Frostline again?</div>' +
'<div class="bub ai">You liked the drill results at Frost Ridge and planned to add more before the October assays.</div>' +
'<div class="bub me">Keep that somewhere, please.</div>' +
'<div class="saved pop"><span class="ic">✓</span><div>Saved to <b>My gold juniors</b><small>with the chat it came from, no copy and paste</small></div></div>'; },
con: function(){ return '' +
'<div class="web"><svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">' +
'<path d="M50 50 L20 18"/><path d="M50 50 L82 20"/><path d="M50 50 L18 84"/><path d="M50 50 L82 82"/></svg>' +
'<div class="n hub" style="left:50%;top:50%">My gold juniors</div>' +
'<div class="n" style="left:22%;top:16%">Frostline Resources<small>a company you track</small></div>' +
'<div class="n" style="left:78%;top:18%">Tuesday\'s chat<small>where the idea came from</small></div>' +
'<div class="n" style="left:22%;top:84%">October assays<small>on your calendar</small></div>' +
'<div class="n" style="left:78%;top:84%">Buying rules<small>your own guide</small></div>' +
'</div>'; },
alive: function(){ return '' +
'<div class="live"><h5>Frostline Resources</h5><div class="sub">in My gold juniors, updated just now</div>' +
'<div class="px"><b id="px">$' + price.toFixed(2) + '</b><span class="up" id="chg">+' + ((price / 1.35 - 1) * 100).toFixed(1) + '% today</span></div>' +
'<svg viewBox="0 0 300 64" preserveAspectRatio="none" aria-hidden="true"><path id="spk" d="' + spark() + '"/></svg></div>' +
'<div class="toast pop"><span class="ic">!</span><div><b>Up more than 5% today.</b> You asked to hear about big moves before the assays.</div></div>' +
'<div class="ticker"><button type="button" class="btn ghost" id="tick">Refresh prices</button></div>'; }
};
var scene = document.getElementById('scene');
var segs = document.querySelectorAll('.seg button');
function showScene(k){
segs.forEach(function(b){ b.setAttribute('aria-pressed', b.getAttribute('data-s') === k ? 'true' : 'false'); });
scene.innerHTML = scenes[k]();
var t = document.getElementById('tick');
if (t) t.addEventListener('click', function(){
price = Math.round((price + (Math.random() * 0.08 - 0.02)) * 100) / 100;
series.push(price); series.shift();
document.getElementById('px').textContent = '$' + price.toFixed(2);
document.getElementById('chg').textContent = '+' + ((price / 1.35 - 1) * 100).toFixed(1) + '% today';
document.getElementById('spk').setAttribute('d', spark());
});
}
segs.forEach(function(b){ b.addEventListener('click', function(){ showScene(b.getAttribute('data-s')); }); });
showScene('cap');
})();
</script>
<script>document.querySelectorAll('a[aria-disabled="true"]').forEach(a=>a.addEventListener("click",e=>e.preventDefault()))</script><script>
// signed in? the landing's Log in becomes My home (what the server did for builtin:landing)
fetch('/api/v2/me',{credentials:'same-origin'}).then(function(r){return r.ok?r.json():null;}).then(function(me){
var u=me&&(me.user||me.data||me); if(!u||!(u.email||u.id||u.name)) return;
var l=document.getElementById('login'); if(l){l.textContent='My home';l.href='/home';}
var s=document.querySelector('nav[aria-label="Site"] .signup'); if(s) s.remove();
}).catch(function(){});
</script>
</body>
</html>