---
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>
.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="#hero" aria-disabled="true">Start an app</a><a class="btn ghost" href="#hero" onclick="return false" id="lp3-replay">Watch it again</a></div><div class="soon">Opening soon.</div>
</div>
</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="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 ›';}
function go(s,anim){
timers.forEach(clearTimeout); timers=[]; cur=s; tk.innerHTML=''; mark(s);
if(s===0){var t=document.createElement('div');t.className='typing';t.textContent='A new project. Say what you want.';tk.appendChild(t);page(0);return;}
for(var i=1;i<s;i++){bub('me',S[i].me);bub('ai',S[i].ai);}
page(s-1,false);
bub('me',S[s].me);
if(!anim){bub('ai',S[s].ai);page(s,false);return;}
var w=document.createElement('div');w.className='typing';w.textContent='working…';
later(function(){tk.appendChild(w);},1800);
later(function(){w.remove();bub('ai',S[s].ai);page(s,s===1);},3400);
}
var auto=[];
function stopAuto(){auto.forEach(clearTimeout);auto=[];}
function play(){ stopAuto(); go(0); [[1,2500],[2,15500],[3,24500],[4,33500]].forEach(function(x){ auto.push(setTimeout(function(){ go(x[0],true); },x[1])); }); }
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>
<section class="door t3" id="creator">
<div class="wrap grid">
<div>
<span class="badge">Creator</span>
<h2>Describe a domain. Use the app it becomes, right away.</h2>
<p class="who">For people who build apps and think in models.</p>
<p class="say" aria-label="What you tell your AI">Create a domain model for a mining company: its properties and claims, the deposits and their resource estimates, drill programs with holes and assays, and who owns what. Seed it with a few sample companies and let me see it.</p>
<p>Model your domain with AI, see it as a graph, and work with live objects the moment a class exists. Sketch draft views, mock APIs by example, then wire behaviour in with rules, flows and streams. <em>Work on a live specification, not an abstract one!</em></p>
<div class="stat"><span class="big">5 minutes</span><span class="small">From a 20-class model to a working, navigable app, with zero code. That's the bar.</span></div>
<div class="doors">
<a class="btn" href="/dom">Open the domain browser</a>
<a class="btn ghost" href="/domain/overview">See the model graph</a>
</div>
</div>
<div class="stage" id="stage">
<p class="hint" style="margin:2px 2px 8px">Tap a class. Its screens already exist.</p>
<svg class="mini" viewBox="0 0 420 64" role="group" aria-label="A small model. Pick a class to see its generated screen.">
<path class="link" d="M108 40 H164"/><text class="ltxt" x="118" y="30">owns *</text>
<path class="link" d="M270 40 H322"/><text class="ltxt" x="289" y="30">of</text>
<g class="node" data-c="dep" tabindex="0" role="button" aria-label="Deposit"><rect x="8" y="18" width="100" height="44" rx="12"/><text x="28" y="45">Deposit</text></g>
<g class="node on" data-c="co" tabindex="0" role="button" aria-label="Company"><rect x="164" y="18" width="106" height="44" rx="12"/><text x="183" y="45">Company</text></g>
<g class="node" data-c="hold" tabindex="0" role="button" aria-label="Holding"><rect x="322" y="18" width="92" height="44" rx="12"/><text x="340" y="45">Holding</text></g>
</svg>
<div class="frame">
<div class="chrome"><i></i><i></i><i></i><span class="url" id="url">/app/Company</span></div>
<div class="screen" id="screen"></div>
</div>
<p class="hint">Generated from the model. No screens were designed for this.</p>
</div>
</div>
<div class="wrap minis">
<div><strong>Model</strong>Classes, keys and references, drafted with AI, editable as text or as a diagram.</div>
<div><strong>Run</strong>Lists, object pages, maps and editors, live from the model, no build step.</div>
<div><strong>Orchestrate</strong>Sequential rules for the everyday, flows for parallel steps, streams when you need them.</div>
</div>
</section>
<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>
<a class="btn ghost" href="https://metals.dieselapps.com/wiki/metals.Topic:Diesel2">Read the spec</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>
</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 400 250" role="img" aria-label="You, the pipeline, and the designer, coder, tester and guardian agents"><defs><marker id="d2ms-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="#8a8f99"/></marker></defs><g font-family="system-ui,sans-serif">'+
'<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>'+
'<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></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 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];
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> metals/<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">
Diesel 2 is being specified in the open, in <a href="https://metals.dieselapps.com/wiki/metals.Topic:Diesel2">the spec</a>. This page is an early sketch on a sandbox; the notebook isn't open yet.
</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>