<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{Talk title}}, AI DevCon NYC</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@200..800&family=Atkinson+Hyperlegible+Mono:wght@200..800&display=swap">
<style>
/* Fallback viewer for AI DevCon slides when no Slides artifact can be made.
   The slides themselves are the same inline-styled <section> files as the artifact. Do not edit. */
html, body { margin: 0; height: 100%; background: #09090b; }
.deck { position: fixed; inset: 0; overflow: hidden; }
.deck > section {
  position: absolute; left: 50%; top: 50%; box-sizing: border-box; overflow: hidden;
  width: 1920px; height: 1080px; margin: -540px 0 0 -960px;
  transform: scale(var(--dc-scale, 1)); transform-origin: center; visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.deck > section.is-active { visibility: visible; }
.deck > section * { box-sizing: border-box; margin: 0; padding: 0; }
.deck > section > aside { display: none; }
.dc-notes { display: none; position: fixed; left: 0; right: 0; bottom: 0; max-height: 35vh; overflow: auto; background: rgba(20,20,20,.96); color: #eee; font: 18px/1.5 Arial, sans-serif; padding: 16px 24px; border-top: 2px solid #fde047; white-space: pre-wrap; z-index: 10; }
.show-notes .dc-notes { display: block; }
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { height: auto; }
  .deck { position: static; overflow: visible; }
  .deck > section { position: relative; left: auto; top: auto; margin: 0; transform: none; visibility: visible; break-after: page; }
  .dc-notes { display: none !important; }
}
</style>
</head>
<body>
<main class="deck">
<!-- SLIDES: paste one filled layout <section> per slide here, in order. -->
</main>
<div class="dc-notes" aria-live="polite"></div>
<script>
/* Arrow keys, Space or click to move; F full screen; N speaker notes; #7 opens slide 7. Do not edit. */
(function () {
  var slides = [].slice.call(document.querySelectorAll('.deck > section'));
  var notes = document.querySelector('.dc-notes'), i = 0;
  function fit() { document.documentElement.style.setProperty('--dc-scale', Math.min(innerWidth / 1920, innerHeight / 1080)); }
  function show(n) {
    i = Math.max(0, Math.min(slides.length - 1, n));
    slides.forEach(function (s, k) { s.classList.toggle('is-active', k === i); });
    var a = slides[i] && slides[i].querySelector('aside');
    notes.textContent = a ? a.textContent.trim() : '';
    history.replaceState(null, '', '#' + (i + 1));
  }
  addEventListener('keydown', function (e) {
    var k = e.key;
    if (['ArrowRight', 'ArrowDown', ' ', 'PageDown'].indexOf(k) > -1) { e.preventDefault(); show(i + 1); }
    else if (['ArrowLeft', 'ArrowUp', 'PageUp'].indexOf(k) > -1) { e.preventDefault(); show(i - 1); }
    else if (k === 'Home') show(0); else if (k === 'End') show(slides.length - 1);
    else if (k === 'f' || k === 'F') { document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen(); }
    else if (k === 'n' || k === 'N') document.body.classList.toggle('show-notes');
  });
  addEventListener('click', function (e) { if (!e.target.closest('a')) show(e.clientX < innerWidth / 3 ? i - 1 : i + 1); });
  addEventListener('resize', fit);
  addEventListener('hashchange', function () { show(parseInt(location.hash.slice(1), 10) - 1 || 0); });
  fit(); show(parseInt(location.hash.slice(1), 10) - 1 || 0);
})();
</script>
</body>
</html>