zoe-pitches/essay-helper/summary.html

181 lines
12 KiB
HTML

<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Essay Helper &mdash; Executive Summary</title>
<style>
:root{
--ink:#F4F2EC; --surface:#FBFAF6; --card:#FFFEFB; --card-2:#F7F5EF;
--line:rgba(40,46,80,.12); --line-strong:rgba(40,46,80,.22);
--text:#1D2028; --muted:#5C616E; --faint:#868B98;
--accent:#333E8F; --accent-deep:#212A5E; --accent-glow:#5560BF;
--gold:#9A6A12; --coral:#B8543F;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
:root{ --ink:#15171C; --surface:#191C22; --card:#1E212A; --card-2:#23262F;
--line:rgba(150,160,222,.15); --line-strong:rgba(150,160,222,.28);
--text:#ECE9E2; --muted:#9AA0AE; --faint:#6F7583;
--accent:#98A2EF; --accent-deep:#BCC3F7; --accent-glow:#8189D8; --gold:#D7A44C; --coral:#E0796B; }
}
:root[data-theme="dark"]{ --ink:#15171C; --surface:#191C22; --card:#1E212A; --card-2:#23262F;
--line:rgba(150,160,222,.15); --line-strong:rgba(150,160,222,.28);
--text:#ECE9E2; --muted:#9AA0AE; --faint:#6F7583;
--accent:#98A2EF; --accent-deep:#BCC3F7; --accent-glow:#8189D8; --gold:#D7A44C; --coral:#E0796B; }
:root[data-theme="light"]{ --ink:#F4F2EC; --surface:#FBFAF6; --card:#FFFEFB; --card-2:#F7F5EF;
--line:rgba(40,46,80,.12); --line-strong:rgba(40,46,80,.22);
--text:#1D2028; --muted:#5C616E; --faint:#868B98;
--accent:#333E8F; --accent-deep:#212A5E; --accent-glow:#5560BF; --gold:#9A6A12; --coral:#B8543F; }
*{box-sizing:border-box}
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
.sheet{max-width:960px; margin:0 auto; padding:40px 34px 46px}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance}
p{margin:0}
.tnum{font-variant-numeric:tabular-nums}
a{color:inherit}
.head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px}
.head .brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:19px}
.spark{font-family:var(--serif); color:var(--accent); font-size:20px; line-height:1}
.head .doc{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:3px}
.head .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.pill{font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); display:inline-flex; gap:7px; align-items:center; text-decoration:none}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 7px var(--accent)}
a.pill{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,var(--line-strong))}
.thesis{margin:24px 0 4px; font-family:var(--serif); font-size:clamp(24px,3.6vw,32px); line-height:1.16; letter-spacing:-.015em; max-width:24ch}
.thesis .em{color:var(--accent); font-style:italic}
.deck{color:var(--muted); margin-top:12px; max-width:70ch; font-size:15.5px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
@media(max-width:720px){ .grid3{grid-template-columns:1fr} }
.blk{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 19px}
.blk .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
.blk .lab.g{color:var(--gold)}
.blk h3{font-size:16.5px; letter-spacing:-.01em; margin-bottom:6px}
.blk p{color:var(--muted); font-size:13.5px; line-height:1.5}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:16px}
.stats > div{background:var(--card); padding:15px 16px}
.stats .k{font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--accent)}
.stats .k.g{color:var(--gold)}
.stats .m{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-top:5px}
@media(max-width:720px){ .stats{grid-template-columns:1fr 1fr} }
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-top:16px}
@media(max-width:720px){ .split{grid-template-columns:1fr} }
.econ{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line-strong); border-radius:13px; padding:19px}
.econ .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.econ .eq{font-family:var(--mono); font-size:12.5px; color:var(--muted); line-height:1.9}
.econ .eq .hi{color:var(--accent); font-weight:600} .econ .eq .hg{color:var(--gold); font-weight:600}
.econ .big{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-top:8px}
.status{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:19px}
.status .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.srow{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px}
.srow .ic{width:18px;height:18px;flex:0 0 18px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:700}
.ic.ok{background:color-mix(in srgb,var(--accent) 20%,transparent); color:var(--accent)}
.ic.gate{background:color-mix(in srgb,var(--gold) 22%,transparent); color:var(--gold)}
.srow .g2{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint)}
.ask{margin-top:18px; background:var(--card-2); border:1px solid var(--line-strong); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; padding:16px 20px}
.ask .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.ask p{font-size:14.5px}
.ask b{color:var(--text)}
.foot{margin-top:22px; border-top:1px solid var(--line); padding-top:14px; font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot a{color:var(--accent); text-decoration:none}
@media print{
:root{ --ink:#fff; --surface:#fff; --card:#fff; --card-2:#F7F5EF; --line:rgba(40,46,80,.16); --line-strong:rgba(40,46,80,.28);
--text:#1D2028; --muted:#454b59; --faint:#5f6472; --accent:#2F3A86; --accent-deep:#212A5E; --gold:#8A5F10; --coral:#B8543F; }
*{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
@page{ size:A4; margin:10mm }
html,body{ background:#fff; font-size:11.5px; line-height:1.48 }
.sheet{ padding:0; max-width:none }
.head{ padding-bottom:12px } .head .right .pill.pdflink{ display:none }
.thesis{ font-size:21px; margin:14px 0 3px }
.deck{ font-size:12px; margin-top:8px }
.grid3{ margin-top:12px; gap:10px } .blk{ padding:13px 14px } .blk h3{ font-size:14.5px } .blk p{ font-size:11.5px; line-height:1.42 }
.stats{ margin-top:10px } .stats > div{ padding:11px 13px } .stats .k{ font-size:22px }
.split{ margin-top:10px; gap:10px } .econ,.status{ padding:14px } .econ .big{ font-size:19px }
.srow{ padding:3px 0 } .ask{ margin-top:11px; padding:12px 16px } .ask p{ font-size:12.5px }
.foot{ margin-top:12px; padding-top:10px }
.blk,.econ,.status,.ask,.stats{ break-inside:avoid }
}
</style>
<div class="sheet">
<div class="head">
<div>
<div class="brand"><span class="spark">&#9998;</span>Essay Helper</div>
<div class="doc">Executive Summary</div>
</div>
<div class="right">
<span class="pill"><span class="dot"></span>Shipped &middot; v1.4</span>
<a class="pill pdflink" href="https://zoe-pitches.mosaic.site/essay-helper/Essay-Helper-Executive-Summary.pdf">PDF &#8595;</a>
</div>
</div>
<p class="thesis">Give every student honest writing feedback &mdash; <span class="em">at the scale of AI.</span></p>
<p class="deck">Essay Helper is a Microsoft&nbsp;365 Word add-in that reviews a student&rsquo;s draft and coaches their citations from inside the document &mdash; and it is architecturally incapable of inventing a source. It coaches instead of ghost-writing, meets students where they already write, and it&rsquo;s built, tested, and shipped today.</p>
<div class="grid3">
<div class="blk">
<div class="lab g">The problem</div>
<h3>Feedback doesn&rsquo;t scale; bad AI does</h3>
<p>One teacher can&rsquo;t give thirty students timely feedback on argument and evidence. Generic AI fills the gap &mdash; but it fabricates citations (misconduct) or just writes the essay (learning lost).</p>
</div>
<div class="blk">
<div class="lab">The solution</div>
<h3>A coach that can&rsquo;t make things up</h3>
<p>It flags weak arguments and unsupported claims as comments anchored to the sentence, and coaches in six stances &mdash; from Socratic questions to direct, provenance-tagged answers.</p>
</div>
<div class="blk">
<div class="lab">Why it wins</div>
<h3>Trust, enforced in code</h3>
<p>A validation layer drops any citation that doesn&rsquo;t point to a source the student supplied &mdash; so the no-fabrication promise holds even if the model misbehaves. Institutions can approve it <em>because</em> of how it&rsquo;s built.</p>
</div>
</div>
<div class="stats">
<div><div class="k tnum">0</div><div class="m">Sources ever invented</div></div>
<div><div class="k g tnum">155</div><div class="m">Automated tests green</div></div>
<div><div class="k tnum">6</div><div class="m">Coaching modes</div></div>
<div><div class="k g tnum">5</div><div class="m">Assignment types</div></div>
</div>
<div class="split">
<div class="econ">
<div class="lab">Business model</div>
<div class="eq">
<span class="hi">Free</span> for students &nbsp;&rarr;&nbsp; <span class="hi">institutional site license</span><br>
<span class="hg">1</span> institution &nbsp;=&nbsp; <span class="hg">many seats</span> + analytics<br>
&rarr;&nbsp; sold on the one thing they can&rsquo;t buy elsewhere
</div>
<div class="big">A writing AI they can vouch for.</div>
<p style="color:var(--muted); font-size:12.5px; margin-top:7px">Land free with students; expand to per-seat/per-FTE licenses with admin controls &amp; teacher analytics. <span style="color:var(--faint)">Figures illustrative.</span></p>
</div>
<div class="status">
<div class="lab">Where we are</div>
<div class="srow"><span class="ic ok">&#10003;</span> Shipped to main &amp; pushed <span class="g2">DONE</span></div>
<div class="srow"><span class="ic ok">&#10003;</span> 155 automated tests green <span class="g2">DONE</span></div>
<div class="srow"><span class="ic ok">&#10003;</span> Live model-safety evals passing <span class="g2">DONE</span></div>
<div class="srow"><span class="ic ok">&#10003;</span> No-fabrication validator (not a prompt) <span class="g2">DONE</span></div>
<div class="srow"><span class="ic gate">!</span> First classroom pilot <span class="g2">NEXT</span></div>
</div>
</div>
<div class="ask">
<div class="lab">The ask</div>
<p><b>A green light to run a pilot with 2&ndash;3 design-partner classes this term</b>, a short runway to a Google Docs client + teacher-facing analytics, and support to court the first institutional buyer. The build risk is behind us &mdash; this is now about putting a finished, safe product in front of students and turning real classroom use into the sales story.</p>
</div>
<div class="foot">
<span>Essay Helper &middot; Executive Summary &middot; Confidential</span>
<span>Full plan: <a href="https://zoe-pitches.mosaic.site/essay-helper/">zoe-pitches.mosaic.site/essay-helper</a></span>
</div>
</div>