Issue #54: Story Craft Essentials learning path

app/engine-hub.tsx

@@ -27,6 +27,19 @@ const engines: EngineDefinition[] = [
     connects: ["Target runtime", "12 sequences", "24 blocks", "Flexible scenes", "96 mini-blocks", "Beat and shot targets"],
     result: "A timed, navigable dramatic hierarchy from act to shot, with forty-eight scenes as a starting template rather than a limit.",
   },
+  {
+    code: "ES",
+    title: "Story Craft Essentials",
+    href: "/story-craft-essentials",
+    stage: "Connect the craft",
+    question: "How do promise, pacing, tone, theme, scenes, evidence and form work together?",
+    summary:
+      "Build a Story Experience Card, map pacing and tone, test thematic arguments, learn Scene Pulse terms, translate inner meaning into screen evidence, track motifs, preview advanced screenplay forms and run an evidence-based craft audit.",
+    useWhen:
+      "Use it when the intention is abstract—make it tense, strengthen the theme, improve the scene—or when several craft layers need one connected why-to-revision path.",
+    connects: ["Story Setup and Pitch", "Structure and Scene Pulse", "Resonance", "PageFlow", "DraftLens", "Screenplay formatting"],
+    result: "A connected craft diagnosis and set of reviewable cards, maps, ledgers, questions and revision priorities without automatic rewriting.",
+  },
   {
     code: "RE",
     title: "Resonance Engine",

app/story-craft-essentials/story-craft-essentials.module.css

@@ -0,0 +1,342 @@
+.page {
+  min-height: 100vh;
+  padding: 28px clamp(14px, 4vw, 52px) 72px;
+  color: #173f45;
+  background: radial-gradient(circle at 8% 0%, rgba(117, 188, 174, 0.16), transparent 28rem), #f5faf8;
+}
+.hero,
+.controls,
+.panel,
+.footer,
+.notice {
+  box-sizing: border-box;
+  max-width: 1320px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 24px;
+  padding: 28px;
+  border: 1px solid #bad8d4;
+  border-radius: 18px;
+  background: linear-gradient(145deg, #fff, #edf8f5);
+  box-shadow: 0 14px 36px rgba(35, 82, 83, 0.09);
+}
+.hero span,
+.panel header > span,
+.controls > div span,
+.overlayGrid article > span,
+.techniqueGrid article > span,
+.recordGrid small {
+  color: #3c8385;
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.hero h1 {
+  margin: 6px 0 10px;
+  font-size: clamp(2rem, 4vw, 3.7rem);
+  line-height: 1.02;
+  letter-spacing: -0.055em;
+}
+.hero p,
+.panel header p,
+.footer p {
+  max-width: 920px;
+  margin: 0;
+  color: #607b7e;
+  line-height: 1.65;
+}
+.hero nav {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+.hero a,
+.actions a,
+.overlayGrid a,
+.recommendations a {
+  padding: 10px 13px;
+  border: 1px solid #79aaa6;
+  border-radius: 9px;
+  background: #fff;
+  color: #2d696b;
+  font-weight: 900;
+  text-decoration: none;
+}
+.notice {
+  margin-top: 14px;
+  padding: 12px 15px;
+  border-left: 4px solid #5b9e98;
+  border-radius: 8px;
+  background: #eaf7f3;
+  color: #42696c;
+}
+.controls {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.3fr);
+  gap: 10px;
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid #c3dcda;
+  border-radius: 13px;
+  background: #fff;
+}
+.controls label,
+.formGrid label,
+.formatLayout label,
+.auditSteps label {
+  color: #557479;
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.controls select,
+.formGrid textarea,
+.formatLayout textarea {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 5px;
+  padding: 10px;
+  border: 1px solid #adcdca;
+  border-radius: 8px;
+  background: #fff;
+  color: #294f54;
+  font: inherit;
+}
+.controls > div {
+  padding: 10px;
+  border-radius: 8px;
+  background: #eef8f5;
+}
+.controls > div strong {
+  display: block;
+  margin-top: 6px;
+  color: #315f63;
+  line-height: 1.45;
+}
+.panel {
+  margin-top: 18px;
+  padding: 24px;
+  scroll-margin-top: 18px;
+  border: 1px solid #c2dad7;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(39, 80, 82, 0.06);
+}
+.panel header { margin-bottom: 18px; }
+.panel h2 {
+  margin: 5px 0 8px;
+  font-size: clamp(1.4rem, 2.5vw, 2rem);
+  letter-spacing: -0.035em;
+}
+.formGrid,
+.metrics,
+.overlayGrid,
+.recordGrid,
+.techniqueGrid,
+.recommendations {
+  display: grid;
+  gap: 12px;
+}
+.formGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.formGrid textarea { min-height: 92px; resize: vertical; }
+.wide { grid-column: 1 / -1; }
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 9px;
+  margin-top: 14px;
+}
+.actions button {
+  padding: 10px 13px;
+  border: 1px solid #5d9691;
+  border-radius: 8px;
+  background: #2f7773;
+  color: #fff;
+  font-weight: 900;
+  cursor: pointer;
+}
+.actions button:disabled { cursor: not-allowed; opacity: 0.45; }
+.metrics {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin-bottom: 14px;
+}
+.metrics article {
+  padding: 14px 10px;
+  border: 1px solid #bfd9d6;
+  border-radius: 10px;
+  background: #edf7f4;
+  text-align: center;
+}
+.metrics strong,
+.metrics span { display: block; }
+.metrics strong { color: #286d70; font-size: 1.45rem; }
+.metrics span { margin-top: 4px; color: #627d80; font-size: 0.66rem; font-weight: 800; }
+.mapTable { overflow: auto; border: 1px solid #d2e3e1; border-radius: 10px; }
+.mapTable table { width: 100%; min-width: 920px; border-collapse: collapse; }
+.mapTable th,
+.mapTable td { padding: 10px 12px; border-bottom: 1px solid #dbe8e6; text-align: left; vertical-align: top; }
+.mapTable th { background: #eef8f5; color: #477275; font-size: 0.68rem; text-transform: uppercase; }
+.mapTable td { color: #506d71; line-height: 1.45; }
+.activeRow { background: #fff8e8; }
+.safety {
+  margin: 15px 0 0;
+  padding: 13px 15px;
+  border-left: 4px solid #5b9e98;
+  border-radius: 7px;
+  background: #eef8f5;
+  color: #42696c;
+  line-height: 1.55;
+}
+.pulseSummary {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.pulseSummary article,
+.pulseSummary > div {
+  padding: 16px;
+  border: 1px solid #c7dcda;
+  border-radius: 10px;
+  background: #f7fbfa;
+}
+.pulseSummary article strong { display: block; font-size: 2rem; color: #2e7477; }
+.pulseSummary p { margin: 0; color: #526f73; line-height: 1.5; }
+.pulseSummary p + p { margin-top: 8px; }
+.overlayGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.overlayGrid article,
+.techniqueGrid article,
+.recordGrid article {
+  padding: 16px;
+  border: 1px solid #d0e1df;
+  border-radius: 10px;
+  background: #f9fcfb;
+}
+.overlayGrid h3,
+.recordGrid h3 { margin: 7px 0 9px; }
+.overlayGrid p,
+.techniqueGrid p,
+.recordGrid p {
+  color: #536f73;
+  line-height: 1.5;
+}
+.overlayGrid a { display: inline-block; margin-top: 8px; }
+.evidenceStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+.evidenceStats span {
+  padding: 7px 10px;
+  border-radius: 999px;
+  background: #e7f3f0;
+  color: #3e6f72;
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+.recordGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
+.formatLayout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 18px;
+}
+.formatLayout aside {
+  display: grid;
+  align-content: start;
+  gap: 7px;
+}
+.formatLayout aside button {
+  padding: 10px 12px;
+  border: 1px solid #bdd7d4;
+  border-radius: 8px;
+  background: #f6fbf9;
+  color: #416f72;
+  text-align: left;
+  font-weight: 800;
+  cursor: pointer;
+}
+.formatLayout aside button.selected { background: #2f7773; color: #fff; }
+.formatLayout main {
+  padding: 18px;
+  border: 1px solid #d0e1df;
+  border-radius: 10px;
+  background: #fbfdfc;
+}
+.formatLayout main h3 { margin-top: 0; }
+.formatLayout main p { color: #536f73; line-height: 1.55; }
+.formatLayout textarea { min-height: 240px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.techniqueGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.auditSteps {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.auditSteps label {
+  display: grid;
+  grid-template-columns: auto 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid #d5e5e2;
+  border-radius: 8px;
+  background: #f8fcfb;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 0.82rem;
+}
+.auditSteps span {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: #e5f2ef;
+  color: #3d6e72;
+}
+.recommendations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.recommendations a { text-transform: capitalize; text-align: center; }
+.footer {
+  margin-top: 18px;
+  padding: 20px;
+  border: 1px solid #d8c8b8;
+  border-radius: 14px;
+  background: #fffaf4;
+}
+.footer strong { color: #725f50; }
+@media (max-width: 1100px) {
+  .overlayGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .techniqueGrid,
+  .recordGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .recommendations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 760px) {
+  .page { padding: 16px 10px 50px; }
+  .hero,
+  .controls,
+  .formGrid,
+  .pulseSummary,
+  .formatLayout,
+  .overlayGrid,
+  .techniqueGrid,
+  .recordGrid,
+  .auditSteps,
+  .recommendations { grid-template-columns: 1fr; }
+  .wide { grid-column: auto; }
+  .hero nav { grid-template-columns: 1fr 1fr; }
+  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 460px) {
+  .metrics { grid-template-columns: 1fr; }
+  .hero,
+  .panel { padding: 18px; }
+}