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 hi" href="#hero"><span class="lv">Hero</span><span class="sp">Hobby apps</span><span class="rl">Your AI makes your app</span></a>
        <a class="rung" href="/app/Landing-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="#hero">learn</a>, <a href="/app/Landing-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>
<section class="door t2 t6" id="hero">
  <div class="wrap">
    <div class="lp-top lp-one">
      <h2>Talk your app into existence. Watch it grow.</h2>
      <p class="who">For you, your family, your club.</p>
      <div class="lp-row">
        <div class="doors"><a class="btn" href="/signup?next=/home">Start an app</a><a class="btn ghost" href="#hero" onclick="return false" id="lp3-replay">Watch it again</a></div>
        <div class="stat"><span class="big">3 sentences</span><span class="small">From an empty project to a live app. That's the bar.</span></div>
      </div>
    </div>
    <div class="split">
      <div class="chat">
        <div class="hd">You and your AI</div>
        <div class="tk" id="lp3-tk" aria-live="polite"></div>
        <div class="mic" id="lp3-mic" aria-hidden="true"><span class="mb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><div class="wave"><i style="--h:10px;animation-delay:-0.00s"></i><i style="--h:18px;animation-delay:-0.07s"></i><i style="--h:26px;animation-delay:-0.14s"></i><i style="--h:14px;animation-delay:-0.21s"></i><i style="--h:22px;animation-delay:-0.28s"></i><i style="--h:28px;animation-delay:-0.35s"></i><i style="--h:12px;animation-delay:-0.42s"></i><i style="--h:20px;animation-delay:-0.49s"></i><i style="--h:26px;animation-delay:-0.56s"></i><i style="--h:16px;animation-delay:-0.63s"></i><i style="--h:24px;animation-delay:-0.70s"></i><i style="--h:10px;animation-delay:-0.77s"></i><i style="--h:18px;animation-delay:-0.84s"></i><i style="--h:22px;animation-delay:-0.91s"></i><i style="--h:14px;animation-delay:-0.98s"></i><i style="--h:26px;animation-delay:-1.05s"></i><i style="--h:12px;animation-delay:-1.12s"></i><i style="--h:20px;animation-delay:-1.19s"></i></div><span class="ml" id="lp3-ml">Tap to talk</span></div>
        <div class="ctl">
          <div class="dots" id="lp3-dots"><button data-s="0" aria-label="Start">0</button><button data-s="1" aria-label="Ask for the app">1</button><button data-s="2" aria-label="Change the colours">2</button><button data-s="3" aria-label="Publish">3</button><button data-s="4" aria-label="Add a book">4</button></div>
          <button class="nx" id="lp3-next">Next ›</button>
        </div>
      </div>
      <div class="frame">
        <div class="chrome"><i></i><i></i><i></i><span class="url" id="lp3-url">demo-1.aiputty.com/Home</span><span class="pill" id="lp3-pill">draft · only you</span></div>
        <div class="bc" id="lp3-bc">
          <div class="home" id="lp3-home"><div class="top"><b>Home</b><span>demo-1 · your project</span></div><div id="lp3-hb"></div></div>
          <div class="pc hero"><h3>The Tuesday Book Club</h3><p>Reading together since today · 6 members</p><nav><span class="on">Books</span><span>Members</span><span>Meetings</span></nav></div>
          <div class="body">
            <div class="pc card"><h5>Reading now</h5><div class="now"><div class="cover">The Salt Road<small>M. Arden</small></div><div><b>The Salt Road</b><span class="by">by M. Arden · 312 pages</span><div class="prog"><i></i></div><span class="tiny">week 1 of 3 · chapters 1–6</span></div></div></div>
            <div class="pc card meet"><h5>Next meeting</h5><b>Tue 14 Oct, 7 pm</b><span class="tiny">at Maya's · bring a question</span><div class="who"><i style="background:#b4532a">MA</i><i style="background:#3d6b8f">JR</i><i style="background:#6b8f3d">SK</i><i style="background:#8f3d6b">LT</i><i style="background:#5a5a8f">PD</i><i style="background:#8f7a3d">RC</i></div></div>
            <div class="pc card shelf" id="lp3-shelf"><h5>Our shelf</h5><div class="row"><span>The Salt Road · M. Arden</span><span class="tag">reading</span></div><div class="row"><span>Up next: vote by Sunday</span><span class="tiny">3 suggestions</span></div><div class="row"><span class="tiny">Books read since today: 0, your first one is on its way</span></div></div>
          </div>
          <div class="ribbon" id="lp3-ribbon">● Live at bookclub.aiputty.com</div>
        </div>
      </div>
    </div>
  </div>
  <div class="wrap minis">
    <div><strong>Talk</strong>Say what you want, as you would to a person. Your AI asks only when it has to.</div>
    <div><strong>Watch</strong>The real page grows beside the chat, one answer at a time. Undo is one sentence.</div>
    <div><strong>Publish</strong>"Publish it" puts it live at its own address. Keep talking; it keeps growing.</div>
  </div>
</section>
<script>
(function(){
  var tk=document.getElementById('lp3-tk'); if(!tk) return;
  var bc=document.getElementById('lp3-bc'), pcs=bc.querySelectorAll('.pc'),
      url=document.getElementById('lp3-url'), pill=document.getElementById('lp3-pill'), rib=document.getElementById('lp3-ribbon'),
      dots=document.querySelectorAll('#lp3-dots button'), nx=document.getElementById('lp3-next');
  var S=[null,
    {me:'I want an app that tracks the books our club reads, starting today.', ai:'Done. Tap the new Book club tile on your home page.'},
    {me:'Cool. Change the colour scheme to dark, with a green tint.', ai:'Done.'},
    {me:'OK, publish it.', ai:'Done. It\u2019s live at bookclub.aiputty.com.'},
    {me:'I\u2019m reading The Cartographer of Lost Rivers, by Elena Marsh.', ai:'Added to the top of your list.'}];
  var cur=0, timers=[];
  function later(f,ms){timers.push(setTimeout(f,ms));}
  function bub(c,t){var d=document.createElement('div');d.className='b '+c;d.textContent=t;tk.appendChild(d);}
  var home=document.getElementById('lp3-home'), hb=document.getElementById('lp3-hb');
  var NONE='<div class="none"><b>No apps here yet.</b>Ask your AI for one.</div>';
  var TILE='<div class="grid"><div class="tile" id="lp3-tile"><div class="t">Book club</div><div class="m">new · just now</div></div></div>';
  function chrome(s,where){
    var live=s>=3; url.textContent=live?'bookclub.aiputty.com':('demo-1.aiputty.com/'+where); url.classList.toggle('live',live);
    pill.textContent=live?'live · public':'draft · only you'; pill.classList.toggle('live',live); rib.classList.toggle('in',live);
  }
  var shelf=document.getElementById('lp3-shelf');
  function book(s){
    var r=document.getElementById('lp3-nb');
    if(s<4){ if(r) r.remove(); return; }
    if(!r){ r=document.createElement('div'); r.id='lp3-nb'; r.className='row nb'; r.innerHTML='<span><b>The Cartographer of Lost Rivers</b> · Elena Marsh</span><span class="tag">you\u2019re reading</span>'; shelf.insertBefore(r, shelf.querySelector('.row')); }
  }
  function page(s,grow){
    book(s);
    bc.classList.toggle('dark',s>=2);
    if(s<1){ hb.innerHTML=NONE; home.classList.remove('away'); pcs.forEach(function(p){p.classList.remove('in');}); chrome(0,'Home'); return; }
    if(!grow){ home.classList.add('away'); pcs.forEach(function(p){p.classList.add('in');}); chrome(s,'BookClub'); return; }
    // grow: tile appears on the empty home, gets tapped, then the club page builds
    pcs.forEach(function(p){p.classList.remove('in');}); home.classList.remove('away'); hb.innerHTML=TILE; chrome(s,'Home');
    later(function(){var t=document.getElementById('lp3-tile'); if(t) t.classList.add('tap');},2600);
    later(function(){home.classList.add('away'); chrome(s,'BookClub');
      pcs.forEach(function(p,i){ later(function(){p.classList.add('in');},300+i*650); });},3000);
  }
  function mark(s){dots.forEach(function(b){b.classList.toggle('on',+b.getAttribute('data-s')===s);}); nx.textContent=s>=4?'Again ↺':'Next ›';}
  var mic=document.getElementById('lp3-mic'), ml=document.getElementById('lp3-ml');
  function talk(on){ if(!mic) return; mic.classList.toggle('on',on); ml.textContent=on?'Listening…':'Tap to talk'; }
  function go(s,anim){
    talk(false);
    timers.forEach(clearTimeout); timers=[]; cur=s; tk.innerHTML=''; mark(s);
    if(s===0){var t=document.createElement('div');t.className='typing';t.textContent='A new project. Say what you want.';tk.appendChild(t);page(0);return;}
    for(var i=1;i<s;i++){bub('me',S[i].me);bub('ai',S[i].ai);}
    page(s-1,false);
    if(!anim){bub('me',S[s].me);bub('ai',S[s].ai);page(s,false);return;}
    talk(true); bub('me',S[s].me);
    later(function(){talk(false);},2800);
    var w=document.createElement('div');w.className='typing';w.textContent='working…';
    later(function(){tk.appendChild(w);},3300);
    later(function(){w.remove();bub('ai',S[s].ai);page(s,s===1);},4800);
  }
  var auto=[];
  function stopAuto(){auto.forEach(clearTimeout);auto=[];}
  function play(){ stopAuto(); go(0); [[1,2500],[2,16500],[3,27500],[4,38500]].forEach(function(x){ auto.push(setTimeout(function(){ go(x[0],true); },x[1])); }); }
  dots.forEach(function(b){b.addEventListener('click',function(){stopAuto();go(+b.getAttribute('data-s'),true);});});
  nx.addEventListener('click',function(){ if(cur>=4) play(); else {stopAuto();go(cur+1,true);} });
  document.getElementById('lp3-replay').addEventListener('click',play);
  lpView(bc.closest('section')||bc.parentNode,play,function(){stopAuto();talk(false);timers.forEach(clearTimeout);timers=[];});
})();
</script>
<!-- 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>

<section class="door t2 extra" id="notebook">
  <div class="wrap grid">
    <div>
      <span class="badge">Living notebook</span>
      <h2>Keep everything you work on with AI in one living notebook.</h2>
      <p class="who">For you, your hobby, or your small team.</p>
      <p>Your chats with AI produce good stuff: plans, answers, lists, little tools. Then it scrolls away. Diesel keeps it, links it, and keeps it fresh, so next week you pick up where you left off.</p>
      <div class="chips" aria-label="Things people keep here">
        <span class="chip">Investment portfolio</span><span class="chip">Riding trails</span><span class="chip">Home budget</span>
        <span class="chip">Garden plan</span><span class="chip">Research notes</span><span class="chip">Club schedule</span>
      </div>
      <a class="btn" href="#notebook" aria-disabled="true">Start a notebook</a>
      <div class="soon">Opening soon.</div>
    </div>
    <div class="nstage">
      <div class="seg" role="group" aria-label="What the notebook does">
        <button type="button" data-s="cap" aria-pressed="true">Captures</button>
        <button type="button" data-s="con" aria-pressed="false">Connects</button>
        <button type="button" data-s="alive" aria-pressed="false">Stays alive</button>
      </div>
      <div class="scene" id="scene" aria-live="polite"></div>
    </div>
  </div>
  <div class="wrap minis">
    <div><strong>Captures</strong>What you and your AI make, without copy and paste.</div>
    <div><strong>Connects</strong>Notes, documents and the things you track, like companies, trades or trails, linked to each other.</div>
    <div><strong>Stays alive</strong>Numbers refresh, alerts fire, and pages rearrange as things change. Describe your world, get an app.</div>
  </div>
</section>

<!-- Hero: testimonial, from Blurb#testimonial-beach (P-1284, razie 2026-10-11) -->
<section class="door t2 extra" id="hero-testimonial">
  <div class="wrap">
    <blockquote class="lp-quote" style="font-size:calc(19px*var(--fz,1));line-height:1.5">My complex website was built half at my desk and half dictated on my phone, with the polishing touches added from the beach: I typed thoughts and sent them to my designer agent. A fully working prototype was ready for review by lunch.</blockquote>
    <p class="who">Built between the desk and the beach</p>
  </div>
</section>
<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>