{
  "kind": "code",
  "model": "gemini-4-argon",
  "generatedAt": "2026-10-21T05:31:01.118Z",
  "prompt": "Create a five-slide interactive presentation for a fictional neighbourhood library: problem, concept, how it works, four-week pilot and next step. Black and white editorial design, animated inline SVG diagrams, slide controls, keyboard navigation, print styles and reduced motion. All figures must be labelled illustrative assumptions. No external assets. Return JSON {title,content:\"complete self-contained HTML document\"}. Include only inline scripts, CSS and inline SVG or canvas, no external libraries, URLs, network access or imports. Make the example polished, responsive, keyboard and touch usable. Support prefers-reduced-motion and pause animation when document.hidden. Include meaningful accessible text. Never claim tests were run. Keep implementation concise under 10000 characters.",
  "sourceDocument": null,
  "sourceImage": null,
  "scope": "Direct real Vertex generation with production schema validation and JavaScript syntax checks. Not an account, billing or browser interaction test.",
  "usage": {
    "promptTokenCount": 249,
    "candidatesTokenCount": 6229,
    "totalTokenCount": 6478,
    "trafficType": "ON_DEMAND",
    "promptTokensDetails": [
      {
        "modality": "TEXT",
        "tokenCount": 249
      }
    ],
    "candidatesTokensDetails": [
      {
        "modality": "TEXT",
        "tokenCount": 6229
      }
    ]
  },
  "output": {
    "title": "The Elmwood Micro-Library: Interactive Editorial Deck",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Elmwood Micro-Library Proposal</title>\n<style>\n:root { --bg: #fcfcfa; --fg: #111111; --muted: #666666; --border: 2px solid #111111; --thin: 1px solid #111111; --font-serif: 'Georgia', 'Times New Roman', serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Courier New', Courier, monospace; }\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { background: var(--bg); color: var(--fg); font-family: var(--font-sans); min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; overflow-x: hidden; line-height: 1.5; }\n.deck-header, .deck-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; border-bottom: var(--border); font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }\n.deck-footer { border-bottom: none; border-top: var(--border); }\nmain { flex: 1; display: grid; place-items: center; padding: 1.5rem; position: relative; }\n.slide { display: none; width: 100%; max-width: 1050px; border: var(--border); background: var(--bg); box-shadow: 8px 8px 0 var(--fg); opacity: 0; transition: opacity 0.3s ease; }\n.slide.active { display: grid; grid-template-columns: 1.1fr 0.9fr; opacity: 1; min-height: 500px; }\n.slide-content { padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; border-right: var(--border); }\n.slide-visual { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(#111 1px, transparent 1px); background-size: 16px 16px; position: relative; }\n.slide-meta { font-family: var(--font-mono); font-size: 0.8rem; border-bottom: var(--thin); padding-bottom: 0.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; }\nh1, h2 { font-family: var(--font-serif); font-weight: normal; font-size: clamp(1.8rem, 3.5vw, 2.75rem); line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.02em; }\np { font-size: 1.05rem; margin-bottom: 1rem; color: #222; }\n.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; border-top: var(--thin); padding-top: 1rem; }\n.stat-box { border-left: 3px solid var(--fg); padding-left: 0.75rem; }\n.stat-num { font-family: var(--font-serif); font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.25rem; }\n.stat-label { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; }\n.assumption-tag { font-family: var(--font-mono); font-size: 0.75rem; background: var(--fg); color: var(--bg); padding: 0.2rem 0.5rem; display: inline-block; margin-top: auto; align-self: flex-start; }\n.controls { display: flex; gap: 0.5rem; align-items: center; }\nbutton { background: var(--bg); color: var(--fg); border: var(--thin); padding: 0.4rem 0.8rem; font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer; text-transform: uppercase; transition: background 0.15s, color 0.15s; }\nbutton:hover, button:focus-visible { background: var(--fg); color: var(--bg); outline: 2px solid var(--fg); outline-offset: 2px; }\nbutton[aria-current=\"true\"] { background: var(--fg); color: var(--bg); font-weight: bold; }\nsvg { width: 100%; max-width: 340px; height: auto; background: var(--bg); border: var(--thin); padding: 1rem; box-shadow: 4px 4px 0 var(--fg); }\n.anim-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 3s ease-in-out infinite alternate; }\n.anim-pulse { transform-origin: center; animation: pulse 2.5s ease-in-out infinite; }\n.anim-float { animation: float 3s ease-in-out infinite alternate; }\n@keyframes draw { to { stroke-dashoffset: 0; } }\n@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }\n@keyframes float { from { transform: translateY(-4px); } to { transform: translateY(4px); } }\n.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; transition: none !important; }\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }\n  .anim-draw { stroke-dashoffset: 0; }\n}\n@media (max-width: 768px) {\n  .slide.active { grid-template-columns: 1fr; }\n  .slide-content { border-right: none; border-bottom: var(--border); padding: 1.5rem; }\n  .slide-visual { padding: 1.5rem; }\n}\n@media print {\n  body { display: block; background: #fff; color: #000; }\n  .deck-header, .deck-footer { display: none; }\n  main { display: block; padding: 0; }\n  .slide, .slide.active { display: grid !important; grid-template-columns: 1.2fr 0.8fr; opacity: 1 !important; page-break-after: always; break-after: page; margin-bottom: 2rem; box-shadow: none; height: auto; min-height: 0; }\n  .slide-visual { background: none; }\n  .anim-draw { stroke-dashoffset: 0 !important; }\n}\n</style>\n</head>\n<body>\n\n<header class=\"deck-header\">\n  <div>The Elmwood Reading Room &mdash; Issue 01</div>\n  <div id=\"slide-counter\" aria-live=\"polite\">Slide 1 of 5</div>\n</header>\n\n<main id=\"deck\" tabindex=\"-1\">\n  <section class=\"slide active\" aria-labelledby=\"s1-title\">\n    <div class=\"slide-content\">\n      <div>\n        <div class=\"slide-meta\"><span>01 / THE PROBLEM</span><span>CIVIC AUDIT</span></div>\n        <h1 id=\"s1-title\">A Growing Book Desert in Elmwood Ward</h1>\n        <p>Following the 2021 municipal branch closure, residents face a 42-minute transit commute to access public print media, quiet study tables, or local community archives.</p>\n        <div class=\"stat-grid\">\n          <div class=\"stat-box\"><span class=\"stat-num\">2.4 km</span><span class=\"stat-label\">Radius without civic space</span></div>\n          <div class=\"stat-box\"><span class=\"stat-num\">14,200</span><span class=\"stat-label\">Impacted residents</span></div>\n        </div>\n      </div>\n      <span class=\"assumption-tag\">* All figures: Illustrative assumptions</span>\n    </div>\n    <div class=\"slide-visual\">\n      <svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Map diagram showing a 2.4km unserved radius around Elmwood\">\n        <circle cx=\"120\" cy=\"120\" r=\"95\" fill=\"none\" stroke=\"#111\" stroke-width=\"1.5\" stroke-dasharray=\"6 4\" class=\"anim-pulse\"/>\n        <circle cx=\"120\" cy=\"120\" r=\"55\" fill=\"none\" stroke=\"#111\" stroke-width=\"1\" stroke-dasharray=\"2 3\"/>\n        <line x1=\"25\" y1=\"120\" x2=\"215\" y2=\"120\" stroke=\"#111\" stroke-width=\"1\"/>\n        <line x1=\"120\" y1=\"25\" x2=\"120\" y2=\"215\" stroke=\"#111\" stroke-width=\"1\"/>\n        <rect x=\"114\" y=\"114\" width=\"12\" height=\"12\" fill=\"#111\"/>\n        <text x=\"128\" y=\"112\" font-family=\"monospace\" font-size=\"10\" fill=\"#111\">ELMWOOD CORE</text>\n        <text x=\"45\" y=\"55\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">2.4KM UNSERVED ZONE*</text>\n      </svg>\n    </div>\n  </section>\n\n  <section class=\"slide\" aria-labelledby=\"s2-title\">\n    <div class=\"slide-content\">\n      <div>\n        <div class=\"slide-meta\"><span>02 / THE CONCEPT</span><span>ARCHITECTURAL BRIEF</span></div>\n        <h2 id=\"s2-title\">The Storefront Micro-Library</h2>\n        <p>Instead of waiting years for capital construction, we repurpose a vacant 450 sq. ft. corner retail unit into a high-density, curated reading room and lending depot.</p>\n        <div class=\"stat-grid\">\n          <div class=\"stat-box\"><span class=\"stat-num\">1,500</span><span class=\"stat-label\">Rotating curated titles</span></div>\n          <div class=\"stat-box\"><span class=\"stat-num\">12 Seats</span><span class=\"stat-label\">Dedicated study table</span></div>\n        </div>\n      </div>\n      <span class=\"assumption-tag\">* All figures: Illustrative assumptions</span>\n    </div>\n    <div class=\"slide-visual\">\n      <svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Isometric blueprint of a compact reading room and shelving wall\">\n        <rect x=\"30\" y=\"40\" width=\"180\" height=\"160\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\"/>\n        <line x1=\"30\" y1=\"80\" x2=\"210\" y2=\"80\" stroke=\"#111\" stroke-width=\"1.5\" class=\"anim-draw\"/>\n        <line x1=\"30\" y1=\"120\" x2=\"210\" y2=\"120\" stroke=\"#111\" stroke-width=\"1.5\" class=\"anim-draw\"/>\n        <rect x=\"70\" y=\"145\" width=\"100\" height=\"35\" fill=\"#111\" class=\"anim-float\"/>\n        <text x=\"82\" y=\"166\" font-family=\"monospace\" font-size=\"9\" fill=\"#fcfcfa\">COMMUNAL TABLE</text>\n        <text x=\"40\" y=\"65\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">HIGH-DENSITY STACKS (1,500 VOL)*</text>\n        <text x=\"40\" y=\"105\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">SELF-CHECKOUT TERMINAL</text>\n      </svg>\n    </div>\n  </section>\n\n  <section class=\"slide\" aria-labelledby=\"s3-title\">\n    <div class=\"slide-content\">\n      <div>\n        <div class=\"slide-meta\"><span>03 / HOW IT WORKS</span><span>OPERATIONS MODEL</span></div>\n        <h2 id=\"s3-title\">Trust-Based, Co-Op Managed</h2>\n        <p>Members register for smart-fob access between 07:00 and 22:00. Stewards volunteer two hours monthly to shelve returns, host reading groups, and maintain the space.</p>\n        <div class=\"stat-grid\">\n          <div class=\"stat-box\"><span class=\"stat-num\">15 hrs/d</span><span class=\"stat-label\">Keyless member access</span></div>\n          <div class=\"stat-box\"><span class=\"stat-num\">$0 / yr</span><span class=\"stat-label\">Borrowing fee (always free)</span></div>\n        </div>\n      </div>\n      <span class=\"assumption-tag\">* All figures: Illustrative assumptions</span>\n    </div>\n    <div class=\"slide-visual\">\n      <svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Circular flow diagram showing Join, Tap Access, Borrow, and Steward\">\n        <circle cx=\"120\" cy=\"120\" r=\"75\" fill=\"none\" stroke=\"#111\" stroke-width=\"1.5\" class=\"anim-draw\"/>\n        <circle cx=\"120\" cy=\"45\" r=\"20\" fill=\"#fcfcfa\" stroke=\"#111\" stroke-width=\"1.5\"/>\n        <circle cx=\"195\" cy=\"120\" r=\"20\" fill=\"#fcfcfa\" stroke=\"#111\" stroke-width=\"1.5\"/>\n        <circle cx=\"120\" cy=\"195\" r=\"20\" fill=\"#fcfcfa\" stroke=\"#111\" stroke-width=\"1.5\"/>\n        <circle cx=\"45\" cy=\"120\" r=\"20\" fill=\"#fcfcfa\" stroke=\"#111\" stroke-width=\"1.5\"/>\n        <text x=\"107\" y=\"48\" font-family=\"monospace\" font-size=\"8\" fill=\"#111\">1.JOIN</text>\n        <text x=\"182\" y=\"123\" font-family=\"monospace\" font-size=\"8\" fill=\"#111\">2.TAP</text>\n        <text x=\"104\" y=\"198\" font-family=\"monospace\" font-size=\"8\" fill=\"#111\">3.READ</text>\n        <text x=\"28\" y=\"123\" font-family=\"monospace\" font-size=\"8\" fill=\"#111\">4.CARE</text>\n        <text x=\"75\" y=\"123\" font-family=\"serif\" font-style=\"italic\" font-size=\"12\" fill=\"#111\">Civic Loop*</text>\n      </svg>\n    </div>\n  </section>\n\n  <section class=\"slide\" aria-labelledby=\"s4-title\">\n    <div class=\"slide-content\">\n      <div>\n        <div class=\"slide-meta\"><span>04 / FOUR-WEEK PILOT</span><span>VALIDATION ROADMAP</span></div>\n        <h2 id=\"s4-title\">Pop-Up Validation Schedule</h2>\n        <p>Before signing a multi-year lease, a 28-day pop-up test will validate foot traffic, collection turnover, and volunteer steward reliability at low capital risk.</p>\n        <div class=\"stat-grid\">\n          <div class=\"stat-box\"><span class=\"stat-num\">300</span><span class=\"stat-label\">Target Founding Members</span></div>\n          <div class=\"stat-box\"><span class=\"stat-num\">85%</span><span class=\"stat-label\">Target shift fill-rate</span></div>\n        </div>\n      </div>\n      <span class=\"assumption-tag\">* All figures: Illustrative assumptions</span>\n    </div>\n    <div class=\"slide-visual\">\n      <svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Gantt chart showing four weeks of pilot activities\">\n        <line x1=\"30\" y1=\"40\" x2=\"30\" y2=\"200\" stroke=\"#111\" stroke-width=\"1.5\"/>\n        <line x1=\"30\" y1=\"200\" x2=\"220\" y2=\"200\" stroke=\"#111\" stroke-width=\"1.5\"/>\n        <rect x=\"40\" y=\"55\" width=\"40\" height=\"20\" fill=\"#111\" class=\"anim-pulse\"/>\n        <text x=\"88\" y=\"69\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">WK 1: FIT-OUT &amp; STOCK</text>\n        <rect x=\"80\" y=\"90\" width=\"45\" height=\"20\" fill=\"#111\" class=\"anim-pulse\"/>\n        <text x=\"132\" y=\"104\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">WK 2: SOFT LAUNCH</text>\n        <rect x=\"120\" y=\"125\" width=\"50\" height=\"20\" fill=\"#111\" class=\"anim-pulse\"/>\n        <text x=\"40\" y=\"139\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">WK 3: EVENTS</text>\n        <rect x=\"165\" y=\"160\" width=\"45\" height=\"20\" fill=\"#111\" class=\"anim-pulse\"/>\n        <text x=\"40\" y=\"174\" font-family=\"monospace\" font-size=\"9\" fill=\"#111\">WK 4: AUDIT &amp; REPORT*</text>\n      </svg>\n    </div>\n  </section>\n\n  <section class=\"slide\" aria-labelledby=\"s5-title\">\n    <div class=\"slide-content\">\n      <div>\n        <div class=\"slide-meta\"><span>05 / NEXT STEP</span><span>COMMITMENT &amp; BUDGET</span></div>\n        <h2 id=\"s5-title\">Greenlight the October Pilot</h2>\n        <p>We are seeking seed sponsorship, donated modular shelving, and 25 founding volunteer stewards to unlock our rent-free October storefront agreement.</p>\n        <div class=\"stat-grid\">\n          <div class=\"stat-box\"><span class=\"stat-num\">$4,500</span><span class=\"stat-label\">Total seed budget required</span></div>\n          <div class=\"stat-box\"><span class=\"stat-num\">Oct 01</span><span class=\"stat-label\">Target doors-open date</span></div>\n        </div>\n      </div>\n      <span class=\"assumption-tag\">* All figures: Illustrative assumptions</span>\n    </div>\n    <div class=\"slide-visual\">\n      <svg viewBox=\"0 0 240 240\" role=\"img\" aria-label=\"Stamp emblem reading Approved for Community Pilot\">\n        <rect x=\"35\" y=\"35\" width=\"170\" height=\"170\" fill=\"none\" stroke=\"#111\" stroke-width=\"2\"/>\n        <rect x=\"42\" y=\"42\" width=\"156\" height=\"156\" fill=\"none\" stroke=\"#111\" stroke-width=\"1\" stroke-dasharray=\"4 4\"/>\n        <path d=\"M75 125 L105 155 L165 85\" fill=\"none\" stroke=\"#111\" stroke-width=\"4\" class=\"anim-draw\"/>\n        <text x=\"58\" y=\"70\" font-family=\"monospace\" font-size=\"10\" fill=\"#111\">SEED BUDGET: $4,500*</text>\n        <text x=\"55\" y=\"182\" font-family=\"serif\" font-size=\"12\" font-weight=\"bold\" fill=\"#111\">READY FOR SIGN-OFF</text>\n      </svg>\n    </div>\n  </section>\n</main>\n\n<footer class=\"deck-footer\">\n  <div class=\"controls\" role=\"group\" aria-label=\"Slide navigation\">\n    <button type=\"button\" id=\"prev-btn\" aria-label=\"Previous slide\">&larr; Prev</button>\n    <span id=\"dots\"></span>\n    <button type=\"button\" id=\"next-btn\" aria-label=\"Next slide\">Next &rarr;</button>\n  </div>\n  <div class=\"controls\">\n    <button type=\"button\" id=\"motion-btn\" aria-pressed=\"false\">Pause Motion</button>\n    <button type=\"button\" id=\"print-btn\">Print PDF</button>\n  </div>\n</footer>\n\n<script>\n(function() {\n  const slides = Array.from(document.querySelectorAll('.slide'));\n  const counter = document.getElementById('slide-counter');\n  const dotsContainer = document.getElementById('dots');\n  const prevBtn = document.getElementById('prev-btn');\n  const nextBtn = document.getElementById('next-btn');\n  const motionBtn = document.getElementById('motion-btn');\n  const printBtn = document.getElementById('print-btn');\n  let current = 0;\n  let userPaused = false;\n\n  slides.forEach((_, idx) => {\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.textContent = idx + 1;\n    btn.setAttribute('aria-label', 'Go to slide ' + (idx + 1));\n    btn.addEventListener('click', () => goTo(idx));\n    dotsContainer.appendChild(btn);\n  });\n  const dotBtns = Array.from(dotsContainer.querySelectorAll('button'));\n\n  function goTo(index) {\n    current = (index + slides.length) % slides.length;\n    slides.forEach((s, i) => s.classList.toggle('active', i === current));\n    dotBtns.forEach((b, i) => b.setAttribute('aria-current', i === current ? 'true' : 'false'));\n    counter.textContent = 'Slide ' + (current + 1) + ' of ' + slides.length;\n  }\n\n  prevBtn.addEventListener('click', () => goTo(current - 1));\n  nextBtn.addEventListener('click', () => goTo(current + 1));\n  printBtn.addEventListener('click', () => window.print());\n\n  motionBtn.addEventListener('click', () => {\n    userPaused = !userPaused;\n    document.body.classList.toggle('paused', userPaused);\n    motionBtn.setAttribute('aria-pressed', String(userPaused));\n    motionBtn.textContent = userPaused ? 'Resume Motion' : 'Pause Motion';\n  });\n\n  document.addEventListener('keydown', (e) => {\n    if (e.key === 'ArrowRight' || e.key === 'PageDown') { e.preventDefault(); goTo(current + 1); }\n    if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); goTo(current - 1); }\n    if (e.key === 'Home') { e.preventDefault(); goTo(0); }\n    if (e.key === 'End') { e.preventDefault(); goTo(slides.length - 1); }\n  });\n\n  let touchStartX = 0;\n  document.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, {passive: true});\n  document.addEventListener('touchend', e => {\n    const diff = e.changedTouches[0].screenX - touchStartX;\n    if (Math.abs(diff) > 50) goTo(diff < 0 ? current + 1 : current - 1);\n  }, {passive: true});\n\n  document.addEventListener('visibilitychange', () => {\n    if (document.hidden) {\n      document.body.classList.add('paused');\n    } else if (!userPaused) {\n      document.body.classList.remove('paused');\n    }\n  });\n\n  goTo(0);\n})();\n</script>\n</body>\n</html>"
  }
}