Version 1 of 1 · · razie via designer-91designer · Current version

Open the app

---
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: Work at the speed of thought</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:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:8px 14px 6px;background:var(--card)}
.rung .lv{grid-column:2;grid-row:1;justify-self:end;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}.rung .sp{grid-column:1;grid-row:1;font-size:20px;font-weight:800;color:var(--indigo);margin:0;line-height:1.2}.rung.plain .sp{color:var(--indigo)}.rung .rl{grid-column:1/-1;grid-row:2;font-size:14px;line-height:1.3;color:var(--soft)}
.rung.hi{border:2px solid var(--indigo)}@media (max-width:700px){.ladder .rungs{grid-template-columns:1fr 1fr}}
.hero2 h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-.03em;margin:0 0 16px;max-width:14em}
.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{border-top:0;padding-top:clamp(18px,3vw,32px)}
#hero.door h2{font-size:clamp(22px,2.8vw,32px)}

/* 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>
<script>
/* Landing demos start when scrolled into view, pause when scrolled away, replay on return */
window.lpView=function(el,enter,leave){if(!el||!('IntersectionObserver' in window))return enter();var on=false;
new IntersectionObserver(function(es){var v=es[0].isIntersecting;if(v===on)return;on=v;if(v)enter();else if(leave)leave()},{rootMargin:'0px 0px -30% 0px',threshold:0}).observe(el)};
</script>
</head>
<body>
<div 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-top:4px;padding-bottom:0">
    <div class="ladder" aria-label="How fast" style="margin-bottom:8px">
      <div class="rungs">
        <a class="rung plain" href="/app/Landing-hero"><span class="lv">Hero</span><span class="sp">Hobby apps</span><span class="rl">Your AI makes your app</span></a>
        <a class="rung hi" href="#creator"><span class="lv">Creator</span><span class="sp">10x</span><span class="rl">Bigger apps, no code</span></a>
        <a class="rung" href="/"><span class="lv">Pro</span><span class="sp">50x</span><span class="rl">For architects and teams</span></a>
        <a class="rung" href="/app/Landing-master"><span class="lv">Master</span><span class="sp">?x</span><span class="rl">How fast can a team of agents go?</span></a>
      </div>
      <p class="sub" style="margin:12px 0 0">Your AI builds working apps, with their data, in minutes. You pick the complexity. Start below to <a href="/app/Landing-hero">learn</a>, <a href="#creator">play</a> or <a href="/">work</a>.</p>
    </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>
<style>
/* P-1284: a level's header kept small over its animation (razie 2026-10-11: heading and gray on the left, start/watch under) */
.lp-top{margin:0 0 14px;display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:end}
.lp-top .stat{margin:0;flex-direction:column;gap:2px;align-items:flex-start}
.lp-top .stat .big{font-size:calc(30px*var(--fz,1))}
.lp-top .stat .small{font-size:calc(13px*var(--fz,1))}
@media(max-width:700px){.lp-top{grid-template-columns:1fr}}
.door .lp-top h2,#hero.door .lp-top h2,#creator.door .lp-top h2,#pro.door .lp-top h2,#d2-master-sec .lp-top h2{font-size:clamp(20px,2.3vw,26px);line-height:1.15;margin:0 0 4px}
.door .lp-top .who,#d2-master-sec .lp-top .who{font-size:calc(15px*var(--fz,1));margin:0 0 10px}
#d2-master-sec .lp-top .cta{margin-top:10px}
.lp-top .doors{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.lp-top .doors .btn{padding:6px 14px;font-size:calc(14px*var(--fz,1))}
/* one column: heading, gray line, then buttons left and the stat right on one row (razie 2026-10-11: "finish hero") */
.lp-top.lp-one{display:block}
.lp-one .lp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.lp-one .stat{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
.lp-one .stat .big{font-size:calc(24px*var(--fz,1))}
.lp-one .stat .small{max-width:none}
</style>
<style>
/* testimonials as a coloured blockquote (razie 2026-10-11: "like a blockquote thing? add some color to it somehow") */
.lp-quote{position:relative;margin:0;max-width:820px;padding:18px 22px 18px 56px;border-left:4px solid var(--indigo);border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--indigo) 12%,transparent)}
.lp-quote::before{content:"\201C";position:absolute;left:14px;top:-6px;font-family:var(--display);font-weight:800;font-size:calc(72px*var(--fz,1));line-height:1;color:var(--indigo)}
.lp-quote q{quotes:none}
.lp-quote + .who{margin:10px 0 0 4px;color:var(--indigo)}
</style>
<style>
/* a full-page animation in its own frame: fixed height, since it sizes itself to the frame (100vh) */
.lp-anim{height:640px}
@media(max-width:760px){.lp-anim{height:1000px}}
</style>
<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="lp-top lp-one">
      <h2>Describe what you need. Get the model, the data and the app.</h2>
      <p class="who">Bigger apps, no code: for people who want more than a simple app, without being techies.</p>
      <div class="lp-row">
        <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 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>
    </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.aiputty.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.aiputty.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);
  lpView(bc.closest('section')||bc.parentNode,play,function(){stopAuto();talk(false);timers.forEach(clearTimeout);timers=[];});
})();
</script>

<!-- Testimonial before the thoughts sections (P-1284, razie 2026-10-11: "before thoughts - bold statement: when you see how we interact with AI you'll only start claude to check usage"; "make it a customer feedback like thing") -->
<section class="door t2 extra" id="bold-usage">
  <div class="wrap">
    <blockquote class="lp-quote" style="font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.3">Once I saw how to work with AI here, now I only start Claude to check my usage.</blockquote>
    <p class="who">Only start Claude to check usage</p>
  </div>
</section>
<!-- Hero: Thoughts, from Blurb#thoughts-locker (P-1284, razie 2026-10-11) -->
<section class="door t2 extra" id="hero-thoughts">
  <div class="wrap">
    <span class="badge">Thoughts</span>
    <h2>Jot it down. Let AI handle it.</h2>
    <p>A bug you just hit, an idea in the shower, a library to look up: type or say it into <b>Thoughts</b> and press <b>Save it</b>. The first word becomes its tag, so it sorts itself; tap a tag to see just those. Send the ones you pick to your AI. The next time you prompt it, it picks them up, does the work and answers in the note. No setup, no agents to run.</p>
    <div style="margin-top:16px">
<div id="bta">
<style>
#bta{font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;color:#ecebe6;background:#141413;border:1px solid #33322f;border-radius:14px;padding:14px;max-width:720px;margin:auto;position:relative;overflow:hidden;min-height:230px;box-sizing:border-box}
#bta *{box-sizing:border-box}
#bta .box{border:1px solid #4a4945;border-radius:9px;background:#1d1d1b;padding:8px 10px;min-height:40px;font-size:13px}
#bta .cur{display:inline-block;width:2px;height:14px;background:#6aa3ff;vertical-align:-2px;animation:btab 1s steps(1) infinite}
@keyframes btab{50%{opacity:0}}
#bta .btn{display:inline-block;border:1px solid #4a4945;border-radius:7px;padding:3px 10px;font-size:12px;background:#22211f;color:#ecebe6;transition:transform .15s}
#bta .btn.p{background:#3b82f6;border-color:#3b82f6;color:#fff}
#bta .btn.press{transform:scale(.9)}
#bta .card{background:#1d1d1b;border:1px solid #33322f;border-radius:9px;padding:7px 9px;font-size:12px;transition:all .5s;opacity:1}
#bta .card.in{animation:btain .5s ease}
@keyframes btain{from{opacity:0;transform:translateY(-12px) scale(.9)}}
#bta .t{font-size:11px;margin-right:5px}
#bta .bug{color:#e0a050}#bta .idea{color:#e0a050}#bta .blurb{color:#e0a050}
#bta .chip{display:inline-block;border-radius:999px;padding:0 7px;font-size:11px;margin-right:4px}
#bta .sent{border:1px dashed #6b6963;color:#9c9a93}
#bta .aq{border:1px solid #d0605a;color:#f09590}
#bta .wt{border:1px solid #c99a2e;color:#e5c06a}
#bta .go{background:#1f3d22;color:#8fd19a;border:1px solid #3b6d41}
#bta .sec{font-size:10px;letter-spacing:.08em;color:#9c9a93;margin:8px 0 4px}
#bta .ck{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid #8a8880;vertical-align:-2px;margin-right:6px}
#bta .ck.on{background:#3b82f6;border-color:#3b82f6}
#bta .fade{opacity:0!important;transform:scale(.85)}
#bta .lay{display:grid;grid-template-columns:120px 1fr;gap:12px}
#bta .tags div{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px;border-radius:6px;color:#cfcdc6;transition:background .3s}
#bta .tags div.sel{background:#22324d;color:#fff}#bta .tags b{color:#9c9a93;font-weight:400}
#bta .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
#bta .card.hid{display:none}
</style>
<div class="lay"><div class="tags"><div class="sec">TAGS</div><div id="bta-tg-bug">#bug <b id="bta-n-bug">0</b></div><div id="bta-tg-idea">#idea <b id="bta-n-idea">0</b></div><div id="bta-tg-look">#look-up <b id="bta-n-look">0</b></div></div>
<div><div class="box"><span id="bta-tx"></span><span class="cur"></span></div><div style="margin-top:6px;text-align:right"><span class="btn" id="bta-send" style="display:none;margin-right:6px">Send to my AI</span><span class="btn p" id="bta-save">Save it</span></div><div class="grid" id="bta-grid"></div><div class="box" id="bta-ai" style="display:none;margin-top:8px;font-size:12px;line-height:1.5"></div></div></div>
<script type="text/lazy">
(()=>{const $=i=>document.getElementById("bta-"+i),sl=ms=>new Promise(r=>setTimeout(r,ms));
async function type(el,s,ms){el.textContent="";for(const c of s){el.textContent+=c;await sl(ms||32)}}
async function press(b){b.classList.add("press");await sl(200);b.classList.remove("press")}
function mk(h,c){const d=document.createElement("div");d.className=c||"card in";d.innerHTML=h;return d}

const items=[["bug","#bug the drafts page is slow"],["idea","#idea levels get their own pages"],["look","#look-up langchain and langgraph"],["bug","#bug export drops the last row"],["idea","#idea a dark theme for the editor"]];
async function run(){for(;;){$("grid").innerHTML="";const n={bug:0,idea:0,look:0};for(const k in n){$("n-"+k).textContent=0;$("tg-"+k).classList.remove("sel")}
for(const [k,s] of items){await type($("tx"),s);await sl(300);await press($("save"));$("tx").textContent="";const t=s.split(" ")[0];
const c=mk('<span class="t '+k+'">'+t+'</span>'+s.slice(t.length+1));c.dataset.k=k;$("grid").prepend(c);n[k]++;$("n-"+k).textContent=n[k];await sl(700)}
await sl(600);$("tg-bug").classList.add("sel");for(const c of $("grid").children)if(c.dataset.k!="bug")c.classList.add("hid");await sl(1400);
const bugs=[...$("grid").children].filter(c=>c.dataset.k=="bug"),chip=(c,cl,t)=>{const x=c.querySelector(".chip");if(x)x.remove();const e=document.createElement("span");e.className="chip "+cl;e.textContent=t;c.prepend(e)};
$("send").style.display="";await sl(500);await press($("send"));for(const c of bugs)chip(c,"sent","sent");await sl(1400);
const ai=$("ai");ai.style.display="";ai.innerHTML='<b style="color:#9c9a93">Later, when you prompt your AI</b><br><span id="bta-q"></span>';await type($("q"),"> check my d2 notes",40);await sl(600);
const a=document.createElement("div");ai.appendChild(a);await type(a,"Picked up 2 #bug notes. Fixed both; my answers are in the notes.",22);
for(const c of bugs)chip(c,"go","answered");await sl(3200);$("send").style.display="none";ai.style.display="none";ai.innerHTML="";
$("tg-bug").classList.remove("sel");for(const c of $("grid").children)c.classList.remove("hid");await sl(1800)}}
run()})();
</script>
</div>
    </div>
  </div>
</section>
<!-- Creator: TurboChat, from Blurb#turbochat (P-1284, razie 2026-10-11: its blurb, then the animation) -->
<section class="door t3 extra" id="creator-turbochat">
  <div class="wrap">
    <span class="badge">TurboChat</span>
    <h2>Tap, don't type.</h2>
    <p>Your designer asks with options, not paragraphs: a button when one tap is enough, ticks and picks for the bigger calls, a note box you can talk into. One tap, or one <b>CONTINUE</b>, and it's answered. Bigger choices open the pad page, with the chat docked beside it.</p>
    <div style="margin-top:16px">
<iframe id="tc-f" title="TurboChat demo" class="lp-anim" style="width:100%;border:0;display:block" data-srcdoc="&lt;div&gt;
&lt;style&gt;:root{--paper:#141413;--card:#1d1d1b;--ink:#ecebe6;--soft:#9c9a93;--line:#33322f;--accent:#f0a35e;--accent-bg:#2e2419;--leaf:#6cc08a;--me:#22283a;--display:system-ui,-apple-system,&quot;Segoe UI&quot;,sans-serif;--body:system-ui,-apple-system,&quot;Segoe UI&quot;,sans-serif}

*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 var(--body)}
.top{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line)}.top b{font:800 18px var(--display)}.top .sp{flex:1}
.ctl button{font:600 13px var(--body);border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer}
.cap{min-height:22px;color:var(--soft);font-size:13px;padding:6px 18px}
.stage{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:16px;padding:6px 18px 18px;height:calc(100vh - 92px);min-height:520px}
.left{overflow:auto;padding-left:clamp(0px,2vw,30px)}
.chat{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.chat .hd{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.chat .hd .sp{flex:1}.chip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.msgs{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.b{max-width:92%;padding:8px 10px;border-radius:12px;background:var(--paper);border:1px solid var(--line);opacity:0;transform:translateY(6px);transition:all .35s}
.b.in{opacity:1;transform:none}.b.me{align-self:flex-end;background:var(--me);white-space:pre-wrap}
.b .who{font-size:11px;color:var(--soft);margin-bottom:3px}
.inp{border-top:1px solid var(--line);padding:8px;display:flex;gap:6px}.inp div{flex:1;border:1px solid var(--line);border-radius:10px;padding:6px 8px;color:var(--soft)}
.grp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;transition:opacity .4s}
.b .grp{background:var(--card);padding:8px 10px;margin:6px 0}
.grp h4{font:700 14px/1.2 var(--display);margin:0 0 4px}.grp.done{opacity:.45}.grp.done h4::after{content:&quot; · sent&quot;;color:var(--leaf);font-weight:400}
.opt{display:flex;gap:8px;align-items:flex-start;padding:4px;border-radius:7px}.opt .bx{width:17px;height:17px;flex:none;border:2px solid var(--soft);border-radius:4px;margin-top:1px;display:grid;place-items:center;font-size:12px;color:#fff;transition:all .15s}
.opt .bx.r{border-radius:50%}.opt.on .bx{background:var(--accent);border-color:var(--accent)}.opt.on .bx::after{content:&quot;✓&quot;}.opt.on .bx.r::after{content:&quot;•&quot;;font-size:16px;line-height:1}
.opt.hl{background:var(--accent-bg)}
.btn{display:block;width:100%;text-align:left;font:600 14px var(--body);padding:8px 12px;margin:5px 0;border-radius:10px;border:1px solid var(--accent);background:var(--accent-bg);color:var(--ink);transition:all .15s}
.btn.hl{background:var(--accent);color:#fff}
.note{display:flex;gap:6px;margin-top:4px}.note .ed{flex:1;min-height:30px;border:1px solid var(--line);border-radius:9px;padding:5px 8px;white-space:pre-wrap}.note .ed:empty::before{content:attr(data-ph);color:var(--soft)}.note .mic{border:1px solid var(--line);border-radius:9px;padding:4px 9px}
.go{font:700 14px var(--display);letter-spacing:.04em;padding:8px 20px;border-radius:10px;border:0;background:var(--accent);color:#fff;margin-top:4px;transition:transform .1s}.go.hl{transform:scale(.94)}
.cur{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;z-index:9;transition:left .6s cubic-bezier(.4,.1,.2,1),top .6s cubic-bezier(.4,.1,.2,1)}
.cur::before{content:&quot;&quot;;position:absolute;inset:0;background:no-repeat center/contain url(&quot;data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 24 24&#x27;%3E%3Cpath d=&#x27;M4 2l15 11-7 1 4 8-3 1-4-8-5 5z&#x27; fill=&#x27;%23111&#x27; stroke=&#x27;%23fff&#x27; stroke-width=&#x27;1.2&#x27;/%3E%3C/svg%3E&quot;)}
.cur.tap::after{content:&quot;&quot;;position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);animation:tap .4s ease-out}
@keyframes tap{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.flash{animation:fl 1.2s}@keyframes fl{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:760px){.stage{grid-template-columns:1fr;height:auto}.chat{min-height:420px}}
html,body{background:#141413}.stage{height:440px;min-height:0;padding:12px}@media (max-width:620px){.stage{grid-template-columns:1fr;height:auto}.chat{min-height:380px}}&lt;/style&gt;
&lt;script&gt;// a tiny timeline: steps run in order, the loop restarts; Pause/Restart buttons
const $=s=&gt;document.querySelector(s),sleep=ms=&gt;new Promise(r=&gt;setTimeout(r,ms*SPEED));let SPEED=1,RUN=0,PAUSED=false;
const cap=t=&gt;{};
async function wait(ms){const id=RUN;let t=0;while(t&lt;ms){await new Promise(r=&gt;setTimeout(r,50));if(!PAUSED)t+=50/SPEED;if(id!==RUN)throw &quot;stop&quot;}}
async function moveTo(el,dx=14,dy=10){const st=$(&quot;.stage&quot;).getBoundingClientRect(),r=el.getBoundingClientRect(),c=$(&quot;#cur&quot;);c.style.left=(r.left-st.left+Math.min(dx,r.width-6))+&quot;px&quot;;c.style.top=(r.top-st.top+Math.min(dy,r.height-4))+&quot;px&quot;;await wait(700)}
async function tap(el,dx,dy){await moveTo(el,dx,dy);const c=$(&quot;#cur&quot;);c.classList.remove(&quot;tap&quot;);void c.offsetWidth;c.classList.add(&quot;tap&quot;);el.classList.add(&quot;hl&quot;);await wait(250);el.classList.remove(&quot;hl&quot;)}
async function typeInto(el,text,ms=45){el.textContent=&quot;&quot;;for(const ch of text){el.textContent+=ch;await wait(ms)}}
function bubble(html,me,who){const b=document.createElement(&quot;div&quot;);b.className=&quot;b&quot;+(me?&quot; me&quot;:&quot;&quot;);b.innerHTML=(who?&#x27;&lt;div class=&quot;who&quot;&gt;&#x27;+who+&#x27;&lt;/div&gt;&#x27;:&quot;&quot;)+html;$(&quot;#msgs&quot;).appendChild(b);requestAnimationFrame(()=&gt;b.classList.add(&quot;in&quot;));$(&quot;#msgs&quot;).scrollTop=1e6;return b}
async function loop(fn){for(;;){const id=++RUN;try{await fn()}catch(e){if(e!==&quot;stop&quot;)console.error(e);if(id!==RUN)return}}}
function controls(fn){loop(fn)}
&lt;/script&gt;
&lt;div class=&quot;stage&quot;&gt;
 &lt;div class=&quot;left&quot; id=&quot;left&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;chat&quot;&gt;&lt;div class=&quot;hd&quot;&gt;&lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;&lt;b&gt;designer-90&lt;/b&gt;&lt;span class=&quot;sp&quot;&gt;&lt;/span&gt;&lt;span class=&quot;chip&quot; id=&quot;newb&quot;&gt;+ New&lt;/span&gt;&lt;span class=&quot;chip&quot; id=&quot;padb&quot;&gt;+Pad&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;msgs&quot; id=&quot;msgs&quot;&gt;&lt;/div&gt;&lt;div class=&quot;inp&quot;&gt;&lt;div&gt;Message…&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;div class=&quot;cur&quot; id=&quot;cur&quot; style=&quot;left:60%;top:60%&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
const LEFT_EMPTY=&#x27;&lt;h2 style=&quot;font:800 22px var(--display);margin:8px 0&quot;&gt;Pad&lt;/h2&gt;&lt;p style=&quot;color:var(--soft)&quot;&gt;The designer\&#x27;s options show here.&lt;/p&gt;&#x27;;
async function run(){
 $(&quot;#msgs&quot;).innerHTML=&quot;&quot;;$(&quot;#left&quot;).innerHTML=&#x27;&lt;h2 style=&quot;font:800 22px var(--display);margin:8px 0&quot;&gt;d2spec · Pipeline&lt;/h2&gt;&lt;p style=&quot;color:var(--soft)&quot;&gt;…any page…&lt;/p&gt;&#x27;;
 cap(&quot;1 · In the chat: the designer asks with buttons. One tap answers.&quot;);await wait(600);
 bubble(&quot;I&#x27;m done with P-1263. What next?&quot;,false,&quot;designer-90&quot;);await wait(700);
 const b=bubble(&#x27;&lt;div class=&quot;grp&quot;&gt;&lt;h4&gt;What next?&lt;/h4&gt;&lt;div class=&quot;btn&quot; id=&quot;bA&quot;&gt;A. Look at the Focus try page&lt;/div&gt;&lt;div class=&quot;btn&quot; id=&quot;bB&quot;&gt;B. Go through the drafts&lt;/div&gt;&lt;div class=&quot;btn&quot; id=&quot;bC&quot;&gt;C. Member onboarding A vs B&lt;/div&gt;&lt;/div&gt;&#x27;,false,&quot;designer-90&quot;);
 await wait(1200);await tap($(&quot;#bB&quot;));await wait(300);
 bubble(&quot;B. Go through the drafts&quot;,true);b.querySelector(&quot;.grp&quot;).classList.add(&quot;done&quot;);await wait(1400);
 cap(&quot;2 · Bigger choices: +Pad opens the pad page. Pad on the left, chat docked on the right.&quot;);
 await tap($(&quot;#padb&quot;));$(&quot;#left&quot;).innerHTML=LEFT_EMPTY;await wait(900);
 bubble(&quot;Three drafts wait for you; I&#x27;ve put them on your pad →&quot;,false,&quot;designer-90&quot;);await wait(600);
 $(&quot;#left&quot;).innerHTML=`&lt;h2 style=&quot;font:800 22px var(--display);margin:8px 0&quot;&gt;Pad: drafts to publish&lt;/h2&gt;
 &lt;div class=&quot;grp&quot; id=&quot;g1&quot;&gt;&lt;h4&gt;Publish? (tick each)&lt;/h4&gt;
  &lt;div class=&quot;opt&quot; id=&quot;o1&quot;&gt;&lt;span class=&quot;bx&quot;&gt;&lt;/span&gt;&lt;span&gt;Page:Focus (the one-editor redesign)&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;opt&quot; id=&quot;o2&quot;&gt;&lt;span class=&quot;bx&quot;&gt;&lt;/span&gt;&lt;span&gt;StartPromptsPro&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;opt&quot; id=&quot;o3&quot;&gt;&lt;span class=&quot;bx&quot;&gt;&lt;/span&gt;&lt;span&gt;SpecUi ^ui-space-1 (no wasted space)&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;div class=&quot;grp&quot; id=&quot;g2&quot;&gt;&lt;h4&gt;WelcomeKind: which? (pick one)&lt;/h4&gt;
  &lt;div class=&quot;opt&quot; id=&quot;p1&quot;&gt;&lt;span class=&quot;bx r&quot;&gt;&lt;/span&gt;&lt;span&gt;A. short&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;opt&quot; id=&quot;p2&quot;&gt;&lt;span class=&quot;bx r&quot;&gt;&lt;/span&gt;&lt;span&gt;B. with the 3 cards (my pick)&lt;/span&gt;&lt;/div&gt;
  &lt;div class=&quot;note&quot;&gt;&lt;div class=&quot;ed&quot; id=&quot;n1&quot; data-ph=&quot;Why? (optional)&quot;&gt;&lt;/div&gt;&lt;span class=&quot;mic&quot; id=&quot;mic&quot;&gt;🎤&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;button class=&quot;go&quot; id=&quot;go&quot;&gt;CONTINUE&lt;/button&gt;`;
 $(&quot;#g1&quot;).classList.add(&quot;flash&quot;);$(&quot;#g2&quot;).classList.add(&quot;flash&quot;);await wait(1000);
 cap(&quot;3 · Tick, pick, talk into the note, CONTINUE.&quot;);
 for(const id of [&quot;#o1&quot;,&quot;#o3&quot;]){await tap($(id),8,8);$(id).classList.add(&quot;on&quot;)}
 await tap($(&quot;#p2&quot;),8,8);$(&quot;#p2&quot;).classList.add(&quot;on&quot;);
 await tap($(&quot;#mic&quot;));$(&quot;#mic&quot;).style.background=&quot;var(--accent)&quot;;await typeInto($(&quot;#n1&quot;),&quot;cards read better on the phone&quot;,55);$(&quot;#mic&quot;).style.background=&quot;&quot;;
 await wait(400);await tap($(&quot;#go&quot;));
 bubble(&quot;pad: drafts to publish\n**Publish? (tick each)**\n- [x] Page:Focus\n- [x] SpecUi ^ui-space-1\n**WelcomeKind: which?**\n- [x] B. with the 3 cards\nNote: cards read better on the phone&quot;,true);
 $(&quot;#g1&quot;).classList.add(&quot;done&quot;);$(&quot;#g2&quot;).classList.add(&quot;done&quot;);await wait(1300);
 bubble(&quot;Published Page:Focus and SpecUi; WelcomeKind B it is.&quot;,false,&quot;designer-90&quot;);
 cap(&quot;Tap instead of type. Answered groups grey out.&quot;);await wait(3500);
}
controls(run);
&lt;/script&gt;
&lt;/div&gt;"></iframe>
    </div>
  </div>
</section>
<!-- Creator: ThoughtFlow, from Blurb#thoughtflow (P-1284, razie 2026-10-11: its blurb, then the animation) -->
<section class="door t3 extra" id="creator-thoughtflow">
  <div class="wrap">
    <span class="badge">ThoughtFlow</span>
    <h2>Think out loud. Your agents answer in place.</h2>
    <p>Turn on <b>ThoughtFlow</b> and your thoughts sort themselves into <b>Chats</b>, <b>Inbox</b> and <b>Others</b>. Write <code>@designer</code> and <b>Send</b>: the answer lands inside the thought, and the whole card becomes a chat on that topic that you can pick up any time. Get your AI's opinion, ask a question on that topic, and see the answer in the same place. The card turns amber when it's your turn; happy with it? Tick it and it goes as <i>ok, go</i>.</p>
    <div style="margin-top:16px">
<div id="btf">
<style>
#btf{font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;color:#ecebe6;background:#141413;border:1px solid #33322f;border-radius:14px;padding:14px;max-width:720px;margin:auto;position:relative;overflow:hidden;min-height:310px;box-sizing:border-box}
#btf *{box-sizing:border-box}
#btf .box{border:1px solid #4a4945;border-radius:9px;background:#1d1d1b;padding:8px 10px;min-height:40px;font-size:13px}
#btf .cur{display:inline-block;width:2px;height:14px;background:#6aa3ff;vertical-align:-2px;animation:btfb 1s steps(1) infinite}
@keyframes btfb{50%{opacity:0}}
#btf .btn{display:inline-block;border:1px solid #4a4945;border-radius:7px;padding:3px 10px;font-size:12px;background:#22211f;color:#ecebe6;transition:transform .15s}
#btf .btn.p{background:#3b82f6;border-color:#3b82f6;color:#fff}
#btf .btn.press{transform:scale(.9)}
#btf .card{background:#1d1d1b;border:1px solid #33322f;border-radius:9px;padding:7px 9px;font-size:12px;transition:all .5s;opacity:1}
#btf .card.in{animation:btfin .5s ease}
@keyframes btfin{from{opacity:0;transform:translateY(-12px) scale(.9)}}
#btf .t{font-size:11px;margin-right:5px}
#btf .bug{color:#e0a050}#btf .idea{color:#e0a050}#btf .blurb{color:#e0a050}
#btf .chip{display:inline-block;border-radius:999px;padding:0 7px;font-size:11px;margin-right:4px}
#btf .sent{border:1px dashed #6b6963;color:#9c9a93}
#btf .aq{border:1px solid #d0605a;color:#f09590}
#btf .wt{border:1px solid #c99a2e;color:#e5c06a}
#btf .go{background:#1f3d22;color:#8fd19a;border:1px solid #3b6d41}
#btf .sec{font-size:10px;letter-spacing:.08em;color:#9c9a93;margin:8px 0 4px}
#btf .ck{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid #8a8880;vertical-align:-2px;margin-right:6px}
#btf .ck.on{background:#3b82f6;border-color:#3b82f6}
#btf .fade{opacity:0!important;transform:scale(.85)}
#btf .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
#btf .col{min-height:200px;border:1px dashed #2c2b28;border-radius:9px;padding:6px}
#btf .col .card{margin-bottom:6px}
#btf .ans{margin-top:5px;padding:5px 7px;background:#262523;border-radius:6px;color:#cfcdc6;font-size:11px}
#btf .ans i{font-style:normal;color:#6aa3ff}
#btf .card.you{border:2px solid #c99a2e}
</style>
<div class="box"><span id="btf-tx"></span><span class="cur"></span></div><div style="margin-top:6px;text-align:right"><span class="btn" id="btf-save">Save it</span> <span class="btn p" id="btf-send">Send → @designer</span></div>
<div class="row"><div class="col"><div class="sec">CHATS</div><div id="btf-chats"></div></div><div class="col"><div class="sec">INBOX</div><div id="btf-streak"></div></div><div class="col"><div class="sec">OTHERS</div><div id="btf-others"></div></div></div>
<script type="text/lazy">
(()=>{const $=i=>document.getElementById("btf-"+i),sl=ms=>new Promise(r=>setTimeout(r,ms));
async function type(el,s,ms){el.textContent="";for(const c of s){el.textContent+=c;await sl(ms||32)}}
async function press(b){b.classList.add("press");await sl(200);b.classList.remove("press")}
function mk(h,c){const d=document.createElement("div");d.className=c||"card in";d.innerHTML=h;return d}

async function run(){for(;;){for(const k of["chats","streak","others"])$(k).innerHTML="";
await type($("tx"),"#bug search misses archived thoughts");await press($("save"));$("tx").textContent="";$("streak").prepend(mk('<span class="ck on"></span><span class="t bug">#bug</span>search misses archived thoughts'));await sl(900);
await type($("tx"),"#note call the bank about the card");await press($("save"));$("tx").textContent="";$("others").prepend(mk('<span class="t" style="color:#9c9a93">#note</span>call the bank about the card'));await sl(900);
await type($("tx"),"@designer should Focus have its own help page?");await sl(300);await press($("send"));$("tx").textContent="";
const c=mk('<div>should Focus have its own help page?</div><div style="margin-top:4px"><span class="chip sent">#sent</span><span style="font-size:11px;color:#9c9a93">waiting on designer</span></div>');$("chats").prepend(c);await sl(2400);
c.className="card in you";c.innerHTML='<div><span class="ck"></span>should Focus have its own help page?</div><div class="ans"><i>designer:</i> yes, a short one linked from the ⓘ on the Focus title. Go?</div><div style="margin-top:4px"><span class="chip aq">#ai-question</span></div>';await sl(2600);
c.querySelector(".ck").classList.add("on");c.querySelector(".chip").insertAdjacentHTML("beforebegin",'<span class="chip go">✓ go</span>');await sl(2400)}}
run()})();
</script>
</div>
    </div>
  </div>
</section>
<!-- Creator: Focus, from Blurb#focus-all (P-1284, razie 2026-10-11: its blurb, then the animation) -->
<section class="door t3 extra" id="creator-focus">
  <div class="wrap">
    <span class="badge">Focus</span>
    <h2>Gather it, think it through, send it as tasks.</h2>
    <p>Search and tick what belongs together; it goes <i>poof</i> into a Focus and the map spins up. Add your thoughts one by one, and each lights what it names. Ask one question with <b>Thread now</b> and the answer comes back into that thought. Ask for a mockup and your designer shows it on the spot; the one you like joins. <b>Send focus</b>, split by feature, and it lands in the pipeline as tasks.</p>
    <div style="margin-top:16px">
<div id="bfc">
<style>
#bfc{font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;color:#ecebe6;background:#141413;border:1px solid #33322f;border-radius:14px;padding:14px;max-width:660px;margin:auto;position:relative;overflow:hidden}
#bfc *{box-sizing:border-box}
#bfc .cap{min-height:20px;font-size:13px;color:#9c9a93;margin:0 0 10px}
#bfc .cap b{color:#ecebe6}
#bfc .stage{position:relative;height:440px}
#bfc .sc{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s}
#bfc .sc.on{opacity:1}
#bfc .bar{display:flex;align-items:center;gap:8px;border:1px solid #4a4945;border-radius:9px;background:#1d1d1b;padding:7px 10px}
#bfc .bar i{color:#9c9a93;font-style:normal}
#bfc .cur{display:inline-block;width:2px;height:14px;background:#6aa3ff;vertical-align:-2px;animation:bfcb 1s steps(1) infinite}
@keyframes bfcb{50%{opacity:0}}
#bfc .res{margin-top:10px;display:grid;gap:6px}
#bfc .row{display:flex;align-items:center;gap:9px;border:1px solid #33322f;border-radius:9px;background:#1d1d1b;padding:7px 10px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s,border-color .2s,background .2s}
#bfc .row.in{opacity:1;transform:none}
#bfc .row.pick{border-color:#3b82f6;background:#17233a}
#bfc .ck{flex:0 0 15px;height:15px;border-radius:4px;border:1.5px solid #6b6a66;position:relative}
#bfc .row.pick .ck{background:#3b82f6;border-color:#3b82f6}
#bfc .row.pick .ck:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#bfc .kind{font-size:10px;letter-spacing:.06em;color:#9c9a93;width:52px}
#bfc .kind.t{color:#e0a050}
#bfc .tools{display:flex;gap:8px;align-items:center;margin-top:10px}
#bfc .btn{display:inline-block;border:1px solid #4a4945;border-radius:7px;padding:3px 10px;font-size:12px;background:#22211f;color:#ecebe6;transition:transform .15s}
#bfc .btn.p{background:#3b82f6;border-color:#3b82f6;color:#fff}
#bfc .btn.press{transform:scale(.9)}
#bfc .menu{border:1px solid #4a4945;border-radius:9px;background:#1d1d1b;padding:6px 10px;font-size:12px;opacity:0;transition:opacity .25s}
#bfc .menu.on{opacity:1}
#bfc .fly{position:absolute;border:1px solid #3b82f6;border-radius:9px;background:#17233a;padding:7px 10px;font-size:13px;white-space:nowrap;overflow:hidden;transition:all .7s cubic-bezier(.6,-.2,.7,1);z-index:3}
#bfc .fly.go{left:calc(50% - 22px)!important;top:110px!important;width:44px!important;height:44px!important;border-radius:50%;opacity:0;color:transparent;background:#6aa3ff}
#bfc .orb{position:absolute;left:calc(50% - 38px);top:94px;width:76px;height:76px;border-radius:50%;background:#6aa3ff;color:#0d1b33;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.1;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);z-index:2}
#bfc .orb.on{transform:scale(1)}
#bfc .puff{position:absolute;width:10px;height:10px;border-radius:50%;background:#9fc2ff;left:calc(50% - 5px);top:127px;opacity:.9;transition:transform .6s ease-out,opacity .6s;z-index:1}
#bfc svg{display:block;width:100%;height:200px}
#bfc .lobe{fill:#1d1d1b;stroke:#33322f}
#bfc .spk{stroke:#4a4945;stroke-width:1.4;transition:opacity .4s}
#bfc .lnk{stroke:#6b6a66;stroke-width:1.2;stroke-dasharray:4 4;fill:none;transition:opacity .4s}
#bfc .nd{opacity:0;transition:opacity .4s}
#bfc .nd.on{opacity:1}
#bfc .nd text{fill:#9c9a93;font-size:11px;text-anchor:middle}
#bfc .nd.hot text{fill:#ecebe6;font-weight:700}
#bfc .nd.hot circle,#bfc .nd.hot rect{stroke-width:3.5}
#bfc .spin{transform-origin:360px 100px;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
#bfc .spark{fill:#9fc2ff}
#bfc .lo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
#bfc .notes{border:1px solid #3b82f6;border-radius:9px;background:#1d1d1b;padding:7px 9px;font-size:12.5px;min-height:96px}
#bfc .nhead{font:600 10px ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#6aa3ff;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;gap:6px}
#bfc .newt{border:1px dashed #4a4945;border-radius:7px;padding:5px 7px;margin-top:6px;min-height:28px;font-size:12.5px}
#bfc .cards{display:flex;flex-direction:column;gap:5px}
#bfc .card{border:1px solid #33322f;border-radius:10px;background:#1d1d1b;padding:6px 9px;font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s,border-color .4s,background .4s,box-shadow .4s}
#bfc .card.in{opacity:1;transform:none}
#bfc .card b{font-weight:600}
#bfc .card .m{display:flex;gap:5px;align-items:center;margin-top:3px;font-size:10.5px;color:#9c9a93}
#bfc .st{border:1px solid currentColor;border-radius:999px;padding:0 6px;white-space:nowrap}
#bfc .st.sent{color:#9c9a93;border-style:dashed}#bfc .st.ask{color:#f08a92}#bfc .st.done{color:#6cc08a}#bfc .st.mock{color:#e0a050}
#bfc .card.amber{border-color:#d99a00;box-shadow:inset 3px 0 0 #d99a00;background:#2a2416}
#bfc .ans{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s;margin-top:3px;padding-left:7px;border-left:2px solid #33322f;font-size:11.5px}
#bfc .ans.on{max-height:40px;opacity:1}
#bfc .esp{position:absolute;left:50%;top:6px;transform:translate(-50%,-10px);border:1px solid #c5a0f5;border-radius:999px;background:#2a2038;color:#ecebe6;font-size:12px;padding:5px 12px;opacity:0;transition:opacity .3s,transform .3s;z-index:5;white-space:nowrap}
#bfc .esp.on{opacity:1;transform:translate(-50%,0)}
#bfc .mock{position:absolute;left:18%;right:18%;top:40px;height:150px;border:2px solid #c5a0f5;border-radius:12px;background:#1d1d1b;padding:10px;opacity:0;transform:scale(.9);transition:all .5s;z-index:4}
#bfc .mock.on{opacity:1;transform:none}
#bfc .mock.away{opacity:0;transform:translate(160px,-40px) scale(.2)}
#bfc .mk1{height:18px;border-radius:5px;background:#33322f;margin-bottom:8px;width:60%}
#bfc .mk2{height:52px;border-radius:8px;background:#2e2419;border:1px solid #e0a050;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#e0a050;font-size:12px}
#bfc .mk3{height:12px;border-radius:5px;background:#33322f;width:80%}
#bfc .ask{position:absolute;left:50%;top:110px;transform:translate(-50%,8px);width:320px;border:1px solid #4a4945;border-radius:12px;background:#22211f;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .3s;z-index:6}
#bfc .ask.on{opacity:1;transform:translate(-50%,0)}
#bfc .sw{display:inline-flex;border:1px solid #4a4945;border-radius:999px;overflow:hidden;font-size:11px;margin:8px 0}
#bfc .sw span{padding:3px 9px;transition:background .25s,color .25s}
#bfc .sw .on{background:#2e2419;color:#f0a35e;font-weight:700}
#bfc .shrink{transition:transform .7s,opacity .7s}
#bfc .shrink.go{transform:scale(.2);opacity:0}
#bfc .sentmsg{position:absolute;left:24px;top:150px;font-size:15px;color:#8fd19a;opacity:0;transition:opacity .5s}
#bfc .sentmsg.on{opacity:1}
#bfc .sentmsg small{display:block;color:#9c9a93;font-size:12px;margin-top:4px}
#bfc .pipe{position:absolute;right:0;top:20px;width:230px;bottom:10px;border-left:1px dashed #33322f;padding-left:12px;opacity:0;transition:opacity .4s}
#bfc .ph{font-size:10px;letter-spacing:.08em;color:#9c9a93;margin-bottom:8px}
#bfc .task{border:1px solid #3b6d41;background:#1f3d22;color:#8fd19a;border-radius:8px;padding:7px 9px;font-size:12px;margin-bottom:8px;opacity:0;transform:translateX(-180px) scale(.6);transition:all .7s cubic-bezier(.2,.8,.2,1)}
#bfc .task.on{opacity:1;transform:none}
#bfc .task b{color:#6aa3ff;font-weight:600;margin-right:4px}
</style>
<p class="cap" id="bfc-cap"></p>
<div class="stage" id="bfc-stage">
 <div class="sc" id="bfc-s1">
  <div class="bar"><i>⌕</i><span id="bfc-q"></span><span class="cur"></span></div>
  <div class="res" id="bfc-res"></div>
  <div class="tools"><span class="btn" id="bfc-addf">Add to a Focus ▾</span><span class="menu" id="bfc-menu">+ New Focus: <b id="bfc-fname"></b></span></div>
 </div>
 <div class="orb" id="bfc-orb">invite<br>flow</div>
 <div class="sc" id="bfc-s3"><div class="shrink" id="bfc-mapw">
  <svg viewBox="0 0 720 200"><g class="spin" id="bfc-spin">
   <ellipse class="lobe" cx="215" cy="100" rx="160" ry="92"/><ellipse class="lobe" cx="505" cy="100" rx="160" ry="92"/>
   <g id="bfc-edges"></g><g id="bfc-nodes"></g>
   <circle cx="360" cy="100" r="34" fill="#6aa3ff"/><text x="360" y="96" text-anchor="middle" font-size="12" font-weight="700" fill="#0d1b33">invite</text><text x="360" y="110" text-anchor="middle" font-size="12" font-weight="700" fill="#0d1b33">flow</text>
   <circle class="spark" id="bfc-spark" r="3" cx="360" cy="100" opacity="0"/>
  </g></svg>
  <div class="lo">
   <div class="notes"><div class="nhead"><span>FOCUS · NEW THOUGHT</span><span><span class="btn" id="bfc-add">Add</span> <span class="btn p" id="bfc-send">Send focus</span></span></div><div class="newt"><span id="bfc-nt"></span><span class="cur"></span></div></div>
   <div class="cards" id="bfc-cards"></div>
  </div>
 </div>
 <div class="esp" id="bfc-esp">ESP · your designer is showing you: <b>Mockup · welcome card v1</b></div>
 <div class="mock" id="bfc-mock"><div class="mk1"></div><div class="mk2">Welcome to Acme! Here's who to ask.</div><div class="mk3"></div></div>
 <div class="ask" id="bfc-ask">Send this Focus to your designer: 5 thoughts, 3 topics and your notes?<br><span class="sw"><span id="bfc-one" class="on">one task</span><span id="bfc-split">split by feature</span></span><div style="text-align:right"><span class="btn p" id="bfc-go">Send</span></div></div>
 <div class="sentmsg" id="bfc-sent">✓ <b>invite flow</b> sent<small>split by feature: one task each</small></div>
 <div class="pipe" id="bfc-pipe"><div class="ph">PIPELINE</div><div class="task" id="bfc-t1"><b>P-1201</b>invites: what to do when one expires</div><div class="task" id="bfc-t2"><b>P-1202</b>onboarding: the welcome card, as in the mockup</div><div class="task" id="bfc-t3"><b>P-1203</b>email: invites pass Gmail's checks</div></div>
</div>
</div>
<script type="text/lazy">
(()=>{const $=i=>document.getElementById("bfc-"+i),sl=ms=>new Promise(r=>setTimeout(r,ms)),NS="http://www.w3.org/2000/svg";
const cap=h=>{$("cap").innerHTML=h};
async function type(el,s,ms){el.textContent="";for(const c of s){el.textContent+=c;await sl(ms||42)}}
async function press(b){b.classList.add("press");await sl(220);b.classList.remove("press")}
const R=[["THOUGHT","expired invite shows a raw error",1],["TOPIC","Invites",1],["THOUGHT","invite emails land in spam",0],["THOUGHT","welcome card after joining",1],["TOPIC","Invite settings",0]];
// the map: topics right; the model left (violet classes, teal features); [kind,label,x,y,shown from the start]
const N=[["t","Invites",500,38,1],["t","Onboarding",610,135,1],["c","Invite",170,40,1],["c","Member",108,112,1],["f","Joining a project",290,48,1],["c","Project",210,172,0],["f","Email",470,170,0],["t","Mockup v1",640,60,0]];
const col={t:"#e0a050",c:"#a98ae8",f:"#4fb8a8"};
function draw(){const e=$("edges"),n=$("nodes");e.innerHTML="";n.innerHTML="";
N.forEach((x,i)=>{const l=document.createElementNS(NS,"line");l.setAttribute("class","spk");l.setAttribute("x1",360);l.setAttribute("y1",100);l.setAttribute("x2",x[2]);l.setAttribute("y2",x[3]);l.style.opacity=0;l.id="bfc-l"+i;e.appendChild(l);
const g=document.createElementNS(NS,"g");g.setAttribute("class","nd");g.id="bfc-n"+i;
g.innerHTML=(x[0]==="t"?`<rect x="${x[2]-12}" y="${x[3]-12}" width="24" height="24" rx="6" fill="#1d1d1b" stroke="${col.t}" stroke-width="2"/>`:`<circle cx="${x[2]}" cy="${x[3]}" r="9" fill="#1d1d1b" stroke="${col[x[0]]}" stroke-width="2"/>`)+`<text x="${x[2]}" y="${x[3]+(x[3]<100?-16:24)}">${x[1]}</text>`;n.appendChild(g)})}
const show=i=>{$("l"+i).style.opacity=1;$("n"+i).classList.add("on")};
async function spark(i){const s=$("spark"),x=N[i];s.setAttribute("opacity",1);for(let k=0;k<=10;k++){s.setAttribute("cx",360+(x[2]-360)*k/10);s.setAttribute("cy",100+(x[3]-100)*k/10);await sl(26)}s.setAttribute("opacity",0)}
function hot(names){N.forEach((x,i)=>$("n"+i).classList.toggle("hot",names.includes(x[1])))}
function card(t,st,sc){const c=document.createElement("div");c.className="card";c.innerHTML=`<b>${t}</b><div class="ans"></div><div class="m"><span class="st ${sc||"sent"}">${st}</span></div>`;$("cards").prepend(c);setTimeout(()=>c.classList.add("in"),30);while($("cards").children.length>4)$("cards").lastChild.remove();return c}
async function run(){for(;;){
["s1","s3"].forEach(s=>$(s).classList.remove("on"));$("orb").classList.remove("on");["ask","esp","mock","sent"].forEach(k=>$(k).classList.remove("on"));$("mock").classList.remove("away");$("pipe").style.opacity=0;["t1","t2","t3"].forEach(t=>$(t).classList.remove("on"));
$("mapw").classList.remove("go");$("res").innerHTML="";$("menu").classList.remove("on");$("fname").textContent="";$("nt").textContent="";$("q").textContent="";$("cards").innerHTML="";$("one").className="on";$("split").className="";
draw();$("spin").style.transition="none";$("spin").style.transform="rotate(-140deg) scale(.4)";
// 1 search, tick, add to a new Focus
$("s1").classList.add("on");cap("<b>1 · Search</b> for what's on your mind");await sl(500);await type($("q"),"invite",100);await sl(300);
const rows=R.map(r=>{const d=document.createElement("div");d.className="row";d.innerHTML=`<span class="ck"></span><span class="kind${r[0]==="TOPIC"?" t":""}">${r[0]}</span><span>${r[1]}</span>`;$("res").appendChild(d);return d});
for(const d of rows){d.classList.add("in");await sl(130)}await sl(400);
cap("<b>2 · Tick</b> what belongs together");for(let i=0;i<R.length;i++)if(R[i][2]){rows[i].classList.add("pick");await sl(480)}
await sl(250);cap("<b>3 · Add to a Focus</b>, a new one");await press($("addf"));$("menu").classList.add("on");await sl(350);await type($("fname"),"invite flow",65);await sl(500);
// poof
const st=$("stage"),box=st.getBoundingClientRect(),fl=[];
rows.forEach((d,i)=>{if(!R[i][2])return;const r=d.getBoundingClientRect(),f=document.createElement("div");f.className="fly";f.textContent=d.textContent.replace(/^(THOUGHT|TOPIC)/,"");f.style.left=(r.left-box.left)+"px";f.style.top=(r.top-box.top)+"px";f.style.width=r.width+"px";f.style.height=r.height+"px";st.appendChild(f);fl.push(f)});
$("s1").classList.remove("on");await sl(60);fl.forEach((f,i)=>setTimeout(()=>f.classList.add("go"),i*110));await sl(780);
$("orb").classList.add("on");const pf=[];for(let k=0;k<10;k++){const p=document.createElement("div");p.className="puff";st.appendChild(p);pf.push(p)}
await sl(30);pf.forEach((p,k)=>{const a=k/10*6.283;p.style.transform=`translate(${Math.cos(a)*70}px,${Math.sin(a)*70}px) scale(.3)`;p.style.opacity=0});
cap("<b>Poof:</b> they're one Focus now");await sl(850);fl.concat(pf).forEach(x=>x.remove());
// the map spins in
$("orb").classList.remove("on");$("s3").classList.add("on");await sl(50);$("spin").style.transition="";$("spin").style.transform="rotate(0) scale(1)";
card("welcome card after joining","in focus");card("expired invite shows a raw error","in focus");
cap("<b>4 · The map</b>: its topics on the right, the model they name on the left");await sl(700);
for(let i=0;i<N.length;i++)if(N[i][4]){show(i);await sl(200)}await spark(0);await spark(2);await sl(300);
// three new thoughts, each joins and lights the map
const T=[["a new Member should see who to ask",["Member"],[]],["the Project's welcome card names its admin",["Project"],[5]],["invite email: say when the link expires",["Email","Invite"],[6]]];
let k=0;for(const [t,h,add] of T){k++;cap(`<b>5 · Think it through:</b> thought ${k} of 3 joins the Focus, and lights what it names`);
await type($("nt"),t,34);await sl(250);await press($("add"));$("nt").textContent="";card(t,"in focus");for(const i of add){show(i);spark(i)}hot(h);await sl(1100)}hot([]);
// thread now on one; the answer comes back into it
cap("<b>6 · One question?</b> Thread now on that thought: the answer comes back into it");
const c=$("cards").children[0];c.querySelector(".st").textContent="with designer";await sl(1400);
const a=c.querySelector(".ans");a.innerHTML="<b>designer:</b> say it in the email and on the page?";a.classList.add("on");c.classList.add("amber");c.querySelector(".st").className="st ask";c.querySelector(".st").textContent="ai-question";await sl(1800);
// a mockup, shown with ESP, joins
cap("<b>7 · Ask for a mockup:</b> your designer shows it to you on the spot");$("esp").classList.add("on");await sl(500);$("mock").classList.add("on");await sl(2000);
cap("<b>Like it?</b> It joins the Focus");$("esp").classList.remove("on");$("mock").classList.add("away");await sl(500);show(7);spark(7);hot(["Mockup v1"]);card("Mockup · welcome card v1","topic","mock");await sl(1300);hot([]);
// send it, split by feature
cap("<b>8 · Send focus</b>: as one task, or split by feature");await press($("send"));$("ask").classList.add("on");await sl(1100);
$("one").className="";$("split").className="on";await sl(900);await press($("go"));$("ask").classList.remove("on");
$("mapw").classList.add("go");$("pipe").style.opacity=1;$("sent").classList.add("on");await sl(500);cap("<b>9 · Pipeline</b>: one task per feature, picked up by your agents");
for(const t of ["t1","t2","t3"]){$(t).classList.add("on");await sl(550)}await sl(3600)}}
run()})();
</script>
</div>
    </div>
  </div>
</section>


<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="/app/Landing-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<small>prototype at scale</small></a>
    </div>
  </header>
</div>

<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>&nbsp;&nbsp;my-notes/<br>&nbsp;&nbsp;&nbsp;&nbsp;Topic/<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hl">Buying rules.md</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gold juniors.md<br>&nbsp;&nbsp;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>
<style>
#pro .bc .pc{opacity:1;transform:none}
#pro .bc .ribbon{opacity:0;transform:scale(.9)}#pro .bc .ribbon.in{opacity:1;transform:none}
#pro .bc{--b-acc:#8fb0cf;--b-acc2:#1e2a38;--b-hero1:#1d2633;--b-hero2:#15171c}
#pro .bc .body{grid-template-columns:1fr 1fr}
#pro .bc .body.one{grid-template-columns:1fr}
#pro .t1 .badge,#pro .badge{background:var(--slate-bg);color:var(--slate)}
#pro .bc .row{font-size:13px;padding:5px 0;border-top:1px solid var(--b-line)}#pro .bc .row:first-child{border-top:none}
#pro .bc .pipe,#pro .bc .dm{width:100%;height:auto;display:block;margin:4px 0}
#pro .bc .dm .box rect{fill:var(--b-card);stroke:var(--b-line);stroke-width:1.5}#pro .bc .dm .box.k rect{stroke:var(--b-acc)}
#pro .bc .dm text{fill:var(--b-ink);font:600 11px var(--body)}#pro .bc .dm .f{fill:var(--b-soft);font:400 9px var(--mono)}
#pro .bc .dm .lb{fill:var(--b-soft);font:400 9px var(--body)}#pro .bc .dm .rule{fill:#3ecf8e;font:600 10px var(--body)}
#pro .bc .pg{font-size:13px}#pro .bc .pgtop{display:flex;justify-content:space-between;font-weight:700;margin-bottom:6px}#pro .bc .pgtop span{color:#3ecf8e;font-weight:400;font-size:11px}
#pro .bc .orow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--b-line)}
#pro .bc .rbtn{font:700 11px var(--body);padding:3px 10px;border-radius:999px;background:var(--b-acc2);color:var(--b-acc);border:1px solid var(--b-acc);cursor:pointer}
#pro .bc .rbtn:disabled{opacity:.6;cursor:default}
#pro .bc .ptoast{min-height:16px;color:#3ecf8e;font-size:12px;margin:6px 0;opacity:0;transition:opacity .3s}#pro .bc .ptoast.in{opacity:1}
#pro .bc .stk{margin-top:6px;color:var(--b-soft);font-size:12px}#pro .bc .stk b{color:var(--b-ink)}
#pro .bc .tiny{color:var(--b-soft);font-size:12px;margin-top:6px}

#pro .bc .app{font-size:13px}
#pro .bc .appbar{display:flex;align-items:center;gap:12px;padding:8px 10px;background:var(--b-card);border-radius:10px;margin-bottom:10px}
#pro .bc .appbar b{font-family:var(--display);font-size:15px}
#pro .bc .atabs{display:flex;gap:12px;margin-left:6px}
#pro .bc .atabs span{color:var(--b-soft);font-size:12px}#pro .bc .atabs span.on{color:var(--b-acc);border-bottom:2px solid var(--b-acc);padding-bottom:2px}
#pro .bc .ava{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--b-acc2);color:var(--b-acc);font:700 10px/26px var(--body);text-align:center}
#pro .bc .apptop{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 8px}
#pro .bc .apptop h4{margin:0;font-family:var(--display);font-size:16px}
#pro .bc .srch{font-size:12px;color:var(--b-soft);border:1px solid var(--b-line);border-radius:999px;padding:4px 12px}
#pro .bc .otbl{width:100%;border-collapse:collapse}
#pro .bc .otbl th{text-align:left;font:700 10px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--b-soft);padding:6px 8px;border-bottom:1px solid var(--b-line)}
#pro .bc .otbl td{padding:8px;border-bottom:1px solid var(--b-line);font-size:13px}
#pro .bc .otbl td.n{text-align:right;font-variant-numeric:tabular-nums}
#pro .bc .chip{font:700 10px var(--body);padding:2px 9px;border-radius:999px}
#pro .bc .chip.paid{background:var(--b-acc2);color:var(--b-acc)}
#pro .bc .chip.ref{background:#3a2a22;color:#e0a06a}
#pro .bc .abtn{font:700 11px var(--body);padding:4px 12px;border-radius:999px;background:#3ecf8e;color:#06120c;border:none;cursor:pointer}
#pro .bc .abtn:disabled{opacity:.55;cursor:default;background:var(--b-acc2);color:var(--b-acc)}
#pro .bc .stkcard{margin-top:10px;padding:8px 12px;background:var(--b-card);border-radius:10px;color:var(--b-soft);font-size:12px}#pro .bc .stkcard b{color:var(--b-ink)}

#pro .bc.proto{padding:0;background:#0f1216}
#pro .bc.proto .hero{display:none}
#pro .bc.proto .body{display:flex;flex-direction:column;gap:12px}
#pro .bc.proto #lp5-left{border:none;background:transparent;padding:0;border-radius:0}
#pro .bc.proto #lp5-left>h5{display:none}
#pro .bc .appscreen{display:grid;grid-template-columns:132px 1fr;min-height:360px;background:#0f1216;border-radius:10px;overflow:hidden;border:1px solid #1e2630}
#pro .bc .side{background:#0b0e12;padding:14px 10px;display:flex;flex-direction:column;gap:3px;border-right:1px solid #1a222b}
#pro .bc .side .brand{font-family:var(--display);font-size:13px;color:#8fb0cf;margin-bottom:10px}
#pro .bc .side a{font-size:12px;color:#8a97a5;padding:6px 8px;border-radius:7px}
#pro .bc .side a.on{background:#182230;color:#cfe0f0}
#pro .bc .main{padding:14px 16px}
#pro .bc .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#pro .bc .mhead h4{margin:0;font-family:var(--display);font-size:17px;color:#e6edf3}
#pro .bc .hr{display:flex;align-items:center;gap:10px}
#pro .bc .main .srch{font-size:12px;color:#8a97a5;border:1px solid #27313c;border-radius:999px;padding:4px 12px}
#pro .bc .main .ava{width:26px;height:26px;border-radius:50%;background:#182230;color:#8fb0cf;font:700 10px/26px var(--body);text-align:center}
#pro .bc .toolbar{display:flex;align-items:center;gap:6px;margin-bottom:10px}
#pro .bc .seg{font:600 11px var(--body);color:#8a97a5;padding:4px 10px;border-radius:999px;border:1px solid #27313c}
#pro .bc .seg.on{background:#182230;color:#cfe0f0;border-color:#2a3a4c}
#pro .bc .spacer{flex:1}
#pro .bc .new{font:700 11px var(--body);color:#06120c;background:#8fb0cf;border:none;border-radius:8px;padding:5px 12px;cursor:pointer}
#pro .bc.proto .otbl td,#pro .bc.proto .otbl th{color:#cfd7df;border-color:#1c2530}
#pro .bc.proto .otbl th{color:#6f7d8a}
#pro .bc.proto .stkcard{background:#131920;color:#8a97a5}
#pro .bc .otbl td .pass,#pro .bc .t .pass{display:inline-flex;align-items:center;gap:4px;color:#3ecf8e;font-weight:700}
#pro .bc .pass{color:#3ecf8e;font-weight:700}
#pro .bc.proto #lp5-tests{background:#0f1216;border:1px solid #1e2630;border-radius:10px;padding:12px}
#pro .bc.proto #lp5-tests h5{color:#8fb0cf}
#pro .bc.proto #lp5-tests .t td,#pro .bc.proto #lp5-tests .t th{color:#cfd7df;border-color:#1c2530}
#pro .bc.proto #lp5-tests .t th{color:#6f7d8a}

#pro .mic{display:none;align-items:center;gap:8px;margin:2px 0 8px;color:var(--b-acc,#8fb0cf)}
#pro .mic.on{display:flex}
#pro .mic .micico{width:15px;height:20px;flex:none}
#pro .mic .wav{display:inline-flex;align-items:center;gap:3px;height:18px}
#pro .mic .wav i{width:3px;height:6px;border-radius:2px;background:currentColor;opacity:.85;animation:lp5w 1s ease-in-out infinite}
#pro .mic .wav i:nth-child(2){animation-delay:.1s}#pro .mic .wav i:nth-child(3){animation-delay:.2s}
#pro .mic .wav i:nth-child(4){animation-delay:.3s}#pro .mic .wav i:nth-child(5){animation-delay:.15s}
#pro .mic .wav i:nth-child(6){animation-delay:.25s}#pro .mic .wav i:nth-child(7){animation-delay:.05s}
@keyframes lp5w{0%,100%{height:5px}50%{height:17px}}
#pro .mic .mtxt{font-size:11px;color:var(--b-soft)}


#pro .frame .bc{height:560px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
#pro .bc .hero,#pro .bc .body,#pro .bc .appscreen{flex:none}
#pro .bc.proto{height:560px}
#pro .bc .ribbon{margin-top:auto}
#pro .bc .appscreen{min-height:0}
</style>

<!--
  d2 landing: a Pipeline tab on the Creator and Pro sections (designer-built, Razie approved 2026-09-28).
  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>
<script>
/* P-1284 (razie 2026-10-11: "the animations should start when scrolling into frame"): a section's animation starts the first time it scrolls into view */
document.querySelectorAll('section').forEach(function(sec){
  var ss=sec.querySelectorAll('script[type="text/lazy"]'),fs=sec.querySelectorAll('iframe[data-srcdoc]');if(!ss.length&&!fs.length)return;var done=false;
  window.lpView(sec,function(){if(done)return;done=true;
    fs.forEach(function(f){f.srcdoc=f.getAttribute('data-srcdoc')});
    ss.forEach(function(o){var n=document.createElement('script');n.textContent=o.textContent;o.parentNode.replaceChild(n,o)})});
});
</script>

<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: &lt;&gt;Portfolio,',
    '               company: &lt;&gt;Company, shares: Number)',
    '',
    D + '<span class="k">when</span> price.changed (company, move) {',
    '  <span class="k">if</span> (move &gt; 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');
  var pre = document.getElementById('srcpre'); if (pre) pre.innerHTML = src; // the source view was removed from the page; don't let its leftover script stop the rest


  // 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 &amp; 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')); } });
  });
  if (url && screen) show('co'); // the modeller stage was removed from the page
  // 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>