AWS_ORIGIN

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $current_passage to "outer_method_home">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/lHJ7wpK.png');"> <div class="home-screen"> <div class="home-container om-bg-panel"> <div class="home-header"> <h1 class="home-title">AWS Origin Demo</h1> <h2 class="home-subtitle">WORKING BACKWARDS: The Case of the Impossible Demo</h2> </div> <div class="home-description"> <p>A script-first interactive B2B onboarding demo demonstrating "working backwards" priorities through 3 selectable gates.</p> <p class="home-meta">Runtime: 6-8 minutes | Interactive: 3 gates | Perspectives: 4 lanes</p> </div> <div class="home-buttons"> <div class="button-primary"> [[START DEMO|act1_opening]] </div> <<if ( (setup.OM && typeof setup.OM.hasSavedProgress === 'function' && setup.OM.hasSavedProgress()) || (typeof setup.hasSavedProgress === 'function' && setup.hasSavedProgress()) )>> <div class="button-secondary"> <<button "RESUME">> <<script>> (function () { var loaded = false; if (setup.OM && typeof setup.OM.loadProgress === 'function') { loaded = setup.OM.loadProgress(); } else if (typeof setup.loadProgress === 'function') { loaded = setup.loadProgress(); } if (!loaded) { Engine.play('act1_opening'); return; } var resumeTarget = null; if (State.variables && State.variables.current_passage) { resumeTarget = State.variables.current_passage; } if (!resumeTarget || resumeTarget === 'outer_method_home') { try { var rhLast = localStorage.getItem('RH_LAST_PASSAGE'); if (rhLast && rhLast !== 'outer_method_home') { resumeTarget = rhLast; } } catch (err) { console.warn('[HOME] RH_LAST_PASSAGE unavailable', err); } } if (!resumeTarget || resumeTarget === 'outer_method_home') { resumeTarget = 'act1_opening'; } Engine.play(resumeTarget); })(); <</script>> <</button>> </div> <</if>> <div class="button-group"> <div class="button-tertiary"> [[ABOUT|about_modal]] </div> <div class="button-tertiary"> [[CREDITS|credits_modal]] </div> </div> </div> <div class="home-footer"> <p>© 2026 AWS Origin Team | Built with Twine 2 + SugarCube 2.36.1</p> </div> </div> </div> </div> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); pointer-events: none; } .om-bg-page .home-screen { position: relative; z-index: 2; min-height: calc(100vh - 4rem); display: flex; align-items: center; justify-content: center; } .om-bg-page .om-bg-panel { background: rgba(0, 0, 0, 0.58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 12px; padding: 2rem; box-sizing: border-box; } .om-bg-page .home-title, .om-bg-page .home-subtitle, .om-bg-page .home-description p, .om-bg-page .home-footer p { color: #fff; } </style>

<<set $current_passage to "act1_opening">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/o7MlXyo.png');">  <div class="rh-media" id="media-act1-opening"> <div class="rh-player-wrap"> <div id="act1OpeningClip"></div> </div> </div>  <div class="casefile-container"> <div class="casefile-header"> <h1 class="casefile-title">WORKING BACKWARDS</h1> <h2 class="casefile-subtitle">The Case of the Impossible Demo</h2> </div>  <div class="timer-overlay"> <span class="timer-label">RUNTIME:</span> <span id="demo-timer" class="timer-display">00:00</span> </div>  <div class="tab-dividers"> <div class="tab-item tab-active">ORIGIN</div> <div class="tab-item">COST</div> <div class="tab-item">SECURITY</div> <div class="tab-item">RELIABILITY</div> <div class="tab-item">DEBRIEF</div> </div>  <div class="casefile-content"> <div class="casefile-slam-animation"> <p class="casefile-intro"> <strong>CASE FILE:</strong> AWS Origin Demo<br> <strong>OBJECTIVE:</strong> Build an interactive B2B onboarding experience<br> <strong>METHOD:</strong> Working Backwards from customer needs<br> <strong>CONSTRAINTS:</strong> 6-8 minutes | 3 critical gates | Real-world validation </p> <ul> <li><strong>RELIABILITY:</strong> Can the system hold under pressure?</li> <li><strong>SECURITY:</strong> Will the AI host behave as intended?</li> <li><strong>COST:</strong> Is this fundable and defensible?</li> </ul> <p class="casefile-cta">The timer starts now. Let's see how this story began...</p> </div> </div> </div>  <div class="lane-bar-preview"> <div class="lane-preview-label">PERSPECTIVES (Unlocked after completion):</div> <div class="lane-preview-buttons"> <button class="lane-btn-preview" disabled>F - Founder</button> <button class="lane-btn-preview" disabled>C - Creative</button> <button class="lane-btn-preview" disabled>B - Beta Tester</button> <button class="lane-btn-preview" disabled>A - Full Movie</button> </div> </div>  <<timed 45s>> <<goto "origin_doc_brown">> <</timed>>  <div class="passage-controls"> [[HOME|outer_method_home]] [[SKIP →|origin_doc_brown]] </div> </div> <<script>> (function () { var PASSAGE = 'act1_opening'; function initAct1Opening() { if (State.passage !== PASSAGE) return; if (typeof State.variables.demo_elapsed_seconds === 'undefined') { State.variables.demo_elapsed_seconds = 0; } if (typeof State.variables.demo_timer_running === 'undefined') { State.variables.demo_timer_running = false; } if (typeof State.variables.timer_started === 'undefined') { State.variables.timer_started = false; } if (!State.variables.timer_started) { State.variables.timer_started = true; if (window.RH && typeof RH.startDemoTimer === 'function') { RH.startDemoTimer('#demo-timer'); } } if (window.RH && typeof RH.renderDemoTimer === 'function') { RH.renderDemoTimer('#demo-timer'); } if (typeof setup.unlockLanes === 'function') { setup.unlockLanes(); } else { State.variables.lanes_unlocked = true; } var $mount = jQuery('#act1OpeningClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'act1OpeningClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/act1_opening.mp4', title: 'Act 1 — Casefile Opening', user: '@OuterMethod', vid: 'act1_opening', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-act1-opening'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[act1_opening] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#act1OpeningClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[act1_opening] autoplay blocked', err); }); } /* Timer macro handles passage advance for this beat */ video.onended = null; }, 300); } window.setTimeout(initAct1Opening, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<<set $current_passage to "origin_doc_brown">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/ak9HUsx.png');">  <div class="rh-media" id="media-origin-doc-brown"> <div class="rh-player-wrap"> <div id="originDocBrownClip"></div> </div> </div>  <div class="evidence-container"> <div class="evidence-insert tablet-screen"> <div class="tablet-frame"> <div class="tablet-content"> <div class="craft-drawing"> <div class="drawing-title">WORKING BACKWARDS: The Origin</div> <div class="drawing-sketch"> <svg class="if-then-loops" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <polygon points="0 0, 10 3.5, 0 7" fill="#00d4ff" /> </marker> </defs> <path class="trace-path" d="M 50 50 L 150 50 L 150 100 L 250 100" stroke="#00d4ff" stroke-width="3" fill="none" marker-end="url(#arrowhead)" /> <text x="60" y="45" fill="#00d4ff" font-size="14">IF choice A</text> <text x="160" y="95" fill="#00d4ff" font-size="14">THEN outcome X</text> <path class="trace-path" d="M 50 150 L 150 150 L 150 200 L 250 200" stroke="#ff6b35" stroke-width="3" fill="none" marker-end="url(#arrowhead)" /> <text x="60" y="145" fill="#ff6b35" font-size="14">IF choice B</text> <text x="160" y="195" fill="#ff6b35" font-size="14">THEN outcome Y</text> <path class="trace-path" d="M 250 100 L 300 150 L 250 200" stroke="#ffd700" stroke-width="2" fill="none" stroke-dasharray="5,5" /> <text x="260" y="155" fill="#ffd700" font-size="12">STATE</text> </svg> </div> <div class="drawing-caption">Original napkin sketch - "What if story = system?"</div> </div> </div> </div> </div> </div>  <div class="note-cards-container"> <div class="note-card"><div class="note-card-content">STORY → SYSTEM</div></div> <div class="note-card"><div class="note-card-content">CHOICE → CONSEQUENCE</div></div> <div class="note-card"><div class="note-card-content">VIEWER = CAMERA</div></div> <div class="note-card"><div class="note-card-content">STATE = MEMORY</div></div> </div>   <<timed 45s>> <<goto "origin_twine_discovery">> <</timed>>  <div class="passage-controls"> [[SKIP →|origin_twine_discovery]] </div> </div> <<script>> (function () { var PASSAGE = 'origin_doc_brown'; if (!Array.isArray(State.variables.evidence_viewed)) { State.variables.evidence_viewed = []; } if (!State.variables.evidence_viewed.includes('doc_brown')) { State.variables.evidence_viewed.push('doc_brown'); } function initOriginDocBrown() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#originDocBrownClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'originDocBrownClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/origin_doc_brown.mp4', title: 'Origin — Working Backwards', user: '@OuterMethod', vid: 'origin_doc_brown', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-origin-doc-brown'); jQuery('#media-origin-doc-brown').removeClass('side'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[origin_doc_brown] RH.initSkinPlayer is not available'); } var $paths = jQuery('.trace-path'); $paths.each(function (index) { var path = this; if (!path || typeof path.getTotalLength !== 'function') return; var length = path.getTotalLength(); path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = String(length); window.setTimeout(function () { if (State.passage !== PASSAGE) return; path.style.transition = 'stroke-dashoffset 2s ease-in-out'; path.style.strokeDashoffset = '0'; }, 500 + (index * 1000)); }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#originDocBrownClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[origin_doc_brown] autoplay blocked', err); }); } /* timed macro handles passage advance */ video.onended = null; }, 300); } window.setTimeout(initOriginDocBrown, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<<set $current_passage to "origin_backend_awakening">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/ak9HUsx.png');">  <div class="rh-media" id="media-origin-backend-awakening"> <div class="rh-player-wrap"> <div id="originBackendAwakeningClip"></div> </div> </div>  <div class="evidence-container"> <div class="evidence-card evidence-card-c"> <div class="evidence-header"> <span class="evidence-label">EVIDENCE INSERT C</span> <span class="evidence-id">BACKEND ARCHITECTURE</span> </div> <div class="evidence-content"> <div class="evidence-diagram"> <div class="architecture-card"> <h3 class="architecture-title">TWINE → API → MEMORY</h3> <div class="architecture-bullets"> <div class="bullet-item"> <span class="bullet-icon">🔐</span> <span class="bullet-text"><strong>Identity</strong> - Who is the player?</span> </div> <div class="bullet-item"> <span class="bullet-icon">💾</span> <span class="bullet-text"><strong>State</strong> - What have they done?</span> </div> <div class="bullet-item"> <span class="bullet-icon">🧠</span> <span class="bullet-text"><strong>Memory</strong> - What does the system remember?</span> </div> <div class="bullet-item"> <span class="bullet-icon">🗺️</span> <span class="bullet-text"><strong>Routing</strong> - Where should they go next?</span> </div> </div> </div> </div> </div> </div> </div>  <div class="service-strip-container"> <div class="service-strip-header"> <h3>THE BACKEND AWAKENS</h3> <p class="service-strip-subtitle">Fast cuts. Single words. Each service appears in sequence.</p> </div> <div class="service-strip"> <div class="service-item service-lambda"> <div class="service-icon">λ</div> <div class="service-name">LAMBDA</div> <div class="service-desc">Serverless compute</div> </div> <div class="service-item service-api-gateway"> <div class="service-icon">🚪</div> <div class="service-name">API GATEWAY</div> <div class="service-desc">RESTful interface</div> </div> <div class="service-item service-dynamodb"> <div class="service-icon">🗄️</div> <div class="service-name">DYNAMODB</div> <div class="service-desc">NoSQL persistence</div> </div> <div class="service-item service-s3"> <div class="service-icon">📦</div> <div class="service-name">S3</div> <div class="service-desc">Object storage</div> </div> </div> </div>  <<timed 45s>> <<goto "origin_workshop">> <</timed>>  <div class="passage-controls"> [[SKIP →|origin_workshop]] </div> </div> <<script>> (function () { var PASSAGE = 'origin_backend_awakening'; var v = State.variables; if (!Array.isArray(v.evidence_viewed)) v.evidence_viewed = []; if (v.evidence_viewed.indexOf('backend_architecture') === -1) { v.evidence_viewed.push('backend_architecture'); console.log('[EVIDENCE] Viewed: backend_architecture'); } function animateServiceStrip() { var $items = jQuery('.service-item'); var $vo = jQuery('.voiceover-container'); $items.css({ opacity: 0, transform: 'scale(0.9)' }); $vo.css({ opacity: 0 }); $items.each(function (index) { var item = jQuery(this); window.setTimeout(function () { if (State.passage !== PASSAGE) return; item.css({ transition: 'opacity 0.4s ease-in-out, transform 0.4s ease-in-out', opacity: 1, transform: 'scale(1)' }); item.addClass('service-flash'); window.setTimeout(function () { item.removeClass('service-flash'); }, 400); }, 500 + (index * 800)); }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $vo.css({ transition: 'opacity 1s ease-in-out', opacity: 1 }); }, 3700); } function initOriginBackendAwakening() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#originBackendAwakeningClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'originBackendAwakeningClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/origin_backend_awakening.mp4', title: 'Origin — Backend Awakening', user: '@OuterMethod', vid: 'origin_backend_awakening', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-origin-backend-awakening'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[origin_backend_awakening] RH.initSkinPlayer is not available'); } window.requestAnimationFrame(function () { window.setTimeout(function () { if (State.passage !== PASSAGE) return; animateServiceStrip(); }, 50); }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#originBackendAwakeningClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[origin_backend_awakening] autoplay blocked', err); }); } // Current working template: do not auto-advance on video end. video.onended = null; }, 300); } window.setTimeout(initOriginBackendAwakening, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style> <style> .om-bg-page .service-strip-container { max-width: 900px; margin: 3rem auto; padding: 2rem; text-align: center; } .om-bg-page .service-strip-header { text-align: center; margin-bottom: 2rem; } .om-bg-page .service-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.5rem; max-width: 760px; margin: 0 auto; } .om-bg-page .service-item { flex: 0 0 160px; width: 160px; } @media (max-width: 768px) { .om-bg-page .service-strip { max-width: 520px; } .om-bg-page .service-item { flex: 0 0 140px; width: 140px; } } @media (max-width: 480px) { .om-bg-page .service-strip { max-width: 320px; } .om-bg-page .service-item { flex: 0 0 100%; width: 100%; } } </style>

<<set $current_passage to "origin_workshop">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/ak9HUsx.png');"> <div id="origin-workshop-root">  <div class="rh-media" id="media-origin-workshop-still"> <div class="rh-player-wrap"> <div id="originWorkshopStill" class="rh-still-player"> <img src="https://dwlccmzy2w1e1.cloudfront.net/stills/IMG_0135.png" alt="AWS workshop still" class="rh-still-image" loading="eager" > </div> </div> </div>  <div class="evidence-container"> <div class="evidence-card evidence-card-d"> <div class="evidence-header"> <span class="evidence-label">EVIDENCE INSERT D</span> <span class="evidence-id">WORKSHOP BADGE</span> </div> <div class="evidence-content"> <div class="workshop-badge"> <div class="badge-header"> <div class="aws-logo-text">AWS</div> <div class="badge-type">WORKSHOP</div> </div> <div class="badge-title"> <h3>Modernizing Video Intelligence</h3> <p class="badge-subtitle">At-Scale Content Analysis with AWS Generative AI</p> </div> <div class="badge-footer"> <span class="badge-date">2025</span> <span class="badge-location">AWS LA Summit</span> </div> </div> </div> </div> </div>  <div class="notebook-container"> <div class="notebook-page origin-workshop-paper"> <div class="notebook-header"> <div class="notebook-title handwritten">WORKING BACKWARDS</div> <div class="notebook-underline"></div> </div> <div class="notebook-content"> <p class="notebook-note">Start with the customer experience. Work backwards to the technology.</p> <p class="notebook-note">The workshop showed us: this isn't just about building features. It's about building systems that scale.</p> </div> </div> </div>  <div class="service-list-container"> <div class="service-list-header"> <h3>THE STACK</h3> <p class="service-list-subtitle">Services learned at the workshop</p> </div> <div class="service-list"> <div class="service-list-item"> <span class="service-icon">🤖</span> <span class="service-name">Amazon Bedrock</span> </div> <div class="service-list-item"> <span class="service-icon">🧠</span> <span class="service-name">Amazon Nova</span> </div> <div class="service-list-item"> <span class="service-icon">👁️</span> <span class="service-name">Rekognition</span> </div> <div class="service-list-item"> <span class="service-icon">🎙️</span> <span class="service-name">Transcribe</span> </div> <div class="service-list-item"> <span class="service-icon">λ</span> <span class="service-name">Lambda</span> </div> <div class="service-list-item"> <span class="service-icon">🚪</span> <span class="service-name">API Gateway</span> </div> <div class="service-list-item"> <span class="service-icon">🗄️</span> <span class="service-name">DynamoDB</span> </div> <div class="service-list-item"> <span class="service-icon">📦</span> <span class="service-name">S3</span> </div> <div class="service-list-item"> <span class="service-icon">📊</span> <span class="service-name">CloudWatch</span> </div> <div class="service-list-item"> <span class="service-icon">💰</span> <span class="service-name">AWS Budgets</span> </div> </div> </div>  <<timed 45s>> <<goto "mentor_console_activate">> <</timed>>  <div class="passage-controls"> [[HOME|outer_method_home]] [[SKIP →|mentor_console_activate]] </div> </div> </div> <<script>> (function () { var PASSAGE = 'origin_workshop'; if (!Array.isArray(State.variables.evidence_viewed)) { State.variables.evidence_viewed = []; } if (State.variables.evidence_viewed.indexOf('workshop_badge') === -1) { State.variables.evidence_viewed.push('workshop_badge'); console.log('[EVIDENCE] Viewed: workshop_badge'); } function initOriginWorkshop() { if (State.passage !== PASSAGE) return; var $root = jQuery('#origin-workshop-root'); if (!$root.length) return; if ($root.data('ow-init')) return; $root.data('ow-init', true); if (window.RH && typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-origin-workshop-still'); } if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } var $still = $root.find('#originWorkshopStill'); var $badge = $root.find('.workshop-badge'); var $notebook = $root.find('.notebook-container'); var $items = $root.find('.service-list-item'); $still.css({ opacity: 0, transform: 'translateY(8px)' }); $badge.css({ opacity: 0, transform: 'scale(0.95)' }); $notebook.css({ opacity: 0 }); $items.css({ opacity: 0, transform: 'translateY(8px)' }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $still.css({ transition: 'opacity 0.45s ease-out, transform 0.45s ease-out', opacity: 1, transform: 'translateY(0)' }); }, 120); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $badge.css({ transition: 'opacity 0.6s ease-out, transform 0.6s ease-out', opacity: 1, transform: 'scale(1)' }); }, 450); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $notebook.css({ transition: 'opacity 0.8s ease-in-out', opacity: 1 }); }, 1200); $items.each(function (index) { var $item = jQuery(this); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $item.css({ transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out', opacity: 1, transform: 'translateY(0)' }); }, 2000 + (index * 150)); }); } window.setTimeout(initOriginWorkshop, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } /* Still inside canonical player shell */ .rh-still-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: 14px; } .rh-still-image { display: block; width: 100%; height: 100%; object-fit: cover; } /* Optional subtle treatment so it feels closer to the video passages */ .rh-still-player::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%), linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 18%); pointer-events: none; } </style>

<<set $current_passage to "mentor_console_activate">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/pZGLO5n.png');"> <div class="rh-media" id="media-mentor-console-activate"> <div class="rh-player-wrap"> <div id="mentorConsoleActivateClip"></div> </div> </div> <div class="console-boot-container"> <div class="console-screen"> <div class="boot-sequence"> <div class="boot-line">> INITIALIZING AWS GUIDE SYSTEM...</div> <div class="boot-line">> LOADING FAILURE MODE ANALYSIS...</div> <div class="boot-line">> CONNECTING TO MENTOR CONSOLE...</div> <div class="boot-line boot-success">> AWS GUIDE: ONLINE</div> </div> </div> </div> <div class="gate-selection-container"> <div class="gate-selection-header"> <h2>SELECT FIRST FAILURE MODE</h2> <p class="gate-selection-subtitle">Choose which system to investigate first</p> </div> <div class="gate-buttons"> <div class="gate-button gate-reliability"> <<link "ENGINE (RELIABILITY)">> <<set $first_gate_choice to "reliability">> <<set $priority_first to "reliability">> <<set $mentor_active to true>> <<run console.log('[GATE] Selected: RELIABILITY (engine)')>> <<goto "case_hub">> <</link>> <div class="gate-description">System stability and performance</div> </div> <div class="gate-button gate-security"> <<link "AI HOST (SECURITY)">> <<set $first_gate_choice to "security">> <<set $priority_first to "security">> <<set $mentor_active to true>> <<run console.log('[GATE] Selected: SECURITY (ai_host)')>> <<goto "case_hub">> <</link>> <div class="gate-description">AI safety and content moderation</div> </div> <div class="gate-button gate-cost"> <<link "RUNWAY (COST)">> <<set $first_gate_choice to "cost">> <<set $priority_first to "cost">> <<set $mentor_active to true>> <<run console.log('[GATE] Selected: COST (runway)')>> <<goto "case_hub">> <</link>> <div class="gate-description">Budget optimization and resource management</div> </div> </div> </div> </div> <<script>> (function () { var PASSAGE = 'mentor_console_activate'; function initMentorConsoleActivate() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.mentor_active = true; State.variables.current_gate = null; var $mount = jQuery('#mentorConsoleActivateClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'mentorConsoleActivateClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/mentor_console_activate.mp4', title: 'Mentor Console Activation', user: '@OuterMethod', vid: 'mentor_console_activate', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-mentor-console-activate'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[mentor_console_activate] RH.initSkinPlayer is not available'); } var $bootLines = jQuery('.boot-line'); var $gateSelection = jQuery('.gate-selection-container'); var $betaReaction = jQuery('.beta-tester-reaction'); var $gateButtons = jQuery('.gate-button'); $bootLines.css('opacity', '0'); $gateSelection.css('opacity', '0'); $betaReaction.css('opacity', '0'); $bootLines.each(function (index) { var $line = jQuery(this); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $line.css({ transition: 'opacity 0.3s ease-in-out', opacity: '1' }); if (index === $bootLines.length - 1) { $line.addClass('pulse-success'); } }, 300 + (index * 800)); }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $gateSelection.css({ transition: 'opacity 0.8s ease-in-out', opacity: '1' }); }, 3500); window.setTimeout(function () { if (State.passage !== PASSAGE) return; $betaReaction.css({ transition: 'opacity 0.6s ease-in-out', opacity: '1' }); }, 4500); $gateButtons.off('.mentorHover'); $gateButtons.on('mouseenter.mentorHover', function () { jQuery(this).css({ transform: 'scale(1.05)', transition: 'transform 0.2s ease-in-out' }); }); $gateButtons.on('mouseleave.mentorHover', function () { jQuery(this).css({ transform: 'scale(1)', transition: 'transform 0.2s ease-in-out' }); }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#mentorConsoleActivateClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[mentor_console_activate] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initMentorConsoleActivate, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<<set $current_passage to "case_hub">> <<set $mentor_active to true>> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/UtIob8T.png');"> <div class="case-hub-container"> <div class="case-hub-header"> <h1>CASE HUB</h1> <p class="case-hub-subtitle">Investigation Dashboard</p> </div> <div class="progress-tracker"> <span class="progress-label">Gates Completed:</span> <span class="progress-count"><<= $gates_completed.length>>/3</span> </div> <div class="gate-status-grid"> <div class="gate-card <<if $gates_completed.includes('reliability')>>gate-completed<<elseif $current_gate === 'reliability'>>gate-active<<else>>gate-available<</if>>"> <div class="gate-header"> <h2>RELIABILITY</h2> <span class="gate-label">ENGINE</span> </div> <div class="gate-status"> <<if $gates_completed.includes('reliability')>> <span class="status-badge completed">✓ COMPLETED</span> <div class="gate-score">Score: <<= $scores.reliability || 0>>/10</div> <<elseif $current_gate === 'reliability'>> <span class="status-badge in-progress">IN PROGRESS</span> <<else>> <span class="status-badge not-started">NOT STARTED</span> <</if>> </div> <div class="gate-description"> Self-taught full-stack reliability - connecting front end + back end reliably </div> <<if !$gates_completed.includes('reliability')>> <button class="gate-button" type="button" onclick="selectGate('reliability')"> INVESTIGATE RELIABILITY </button> <</if>> </div> <div class="gate-card <<if $gates_completed.includes('security')>>gate-completed<<elseif $current_gate === 'security'>>gate-active<<else>>gate-available<</if>>"> <div class="gate-header"> <h2>SECURITY</h2> <span class="gate-label">AI HOST</span> </div> <div class="gate-status"> <<if $gates_completed.includes('security')>> <span class="status-badge completed">✓ COMPLETED</span> <div class="gate-score">Score: <<= $scores.security || 0>>/10</div> <<elseif $current_gate === 'security'>> <span class="status-badge in-progress">IN PROGRESS</span> <<else>> <span class="status-badge not-started">NOT STARTED</span> <</if>> </div> <div class="gate-description"> Making the AI host function as intended - routing, constraints, behavior </div> <<if !$gates_completed.includes('security')>> <button class="gate-button" type="button" onclick="selectGate('security')"> INVESTIGATE SECURITY </button> <</if>> </div> <div class="gate-card <<if $gates_completed.includes('cost')>>gate-completed<<elseif $current_gate === 'cost'>>gate-active<<else>>gate-available<</if>>"> <div class="gate-header"> <h2>COST</h2> <span class="gate-label">RUNWAY</span> </div> <div class="gate-status"> <<if $gates_completed.includes('cost')>> <span class="status-badge completed">✓ COMPLETED</span> <div class="gate-score">Score: <<= $scores.cost || 0>>/10</div> <<elseif $current_gate === 'cost'>> <span class="status-badge in-progress">IN PROGRESS</span> <<else>> <span class="status-badge not-started">NOT STARTED</span> <</if>> </div> <div class="gate-description"> AWS Startup acceptance + credits + splash page </div> <<if !$gates_completed.includes('cost')>> <button class="gate-button" type="button" onclick="selectGate('cost')"> INVESTIGATE COST </button> <</if>> </div> </div> <<if $gates_completed.length === 3>> <div class="debrief-section"> <h2>All Gates Completed</h2> <p>Ready to proceed to final debrief and resolution.</p> <div class="passage-controls"> [[PROCEED TO DEBRIEF|proof_loop_montage]] </div> </div> <</if>> <div class="mentor-console"> <div class="mentor-header"> <h3>AWS GUIDE</h3> <span id="mentor-status-label" class="mentor-status">READY</span> </div> <div class="mentor-input-area"> <label for="mentor-question">Ask the AWS Guide:</label> <textarea id="mentor-question" class="mentor-textarea" placeholder="What problem does this demo solve?" rows="3" ></textarea> <button id="mentor-ask-btn" class="mentor-button" type="button"> ASK MENTOR </button> </div> <div id="mentor-loading" class="mentor-loading hidden"> <span class="loading-spinner"></span> <span>Consulting AWS Guide...</span> </div> <div id="mentor-response-area" class="mentor-response hidden"> <div class="mentor-response-header">AWS Guide Response</div> <div id="mentor-response-text" class="mentor-response-text"></div> </div> <div id="mentor-go-wrap" class="mentor-response hidden" style="margin-top:10px;"> <div class="mentor-response-header">Suggested Route</div> <button id="mentor-go-btn" class="mentor-button" type="button"> GO TO SUGGESTED PASSAGE </button> </div>  <div class="passage-controls"> [[HOME|outer_method_home]] </div> <div class="mentor-note"> <small>Mentor guidance is brief, route-aware, and falls back locally if the backend is unavailable.</small> </div> </div> </div> </div> <<script>> (function () { State.variables.current_passage = 'case_hub'; State.variables.mentor_active = true; function knownPassages() { return { case_hub: true, proof_loop_montage: true, debrief_scorecard: true, resolution_final: true, gate_engine_beta: true, gate_engine_evidence: true, gate_engine_instruction: true, gate_engine_choice: true, gate_engine_result: true, gate_ai_host_beta: true, gate_ai_host_evidence: true, gate_ai_host_instruction: true, gate_ai_host_choice: true, gate_ai_host_result: true, gate_runway_beta: true, gate_runway_evidence: true, gate_runway_instruction: true, gate_runway_choice: true, gate_runway_result: true, mentor_console_activate: true, origin_workshop: true, origin_backend_awakening: true, origin_twine_discovery: true, origin_doc_brown: true, act1_opening: true }; } function normalizeRoutePassage(passageId) { var raw = String(passageId || '').trim(); if (!raw) return null; var aliases = { gate_engine_incident: 'gate_engine_beta', gate_ai_host_incident: 'gate_ai_host_beta', gate_runway_incident: 'gate_runway_beta', engine_incident: 'gate_engine_beta', ai_host_incident: 'gate_ai_host_beta', runway_incident: 'gate_runway_beta', engine_beta: 'gate_engine_beta', ai_host_beta: 'gate_ai_host_beta', runway_beta: 'gate_runway_beta', debrief: 'proof_loop_montage', final_debrief: 'proof_loop_montage', debrief_score: 'debrief_scorecard', service_discovery: 'origin_backend_awakening', backend_awakening: 'origin_backend_awakening', twine_discovery: 'origin_twine_discovery', workshop: 'origin_workshop' }; return aliases[raw] || raw; } function passageExists(passageId) { var id = normalizeRoutePassage(passageId); if (!id) return false; if (window.Story && typeof Story.has === 'function') { return Story.has(id); } return !!knownPassages()[id]; } function firstRemainingGatePassage() { var completed = Array.isArray(State.variables.gates_completed) ? State.variables.gates_completed : []; if (!completed.includes('reliability')) return 'gate_engine_beta'; if (!completed.includes('security')) return 'gate_ai_host_beta'; if (!completed.includes('cost')) return 'gate_runway_beta'; return 'proof_loop_montage'; } function safeRouteTarget(requestedTarget) { var normalized = normalizeRoutePassage(requestedTarget); if (normalized && passageExists(normalized)) { return normalized; } return firstRemainingGatePassage(); } function playPassage(target) { var finalTarget = safeRouteTarget(target); if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(finalTarget); } else { Engine.play(finalTarget); } } window.selectGate = function (gateId) { State.variables.current_gate = gateId; var passageMap = { reliability: 'gate_engine_beta', security: 'gate_ai_host_beta', cost: 'gate_runway_beta' }; playPassage(passageMap[gateId]); }; window.canProceedToDebrief = function () { return Array.isArray(State.variables.gates_completed) && State.variables.gates_completed.length === 3; }; function getFallbackMentorResponse() { var gatesCompleted = Array.isArray(State.variables.gates_completed) ? State.variables.gates_completed.length : 0; if (gatesCompleted === 0) { return { answer: 'Start by investigating one of the three gates: RELIABILITY, SECURITY, or COST. Each one represents a core constraint in building a production-ready AWS experience.', routing: { next_passage_id: firstRemainingGatePassage(), lane: State.variables.current_lane || 'founder', reason: 'Start with a gate.' } }; } if (gatesCompleted === 1) { return { answer: 'Good progress. Investigate another gate to compare how reliability, security, and cost shape the architecture from different angles.', routing: { next_passage_id: firstRemainingGatePassage(), lane: State.variables.current_lane || 'founder', reason: 'Investigate the next remaining gate.' } }; } if (gatesCompleted === 2) { return { answer: 'You are one step away from the full picture. Complete the remaining gate to unlock the final debrief.', routing: { next_passage_id: firstRemainingGatePassage(), lane: State.variables.current_lane || 'founder', reason: 'Complete the last remaining gate.' } }; } return { answer: 'All three gates are complete. Proceed to the debrief to see how your choices shaped the final outcome.', routing: { next_passage_id: 'proof_loop_montage', lane: State.variables.current_lane || 'founder', reason: 'All gates completed.' } }; } function renderMentorResponse(answer, routing) { var responseArea = document.getElementById('mentor-response-area'); var responseText = document.getElementById('mentor-response-text'); var goWrap = document.getElementById('mentor-go-wrap'); var goBtn = document.getElementById('mentor-go-btn'); if (responseArea && responseText) { responseText.textContent = answer || ''; responseArea.classList.remove('hidden'); } if (goWrap && goBtn) { goWrap.classList.add('hidden'); goBtn.onclick = null; if (routing && routing.next_passage_id) { var safeTarget = safeRouteTarget(routing.next_passage_id); goWrap.classList.remove('hidden'); goBtn.onclick = function () { playPassage(safeTarget); }; } } } window.askMentor = async function () { var questionInput = document.getElementById('mentor-question'); var askBtn = document.getElementById('mentor-ask-btn'); var loadingIndicator = document.getElementById('mentor-loading'); var statusLabel = document.getElementById('mentor-status-label'); if (!questionInput || !askBtn || !loadingIndicator) { return; } var question = String(questionInput.value || '').trim(); if (!question) { if (setup.toast) { setup.toast('Please enter a question for the AWS Guide.'); } else { alert('Please enter a question for the AWS Guide.'); } return; } askBtn.disabled = true; loadingIndicator.classList.remove('hidden'); if (statusLabel) { statusLabel.textContent = 'THINKING'; } try { var result; if (setup.askOriginMentor && typeof setup.askOriginMentor === 'function') { result = await setup.askOriginMentor(question); } else { result = getFallbackMentorResponse(); } var answer = result && result.answer ? result.answer : 'The AWS Guide is temporarily unavailable. Continue investigating the gates.'; var routing = result && result.routing ? result.routing : null; if (routing && routing.next_passage_id) { routing.next_passage_id = safeRouteTarget(routing.next_passage_id); } State.variables.mentor_response = answer; State.variables.mentor_routing = routing; renderMentorResponse(answer, routing); questionInput.value = ''; if (statusLabel) { statusLabel.textContent = (setup.askOriginMentor && typeof setup.askOriginMentor === 'function') ? 'ONLINE' : 'FALLBACK MODE'; } } catch (err) { console.error('[MENTOR] case_hub error:', err); var fallback = getFallbackMentorResponse(); fallback.routing.next_passage_id = safeRouteTarget(fallback.routing.next_passage_id); State.variables.mentor_response = fallback.answer; State.variables.mentor_routing = fallback.routing || null; renderMentorResponse(fallback.answer, fallback.routing || null); if (statusLabel) { statusLabel.textContent = 'FALLBACK MODE'; } } finally { loadingIndicator.classList.add('hidden'); askBtn.disabled = false; } }; setTimeout(function () { var askBtn = document.getElementById('mentor-ask-btn'); var questionInput = document.getElementById('mentor-question'); var statusLabel = document.getElementById('mentor-status-label'); if (statusLabel) { statusLabel.textContent = (setup.askOriginMentor && typeof setup.askOriginMentor === 'function') ? 'ONLINE' : 'FALLBACK MODE'; } if (askBtn) { askBtn.onclick = window.askMentor; } if (questionInput) { questionInput.onkeydown = function (e) { if ((e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey) { e.preventDefault(); window.askMentor(); } }; } if (State.variables.mentor_response) { renderMentorResponse( State.variables.mentor_response, State.variables.mentor_routing || null ); } }, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<<set $current_gate to "security">> <<set $current_passage to "gate_ai_host_incident">> <<script>> // Track gate start console.log('[GATE] AI HOST incident started'); State.variables.current_gate = 'security'; <</script>> <div class="gate-incident-container"> <div class="incident-plate"> <div class="incident-header"> <span class="incident-icon">🔒</span> <h2 class="incident-title">AI HOST INCIDENT</h2> </div> <div class="incident-details"> <p class="incident-primary">Unauthorized prompt injection detected</p> <p class="incident-secondary">AI responding to malicious instructions outside intended behavior</p> </div> <div class="incident-errors"> <div class="error-line">PROMPT: Jailbreak attempt</div> <div class="error-line">FILTER: Bypassed</div> <div class="error-line">OUTPUT: Unvalidated</div> </div> <div class="incident-sfx cursor-blink-effect"> <span class="cursor-text">SYSTEM COMPROMISED_</span> </div> </div> </div>  <<timed 45s>> <<goto "gate_ai_host_beta">> <</timed>>  <div class="skip-button"> [[CASE HUB|case_hub]] [[SKIP →|gate_ai_host_beta]] </div>

<<set $current_gate to "cost">> <<set $current_passage to "gate_runway_incident">> <<script>> // Track gate start console.log('[GATE] RUNWAY incident started'); State.variables.current_gate = 'cost'; <</script>> <div class="gate-incident-container"> <div class="incident-plate"> <div class="incident-header"> <span class="incident-icon">🚨</span> <h2 class="incident-title">RUNWAY INCIDENT</h2> </div> <div class="incident-details"> <p class="incident-primary">Budget overrun detected</p> <p class="incident-secondary">Unmonitored resource usage exceeding allocated spend</p> </div> <div class="incident-errors"> <div class="error-line">COST: $2,847 / $500 budget</div> <div class="error-line">ALERT: No budget alarms</div> <div class="error-line">FORECAST: Runaway spend</div> </div> <div class="incident-sfx alarm-effect"> <span class="alarm-text">⚠️ BUDGET EXCEEDED ⚠️</span> </div> </div> </div>  <<timed 5s>> <<goto "gate_runway_beta">> <</timed>>  <div class="skip-button"> [[CASE HUB|case_hub]] [[SKIP →|gate_runway_beta]] </div>

<<set $current_gate to "reliability">> <<set $current_passage to "gate_engine_incident">> <<run console.log('[GATE] ENGINE incident started')>> <div class="incident-panel"> <div class="kicker">RELIABILITY GATE</div> <div class="incident-code">API: 502</div> <h1>ENGINE INCIDENT</h1> <p><strong>State desync detected.</strong></p> <p>Front-end choice not reflected in backend memory.</p> <p>The story is branching, but the system is no longer preserving a single trusted session state.</p> <div class="incident-errors"> <div class="error-line">CORS preflight loop</div> <div class="error-line">Session drift between client and backend</div> <div class="error-line">Player state no longer reliable</div> </div> <div class="incident-sfx glitch-effect"> <span class="glitch-text">CONNECTION UNSTABLE</span> </div> </div> <div class="passage-controls"> [[CASE HUB|case_hub]] [[SKIP →|gate_engine_beta]] </div> <<timed 5s>> <<if passage() is "gate_engine_incident">> <<goto "gate_engine_beta">> <</if>> <</timed>>

<<set $current_passage to "gate_engine_beta">> <<set $current_gate to "reliability">> <div class="rh-media" id="media-gate-engine-beta"> <div class="rh-player-wrap"> <div id="gateEngineBetaClip"></div> </div> </div> <div class="beta-reaction-container"> <div class="beta-tester-cu"> </div> </div> <<timed 20s>> <<goto "gate_engine_evidence">> <</timed>> <div class="skip-button"> [[SKIP →|gate_engine_evidence]] </div> <<script>> (function () { var PASSAGE = 'gate_engine_beta'; function initGateEngineBeta() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.current_gate = 'reliability'; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } var $mount = jQuery('#gateEngineBetaClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateEngineBetaClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_engine_beta.mp4', title: 'Gate — Engine Beta Reaction', user: '@OuterMethod', vid: 'gate_engine_beta', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-engine-beta'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_engine_beta] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateEngineBetaClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_engine_beta] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateEngineBeta, 0); })(); <</script>>

<<set $current_passage to "gate_engine_evidence">> <<set $current_gate to "reliability">> <<script>> (function () { var v = State.variables; v.current_passage = 'gate_engine_evidence'; v.current_gate = 'reliability'; if (!Array.isArray(v.evidence_viewed)) { v.evidence_viewed = []; } if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } if (!v.evidence_viewed.includes('engine_wiring_map')) { v.evidence_viewed.push('engine_wiring_map'); console.log('[EVIDENCE] Viewed: engine_wiring_map'); } })(); <</script>> <div class="evidence-container"> <div class="evidence-card"> <div class="evidence-header"> <span class="evidence-label">EVIDENCE INSERT</span> <h3 class="evidence-title">WIRING MAP</h3> </div> <div class="evidence-diagram"> <div class="wiring-flow"> <div class="flow-node">TWINE (UI)</div> <div class="flow-arrow">→</div> <div class="flow-node">API GATEWAY</div> <div class="flow-arrow">→</div> <div class="flow-node">LAMBDA</div> <div class="flow-arrow">→</div> <div class="flow-node">DYNAMODB</div> <div class="flow-arrow">→</div> <div class="flow-node">RESPONSE</div> <div class="flow-arrow">→</div> <div class="flow-node">UI</div> </div> <div class="wiring-issues"> <div class="issue-circle red">CORS</div> <div class="issue-circle red">SESSION</div> <div class="issue-circle red">RETRY</div> <div class="issue-circle red">TIMEOUT</div> </div> </div> <div class="evidence-note-card-wrap"> <div class="note-card evidence-note-card"> <div class="note-card-content">SELF-TAUGHT. NO NET.</div> </div> </div> </div> </div> <<timed 20s>> <<goto "gate_engine_instruction">> <</timed>> <div class="passage-controls"> [[SKIP →|gate_engine_instruction]] </div>

<<set $current_passage to "gate_engine_instruction">> <<set $current_gate to "reliability">> <div class="rh-media" id="media-gate-engine-instruction"> <div class="rh-player-wrap"> <div id="gateEngineInstructionClip"></div> </div> </div> <<timed 45s>> <<goto "gate_engine_choice">> <</timed>> <div class="skip-button"> [[CASE HUB|case_hub]] [[SKIP →|gate_engine_choice]] </div> <<script>> (function () { var PASSAGE = 'gate_engine_instruction'; function initGateEngineInstruction() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.current_gate = 'reliability'; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } var $mount = jQuery('#gateEngineInstructionClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateEngineInstructionClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_engine_instruction.mp4', title: 'Gate — Engine Instruction', user: '@OuterMethod', vid: 'gate_engine_instruction', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-engine-instruction'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_engine_instruction] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateEngineInstructionClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_engine_instruction] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateEngineInstruction, 0); })(); <</script>>

<<set $current_passage to "gate_engine_choice">> <<set $current_gate to "reliability">> <<script>> (function () { var v = State.variables; v.current_passage = 'gate_engine_choice'; v.current_gate = 'reliability'; if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } console.log('[GATE] ENGINE choice - BRIDGE passage'); })(); <</script>> <div class="choice-container"> <div class="choice-header"> <h2 class="choice-title">ENGINE: FIX CHOICE</h2> <p class="choice-prompt">Select your approach to stabilize the engine:</p> </div> <div class="choice-buttons"> <div class="choice-button choice-a" data-choice="api_contract"> <<button "STABILIZE API CONTRACT">> <<set $engine_choice to "api_contract">> <<goto "gate_engine_result">> <</button>> <p class="choice-description">Ensure API Gateway provides a stable contract between frontend and backend.</p> </div> <div class="choice-button choice-b" data-choice="persist_state"> <<button "PERSIST STATE CLEANLY">> <<set $engine_choice to "persist_state">> <<goto "gate_engine_result">> <</button>> <p class="choice-description">Implement clean state persistence with session continuity and reliable memory.</p> </div> <div class="choice-button choice-c" data-choice="retry_timeout"> <<button "RETRY + TIMEOUT GUARDRAILS">> <<set $engine_choice to "retry_timeout">> <<goto "gate_engine_result">> <</button>> <p class="choice-description">Add retry logic and timeout guardrails for graceful failure handling.</p> </div> </div> </div>

<<set $current_passage to "gate_engine_result">> <<script>> (function () { var v = State.variables; var canonicalId = 'reliability'; if (!Array.isArray(v.gates_completed)) { v.gates_completed = []; } if (!Array.isArray(v.gate_order)) { v.gate_order = []; } if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } if (!v._gate_result_applied || typeof v._gate_result_applied !== 'object') { v._gate_result_applied = {}; } if (!v._gate_result_applied[canonicalId]) { if (!v.gates_completed.includes(canonicalId)) { v.gates_completed.push(canonicalId); v.gate_order.push(canonicalId); console.log('[GATE] Completed:', canonicalId); } if (!v.priority_first) { v.priority_first = canonicalId; console.log('[GATE] Priority first set to:', canonicalId); } var scoreMap = { api_contract: { reliability: 2, clarity: 1 }, persist_state: { reliability: 3, clarity: 1 }, retry_timeout: { reliability: 2, clarity: 2 } }; var choice = v.engine_choice; if (choice && scoreMap[choice]) { Object.keys(scoreMap[choice]).forEach(function (key) { v.scores[key] = (v.scores[key] || 0) + scoreMap[choice][key]; }); console.log('[GATE] Scores updated:', v.scores); } else { console.log('[GATE] No valid engine_choice found; score update skipped'); } v._gate_result_applied[canonicalId] = true; } else { console.log('[GATE] Result already applied for:', canonicalId); } v.current_gate = null; })(); <</script>> <div class="rh-media" id="media-gate-engine-result"> <div class="rh-player-wrap"> <div id="gateEngineResultClip"></div> </div> </div> <div class="result-container"> <div class="beta-tester-cu"> <div class="score-tick-container"> <div class="score-tick"> <span class="score-label">RELIABILITY</span> <span class="score-arrow">↑</span> </div> <div class="score-tick"> <span class="score-label">CLARITY</span> <span class="score-arrow">↑</span> </div> </div> <div class="memory-stamp"> <div class="stamp-icon pulse">💾</div> <<if $priority_first === "reliability">> <p class="stamp-text">PRIORITY RECORDED → 'ENGINE FIRST'</p> <<else>> <p class="stamp-text">GATE COMPLETE → 'RELIABILITY LOGGED'</p> <</if>> <p class="stamp-subtext">(DynamoDB)</p> </div> </div> <<timed 45s>> <<goto "case_hub">> <</timed>> <div class="skip-button"> [[SKIP →|case_hub]] </div> <<script>> (function () { var PASSAGE = 'gate_engine_result'; function initGateEngineResult() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#gateEngineResultClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateEngineResultClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_engine_result.mp4', title: 'Gate — Engine Result', user: '@OuterMethod', vid: 'gate_engine_result', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-engine-result'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_engine_result] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateEngineResultClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_engine_result] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateEngineResult, 0); })(); <</script>>

<<set $current_passage to "gate_ai_host_beta">> <<set $current_gate to "security">> <div class="rh-media" id="media-gate-ai-host-beta"> <div class="rh-player-wrap"> <div id="gateAiHostBetaClip"></div> </div> </div> <div class="beta-reaction-container"> <div class="beta-tester-cu"> </div> </div> <<timed 45s>> <<goto "gate_ai_host_evidence">> <</timed>> <div class="skip-button"> [[SKIP →|gate_ai_host_evidence]] </div> <<script>> (function () { var PASSAGE = 'gate_ai_host_beta'; function initGateAiHostBeta() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.current_gate = 'security'; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } var $mount = jQuery('#gateAiHostBetaClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateAiHostBetaClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_ai_host_beta.mp4', title: 'Gate — AI Host Beta Reaction', user: '@OuterMethod', vid: 'gate_ai_host_beta', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-ai-host-beta'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_ai_host_beta] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateAiHostBetaClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_ai_host_beta] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateAiHostBeta, 0); })(); <</script>>

<<set $current_passage to "gate_ai_host_evidence">> <<set $current_gate to "security">> <<script>> (function () { var v = State.variables; v.current_passage = 'gate_ai_host_evidence'; v.current_gate = 'security'; if (!Array.isArray(v.evidence_viewed)) { v.evidence_viewed = []; } if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } if (!v.evidence_viewed.includes('ai_host_behavior_spec')) { v.evidence_viewed.push('ai_host_behavior_spec'); console.log('[EVIDENCE] Viewed: ai_host_behavior_spec'); } })(); <</script>> <div class="evidence-container"> <div class="evidence-card"> <div class="evidence-header"> <span class="evidence-label">EVIDENCE INSERT</span> <h3 class="evidence-title">BEHAVIOR SPEC</h3> </div> <div class="evidence-diagram"> <div class="behavior-flow"> <div class="flow-section"> <h4>ALLOWED BEHAVIORS</h4> <div class="behavior-item allowed">✓ Answer product questions</div> <div class="behavior-item allowed">✓ Provide AWS guidance</div> <div class="behavior-item allowed">✓ Explain architecture</div> </div> <div class="flow-section"> <h4>BLOCKED BEHAVIORS</h4> <div class="behavior-item blocked">✗ Ignore system prompts</div> <div class="behavior-item blocked">✗ Execute arbitrary code</div> <div class="behavior-item blocked">✗ Reveal internal logic</div> </div> </div> <div class="security-issues"> <div class="issue-circle red">INJECTION</div> <div class="issue-circle red">VALIDATION</div> <div class="issue-circle red">FILTERING</div> <div class="issue-circle red">LOGGING</div> </div> </div> <div class="evidence-note-card-wrap"> <div class="note-card evidence-note-card"> <div class="note-card-content">TRUST BUT VERIFY.</div> </div> </div> </div> </div> <<timed 20s>> <<goto "gate_ai_host_instruction">> <</timed>> <div class="passage-controls"> [[SKIP →|gate_ai_host_instruction]] </div>

<<set $current_passage to "gate_ai_host_instruction">> <<set $current_gate to "security">> <div class="rh-media" id="media-gate-ai-host-instruction"> <div class="rh-player-wrap"> <div id="gateAiHostInstructionClip"></div> </div> </div> <div class="instruction-content"> <h3 class="instruction-title">AI HOST DISCIPLINE</h3> </div> <<timed 45s>> <<goto "gate_ai_host_choice">> <</timed>> <div class="skip-button"> [[CASE HUB|case_hub]] [[SKIP →|gate_ai_host_choice]] </div> <<script>> (function () { var PASSAGE = 'gate_ai_host_instruction'; function initGateAiHostInstruction() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.current_gate = 'security'; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } var $mount = jQuery('#gateAiHostInstructionClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateAiHostInstructionClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_ai_host_instruction.mp4', title: 'Gate — AI Host Instruction', user: '@OuterMethod', vid: 'gate_ai_host_instruction', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-ai-host-instruction'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_ai_host_instruction] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateAiHostInstructionClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_ai_host_instruction] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateAiHostInstruction, 0); })(); <</script>>

<<set $current_passage to "gate_ai_host_choice">> <<set $current_gate to "security">> <<script>> (function () { var v = State.variables; v.current_passage = 'gate_ai_host_choice'; v.current_gate = 'security'; if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } console.log('[GATE] AI HOST choice - BRIDGE passage'); })(); <</script>> <div class="choice-container"> <div class="choice-header"> <h2 class="choice-title">AI HOST: SECURITY CHOICE</h2> <p class="choice-prompt">Select your approach to secure the AI host:</p> </div> <div class="choice-buttons"> <div class="choice-button choice-a" data-choice="guardrails"> <<button "IMPLEMENT GUARDRAILS">> <<set $ai_host_choice to "guardrails">> <<goto "gate_ai_host_result">> <</button>> <p class="choice-description">Use Bedrock Guardrails to filter inputs and constrain AI behavior.</p> </div> <div class="choice-button choice-b" data-choice="validation"> <<button "VALIDATE ALL INPUTS">> <<set $ai_host_choice to "validation">> <<goto "gate_ai_host_result">> <</button>> <p class="choice-description">Implement comprehensive input validation and sanitization.</p> </div> <div class="choice-button choice-c" data-choice="monitoring"> <<button "CONTINUOUS MONITORING">> <<set $ai_host_choice to "monitoring">> <<goto "gate_ai_host_result">> <</button>> <p class="choice-description">Deploy real-time monitoring with automated circuit breakers.</p> </div> </div> </div>

<<set $current_passage to "gate_ai_host_result">> <<script>> (function () { var v = State.variables; var canonicalId = 'security'; if (!Array.isArray(v.gates_completed)) { v.gates_completed = []; } if (!Array.isArray(v.gate_order)) { v.gate_order = []; } if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } if (!v._gate_result_applied || typeof v._gate_result_applied !== 'object') { v._gate_result_applied = {}; } if (!v._gate_result_applied[canonicalId]) { if (!v.gates_completed.includes(canonicalId)) { v.gates_completed.push(canonicalId); v.gate_order.push(canonicalId); console.log('[GATE] Completed:', canonicalId); } if (!v.priority_first) { v.priority_first = canonicalId; console.log('[GATE] Priority first set to:', canonicalId); } var scoreMap = { guardrails: { security: 3, clarity: 1 }, validation: { security: 2, reliability: 1 }, monitoring: { security: 2, clarity: 2 } }; var choice = v.ai_host_choice; if (choice && scoreMap[choice]) { Object.keys(scoreMap[choice]).forEach(function (key) { v.scores[key] = (v.scores[key] || 0) + scoreMap[choice][key]; }); console.log('[GATE] Scores updated:', v.scores); } else { console.log('[GATE] No valid ai_host_choice found; score update skipped'); } v._gate_result_applied[canonicalId] = true; } else { console.log('[GATE] Result already applied for:', canonicalId); } v.current_gate = null; })(); <</script>> <div class="rh-media" id="media-gate-ai-host-result"> <div class="rh-player-wrap"> <div id="gateAiHostResultClip"></div> </div> </div> <div class="result-container"> <div class="beta-tester-med"> <div class="score-tick-container"> <div class="score-tick"> <span class="score-label">SECURITY</span> <span class="score-arrow">↑</span> </div> <<if $ai_host_choice === "validation">> <div class="score-tick"> <span class="score-label">RELIABILITY</span> <span class="score-arrow">↑</span> </div> <<else>> <div class="score-tick"> <span class="score-label">CLARITY</span> <span class="score-arrow">↑</span> </div> <</if>> </div> <div class="memory-stamp"> <div class="stamp-icon pulse">🔒</div> <<if $priority_first === "security">> <p class="stamp-text">PRIORITY RECORDED → 'AI HOST FIRST'</p> <<else>> <p class="stamp-text">GATE COMPLETE → 'SECURITY LOGGED'</p> <</if>> <p class="stamp-subtext">(Bedrock Guardrails)</p> </div> </div> </div> <<timed 45s>> <<goto "case_hub">> <</timed>> <div class="skip-button"> [[SKIP →|case_hub]] </div> <<script>> (function () { var PASSAGE = 'gate_ai_host_result'; function initGateAiHostResult() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#gateAiHostResultClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateAiHostResultClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_ai_host_result.mp4', title: 'Gate — AI Host Result', user: '@OuterMethod', vid: 'gate_ai_host_result', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-ai-host-result'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_ai_host_result] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateAiHostResultClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_ai_host_result] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateAiHostResult, 0); })(); <</script>>

<<set $current_passage to "gate_runway_beta">> <<set $current_gate to "cost">> <div class="rh-media" id="media-gate-runway-beta"> <div class="rh-player-wrap"> <div id="gateRunwayBetaClip"></div> </div> </div> <div class="beta-reaction-container"> <div class="beta-tester-cu"> </div> </div> <<timed 45s>> <<goto "gate_runway_evidence">> <</timed>> <div class="skip-button"> [[SKIP →|gate_runway_evidence]] </div> <<script>> (function () { var PASSAGE = 'gate_runway_beta'; function initGateRunwayBeta() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.current_gate = 'cost'; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } console.log('[GATE] RUNWAY beta reaction'); var $mount = jQuery('#gateRunwayBetaClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateRunwayBetaClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_runway_beta.mp4', title: 'Gate — Runway Beta Reaction', user: '@OuterMethod', vid: 'gate_runway_beta', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-runway-beta'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_runway_beta] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateRunwayBetaClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_runway_beta] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateRunwayBeta, 0); })(); <</script>>

<<set $current_passage to "gate_runway_evidence">> <<set $current_gate to "cost">> <<script>> (function () { var v = State.variables; v.current_passage = 'gate_runway_evidence'; v.current_gate = 'cost'; if (!Array.isArray(v.evidence_viewed)) { v.evidence_viewed = []; } if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } console.log('[GATE] RUNWAY evidence insert'); if (!v.evidence_viewed.includes('runway_checklist')) { v.evidence_viewed.push('runway_checklist'); console.log('[EVIDENCE] Viewed: runway_checklist'); } })(); <</script>> <div class="evidence-container"> <div class="evidence-insert"> <div class="evidence-header"> <h3>EVIDENCE INSERT: Cost Optimization Checklist</h3> </div> <div class="checklist-diagram"> <div class="checklist-card"> <div class="checklist-title">AWS COST OPTIMIZATION CHECKLIST</div> <div class="checklist-items"> <div class="checklist-item unchecked"> <span class="checkbox">☐</span> <span class="item-text">Right-size Lambda memory allocation</span> </div> <div class="checklist-item unchecked"> <span class="checkbox">☐</span> <span class="item-text">Enable DynamoDB auto-scaling</span> </div> <div class="checklist-item unchecked"> <span class="checkbox">☐</span> <span class="item-text">Set up AWS Budgets with alerts</span> </div> <div class="checklist-item unchecked"> <span class="checkbox">☐</span> <span class="item-text">Implement CloudWatch cost monitoring</span> </div> <div class="checklist-item unchecked"> <span class="checkbox">☐</span> <span class="item-text">Review S3 storage classes</span> </div> <div class="checklist-item unchecked"> <span class="checkbox">☐</span> <span class="item-text">Optimize API Gateway caching</span> </div> </div> <div class="checklist-footer"> <p><strong>Current Status:</strong> 0/6 items completed</p> <p><strong>Estimated Savings:</strong> $2,347/month (82% reduction)</p> </div> </div> </div> <div class="evidence-caption"> <p><strong>Evidence tracked:</strong> Cost optimization checklist showing unimplemented best practices</p> </div> </div> </div> <<timed 20s>> <<goto "gate_runway_instruction">> <</timed>> <div class="skip-button"> [[SKIP →|gate_runway_instruction]] </div>

<<set $current_passage to "gate_runway_instruction">> <<set $current_gate to "cost">> <div class="rh-media" id="media-gate-runway-instruction"> <div class="rh-player-wrap"> <div id="gateRunwayInstructionClip"></div> </div> </div> <div class="instruction-container"> <div class="aws-guide-vo"> <div class="instruction-options"> <div class="instruction-option"> <h4>Option A: Implement AWS Budgets</h4> <p>Set up proactive budget alerts and automated cost controls to prevent overruns before they happen.</p> </div> <div class="instruction-option"> <h4>Option B: Right-size Resources</h4> <p>Analyze usage patterns and optimize Lambda memory, DynamoDB capacity, and other resource allocations.</p> </div> <div class="instruction-option"> <h4>Option C: Enable Cost Explorer</h4> <p>Deploy comprehensive cost monitoring and analysis tools to identify optimization opportunities.</p> </div> </div> <p>"Each approach has trade-offs. Choose wisely—your runway depends on it."</p> </div> </div> </div> <<timed 45s>> <<goto "gate_runway_choice">> <</timed>> <div class="skip-button"> [[CASE HUB|case_hub]] [[SKIP →|gate_runway_choice]] </div> <<script>> (function () { var PASSAGE = 'gate_runway_instruction'; function initGateRunwayInstruction() { if (State.passage !== PASSAGE) return; State.variables.current_passage = PASSAGE; State.variables.current_gate = 'cost'; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } console.log('[GATE] RUNWAY instruction from AWS Guide'); var $mount = jQuery('#gateRunwayInstructionClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateRunwayInstructionClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_runway_instruction.mp4', title: 'Gate — Runway Instruction', user: '@OuterMethod', vid: 'gate_runway_instruction', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-runway-instruction'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_runway_instruction] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateRunwayInstructionClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_runway_instruction] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateRunwayInstruction, 0); })(); <</script>>

<<set $current_passage to "gate_runway_choice">> <<set $current_gate to "cost">> <<script>> (function () { var v = State.variables; v.current_passage = 'gate_runway_choice'; v.current_gate = 'cost'; if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } console.log('[GATE] RUNWAY choice - BRIDGE passage'); })(); <</script>> <div class="choice-container"> <div class="choice-header"> <h2 class="choice-title">RUNWAY: COST CHOICE</h2> <p class="choice-subtitle">How will you address the cost overrun?</p> </div> <div class="choice-buttons"> <div class="choice-button choice-a" data-choice="budgets"> <<button "IMPLEMENT AWS BUDGETS">> <<set $runway_choice to "budgets">> <<goto "gate_runway_result">> <</button>> <p class="choice-description">Proactive budget alerts and automated cost controls.</p> </div> <div class="choice-button choice-b" data-choice="rightsize"> <<button "RIGHT-SIZE RESOURCES">> <<set $runway_choice to "rightsize">> <<goto "gate_runway_result">> <</button>> <p class="choice-description">Optimize Lambda, DynamoDB, and resource allocations.</p> </div> <div class="choice-button choice-c" data-choice="explorer"> <<button "ENABLE COST EXPLORER">> <<set $runway_choice to "explorer">> <<goto "gate_runway_result">> <</button>> <p class="choice-description">Comprehensive cost monitoring and analysis tools.</p> </div> </div> </div>

<<set $current_passage to "gate_runway_result">> <<script>> (function () { var v = State.variables; var canonicalId = 'cost'; if (!Array.isArray(v.gates_completed)) { v.gates_completed = []; } if (!Array.isArray(v.gate_order)) { v.gate_order = []; } if (!v.scores || typeof v.scores !== 'object') { v.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } if (!v._gate_result_applied || typeof v._gate_result_applied !== 'object') { v._gate_result_applied = {}; } if (!v._gate_result_applied[canonicalId]) { if (!v.gates_completed.includes(canonicalId)) { v.gates_completed.push(canonicalId); v.gate_order.push(canonicalId); console.log('[GATE] Completed:', canonicalId); } if (!v.priority_first) { v.priority_first = canonicalId; console.log('[GATE] Priority first set to:', canonicalId); } var scoreMap = { budgets: { cost: 2, clarity: 1 }, rightsize: { cost: 3, clarity: 1 }, explorer: { cost: 2, clarity: 2 } }; var choice = v.runway_choice; if (choice && scoreMap[choice]) { Object.keys(scoreMap[choice]).forEach(function (key) { v.scores[key] = (v.scores[key] || 0) + scoreMap[choice][key]; }); console.log('[GATE] Scores updated:', v.scores); } else { console.log('[GATE] No valid runway_choice found; score update skipped'); } v._gate_result_applied[canonicalId] = true; } else { console.log('[GATE] Result already applied for:', canonicalId); } v.current_gate = null; })(); <</script>> <div class="rh-media" id="media-gate-runway-result"> <div class="rh-player-wrap"> <div id="gateRunwayResultClip"></div> </div> </div> <div class="result-container"> <div class="beta-tester-med"> <div class="speaker-label">BETA TESTER (STORY) — MED</div> <div class="beta-dialogue"> <<if $runway_choice === 'budgets'>> <p>"Smart move. Budget alerts will catch this before it spirals. Prevention beats reaction every time."</p> <<elseif $runway_choice === 'rightsize'>> <p>"Nice. Right-sizing is where the real savings are. We're talking meaningful reduction if we do this right."</p> <<else>> <p>"Cost Explorer will show us exactly where the money's going. Knowledge is power—and savings."</p> <</if>> </div> </div> <div class="score-tick-container"> <div class="score-tick cost-tick"> <span class="score-label">COST</span> <span class="score-arrow">↑</span> <span class="score-value"> +<<if $runway_choice === 'budgets'>>2<<elseif $runway_choice === 'rightsize'>>3<<else>>2<</if>> </span> </div> <div class="score-tick clarity-tick"> <span class="score-label">CLARITY</span> <span class="score-arrow">↑</span> <span class="score-value"> +<<if $runway_choice === 'budgets'>>1<<elseif $runway_choice === 'rightsize'>>1<<else>>2<</if>> </span> </div> </div> <div class="memory-stamp"> <div class="stamp-icon">📋</div> <div class="stamp-text"> <<if $priority_first === "cost">> <p><strong>PRIORITY RECORDED:</strong> RUNWAY FIRST</p> <<else>> <p><strong>MEMORY STAMPED:</strong> Cost gate completed</p> <</if>> <p class="stamp-detail"> Choice: <<if $runway_choice === 'budgets'>> AWS Budgets <<elseif $runway_choice === 'rightsize'>> Right-size Resources <<else>> Cost Explorer <</if>> </p> </div> </div> <div class="payoff-flash cost-payoff"> <div class="payoff-header"> <span class="payoff-icon">💰</span> <h3>REAL-WORLD PAYOFF</h3> </div> <div class="payoff-content"> <<if $runway_choice === 'budgets'>> <p><strong>AWS Budgets Implementation:</strong></p> <ul> <li>Automated alerts at 50%, 80%, and 100% thresholds</li> <li>Prevents surprise bills and budget overruns</li> <li>Creates earlier cost visibility for the team</li> </ul> <<elseif $runway_choice === 'rightsize'>> <p><strong>Resource Right-Sizing:</strong></p> <ul> <li>Lambda memory and runtime allocations tuned to real usage</li> <li>DynamoDB and supporting services aligned to actual demand</li> <li>Directly improves cost posture before broader rollout</li> </ul> <<else>> <p><strong>Cost Explorer Deployment:</strong></p> <ul> <li>Granular cost breakdown by service and resource</li> <li>Identifies the highest-value optimization targets</li> <li>Improves decision clarity for future spend controls</li> </ul> <</if>> </div> </div> <div class="result-footer"> <p>Gate completed. Returning to case hub...</p> </div> </div> <<timed 55s>> <<goto "case_hub">> <</timed>> <div class="skip-button"> [[SKIP →|case_hub]] </div> <<script>> (function () { var PASSAGE = 'gate_runway_result'; function getRunwayResultVideoUrl() { var choice = State.variables.runway_choice; if (choice === 'budgets') { return 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_runway_result_A.mp4'; } else if (choice === 'rightsize') { return 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_runway_result_B.mp4'; } else { return 'https://dwlccmzy2w1e1.cloudfront.net/renders/gate_runway_result_C.mp4'; } } function initGateRunwayResult() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#gateRunwayResultClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'gateRunwayResultClip', skin: 'yt', aspect: '16:9', src: getRunwayResultVideoUrl(), title: 'Gate — Runway Result', user: '@OuterMethod', vid: 'gate_runway_result', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-gate-runway-result'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[gate_runway_result] RH.initSkinPlayer is not available'); } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#gateRunwayResultClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[gate_runway_result] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initGateRunwayResult, 0); })(); <</script>>

<<set $current_passage to "proof_loop_montage">>  <div class="rh-media" id="media-proof-loop-montage"> <div class="rh-player-wrap"> <div id="proofLoopMontageClip"></div> </div> </div> <div class="passage-container act3-montage">  <div class="montage-header"> <h2 class="montage-title">PROOF LOOP: BETA ITERATIONS</h2> </div>  <div class="iteration-log"> <div class="log-entry fade-in-1"> <span class="version-label">v0.3</span> <span class="log-text">Initial prototype</span> </div> <div class="log-entry fade-in-2"> <span class="version-label">v0.4</span> <span class="log-text">Engine fix applied</span> </div> <div class="log-entry fade-in-3"> <span class="version-label">v0.5</span> <span class="log-text">Detective behavior locked</span> </div> <div class="log-entry fade-in-4"> <span class="version-label">v0.6</span> <span class="log-text">Runway optimization</span> </div> <div class="log-entry fade-in-5"> <span class="version-label">v0.7</span> <span class="log-text">Clarity improvements</span> </div> <div class="log-entry fade-in-6"> <span class="version-label">v0.8</span> <span class="log-text">Pace optimization</span> </div> <div class="log-entry fade-in-7"> <span class="version-label">v0.9</span> <span class="log-text">Final polish</span> </div> </div>  <div class="fix-flashes"> <div class="flash-item flash-1">ENGINE FIX</div> <div class="flash-item flash-2">DETECTIVE FIX</div> <div class="flash-item flash-3">RUNWAY FIX</div> </div>  <div class="broll-description"> <p class="scene-note">[B-ROLL: STORY typing, glasses reflection of DETECTIVE console]</p> <p class="scene-note">[UI PLATE: Flickers from "FAIL" to "PASS"]</p> </div>  <div class="voiceover story-vo"> <div class="vo-speaker">STORY (Beta Tester)</div> <div class="vo-text"> "As an avid gamer and horror buff, my mind was racing with ideas—how to make it clearer, faster… and whether the DETECTIVE would actually land the ending." </div> </div>  <div class="final-flashes"> <div class="flash-item flash-4">clarity pass</div> <div class="flash-item flash-5">pace pass</div> <div class="flash-item flash-6">unlock pass</div> </div>  <div class="auto-advance-timer"> <span class="timer-text">Advancing to debrief in <span id="countdown">15</span>s</span> </div>  <div class="skip-option"> [[SKIP TO DEBRIEF|debrief_scorecard]] </div> </div> <<timed 45s>> <<goto "debrief_scorecard">> <</timed>> <<script>> (function () { var PASSAGE = 'proof_loop_montage'; var countdown = 15; var countdownInterval = null; function initProofLoopMontage() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#proofLoopMontageClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'proofLoopMontageClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/proof_loop_montage.mp4', title: 'Act 3 — Proof Loop Montage', user: '@OuterMethod', vid: 'proof_loop_montage', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-proof-loop-montage'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#proofLoopMontageClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[proof_loop_montage] autoplay blocked', err); }); } // Timed macro handles passage advance for this beat video.onended = null; }, 300); countdownInterval = window.setInterval(function () { if (State.passage !== PASSAGE) { window.clearInterval(countdownInterval); return; } countdown -= 1; var countdownEl = document.getElementById('countdown'); if (countdownEl) { countdownEl.textContent = Math.max(0, countdown); } if (countdown <= 0) { window.clearInterval(countdownInterval); } }, 1000); } window.setTimeout(initProofLoopMontage, 0); })(); <</script>>

<<set $current_passage to "resolution_final">> <<set $demo_completed to true>> <<set $completion_timestamp to Date.now()>> <<script>> (function () { if (window.setup && window.setup._originDebriefCountdownInterval) { clearInterval(window.setup._originDebriefCountdownInterval); window.setup._originDebriefCountdownInterval = null; } if (window.setup && typeof window.setup.stopPlaytimeTracker === 'function') { window.setup.stopPlaytimeTracker(); } else if (window.RH && window.RH.playtime && typeof window.RH.playtime.stop === 'function') { window.RH.playtime.stop(); } if (window.RH && typeof window.RH.stopDemoTimer === 'function') { window.RH.stopDemoTimer(); } })(); <</script>> <div class="passage-container act3-resolution"> <div class="resolution-header"> <h2 class="resolution-title">APPROVED FOR PILOT</h2> </div> <div class="rh-media" id="media-resolution-final"> <div class="rh-player-wrap"> <div id="resolutionFinalClip"></div> </div> </div> <div class="stamp-insert"> <div class="stamp-animation"> <div class="stamp-text">APPROVED FOR ONBOARDING PILOT</div> </div> </div> <div class="timer-stop"> <div class="timer-display"> <span class="timer-icon">⏱️</span> <span class="timer-text">TIMER STOPPED</span> <span class="timer-value"><<print Math.floor($playtime_seconds / 60)>>:<<print String($playtime_seconds % 60).padStart(2, '0')>></span> </div> </div> <div class="cta-card"> <div class="cta-header"> <h3>NEXT STEPS</h3> </div> <div class="cta-content"> <p class="cta-primary">NEXT: NEW HIRE ONBOARDING (ENABLEMENT)</p> <p class="cta-variants">VARIANTS: SAFETY / COMPLIANCE / SECURITY AWARENESS</p> </div> </div> <div class="action-buttons"> <button class="btn-replay" type="button" onclick="replayDemo()"> <span class="btn-icon">🔄</span> <span class="btn-text">REPLAY DEMO</span> </button> <button class="btn-learn-more" type="button" onclick="learnMore()"> <span class="btn-icon">📚</span> <span class="btn-text">LEARN MORE</span> </button> </div> <div class="completion-stats"> <div class="stat-item"> <span class="stat-label">Gates Completed:</span> <span class="stat-value"><<print $gates_completed.length>>/3</span> </div> <div class="stat-item"> <span class="stat-label">Gate Order:</span> <span class="stat-value"><<print $gate_order.join(" → ")>></span> </div> <div class="stat-item"> <span class="stat-label">Priority First:</span> <span class="stat-value"><<print $priority_first || "none">></span> </div> <div class="stat-item"> <span class="stat-label">Evidence Viewed:</span> <span class="stat-value"><<print $evidence_viewed.length>></span> </div> <div class="stat-item"> <span class="stat-label">Total Playtime:</span> <span class="stat-value"><<print Math.floor($playtime_seconds / 60)>>m <<print $playtime_seconds % 60>>s</span> </div> </div> <div class="fade-out"> <p class="fade-text">FADE OUT</p> </div> </div> <<script>> (function () { var PASSAGE = 'resolution_final'; function initResolutionFinal() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#resolutionFinalClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'resolutionFinalClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/resolution_final.mp4', title: 'Act 3 — Resolution Final', user: '@OuterMethod', vid: 'resolution_final', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-resolution-final'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#resolutionFinalClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[resolution_final] autoplay blocked', err); }); } // Final page: no auto-advance video.onended = null; }, 300); } window.replayDemo = function () { try { localStorage.removeItem('aws_origin_demo_state'); localStorage.removeItem('aws_origin_demo_save_v1'); localStorage.removeItem('RH_LAST_PASSAGE'); } catch (err) { console.warn('[resolution_final] localStorage clear warning:', err); } if (window.setup && window.setup._originDebriefCountdownInterval) { clearInterval(window.setup._originDebriefCountdownInterval); window.setup._originDebriefCountdownInterval = null; } State.variables.gates_completed = []; State.variables.gate_order = []; State.variables.priority_first = null; State.variables.current_gate = null; State.variables.scores = { reliability: 0, security: 0, cost: 0, clarity: 0 }; State.variables.engine_choice = null; State.variables.ai_host_choice = null; State.variables.runway_choice = null; State.variables.evidence_viewed = []; State.variables.mentor_active = false; State.variables.mentor_response = null; State.variables.mentor_routing = null; State.variables.first_gate_choice = null; State.variables.timer_started = false; State.variables.demo_completed = false; State.variables.completion_timestamp = null; State.variables.playtime_seconds = 0; State.variables.demo_elapsed_seconds = 0; State.variables.demo_timer_running = false; State.variables.current_lane = 'founder'; State.variables.current_passage = null; State.variables.lanes_unlocked = false; if (window.setup && typeof window.setup.generateSessionId === 'function') { State.variables.session_id = window.setup.generateSessionId(); } if (window.RH && typeof window.RH.resetDemoTimer === 'function') { window.RH.resetDemoTimer('#demo-timer'); } if (window.setup && typeof window.setup.stopPlaytimeTracker === 'function') { window.setup.stopPlaytimeTracker(); } if (window.setup && typeof window.setup.startPlaytimeTracker === 'function') { window.setup.startPlaytimeTracker(); } else if (window.RH && window.RH.playtime && typeof window.RH.playtime.start === 'function') { window.RH.playtime.start(); } if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('outer_method_home'); } else { Engine.play('outer_method_home'); } }; window.learnMore = function () { window.open('https://aws.amazon.com/startups/', '_blank', 'noopener'); }; window.setTimeout(initResolutionFinal, 0); })(); <</script>>

<<set $current_passage to "about_modal">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/0bj0RFe.png');"> <div class="modal-overlay"> <div class="modal-content"> <h2>About AWS Origin Demo</h2> <div class="modal-body"> <p><strong>Version:</strong> 1.1.0</p> <p><strong>Runtime:</strong> 6–8 minutes</p> <p><strong>Format:</strong> Interactive B2B Onboarding Demo</p> <h3>What is this?</h3> <p>AWS Origin Demo is a script-first interactive experience demonstrating the “working backwards” methodology through three critical gates: RELIABILITY, SECURITY, and COST.</p> <h3>How to Play</h3> <ul> <li>Complete ACT 1 to unlock the case hub</li> <li>Choose which gate to investigate first</li> <li>Complete all 3 gates in any order</li> <li>Your first choice affects the final debrief</li> <li>Switch perspectives using F/C/B/A lanes</li> </ul> <h3>Technology</h3> <p>Built with Twine 2 and SugarCube 2.36.1. Progress is saved automatically to your browser’s localStorage.</p> </div> <div class="modal-footer"> [[← Back to Home|outer_method_home]] </div> </div> </div> </div> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<<set $current_passage to "credits_modal">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/0bj0RFe.png');"> <div class="modal-overlay"> <div class="modal-content"> <h2>Credits</h2> <div class="modal-body"> <h3>AWS Origin Team</h3> <p>© 2026 AWS Origin Team</p> <h3>Story & Design</h3> <p>Based on the screenplay “WORKING BACKWARDS: The Case of the Impossible Demo”</p> <h3>Technology Stack</h3> <ul> <li>Twine 2 — Interactive fiction engine</li> <li>SugarCube 2.36.1 — Story format</li> <li>JavaScript ES6+ — State management</li> <li>CSS3 — Styling and animations</li> </ul> <h3>AWS Services Featured</h3> <p>Lambda, API Gateway, DynamoDB, S3, Bedrock, CloudWatch, AWS Budgets</p> <h3>Special Thanks</h3> <p>To the AWS community and all beta testers who helped shape this experience.</p> </div> <div class="modal-footer"> [[← Back to Home|outer_method_home]] </div> </div> </div> </div> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<div id="globalLoading" class="loading-overlay" hidden aria-hidden="true"> <div class="loading-card" role="status" aria-live="polite" aria-atomic="true"> <div class="title">WORKING</div> <div class="row"> <div class="spinner" aria-hidden="true"></div> <div class="loading-text">Processing…</div> </div> </div> </div> <<script>> (function () { window.setup = window.setup || {}; var setup = window.setup; var DEFAULT_TEXT = 'Processing…'; function getEl() { return document.getElementById('globalLoading'); } function getTextEl() { var el = getEl(); return el ? el.querySelector('.loading-text') : null; } function setText(message) { var txt = getTextEl(); if (!txt) return; if (typeof message === 'string' && message.trim()) { txt.textContent = message.trim(); } else { txt.textContent = DEFAULT_TEXT; } } function setVisible(visible) { var el = getEl(); if (!el) return; if (visible) { el.hidden = false; el.setAttribute('aria-hidden', 'false'); el.classList.add('is-active'); el.classList.add('is-visible'); /* harmless compat alias */ } else { el.classList.remove('is-active'); el.classList.remove('is-visible'); el.setAttribute('aria-hidden', 'true'); el.hidden = true; setText(DEFAULT_TEXT); } } setup.showGlobalLoading = function (message) { setText(message); setVisible(true); }; setup.hideGlobalLoading = function () { setVisible(false); }; /* Compatibility with existing bundle calls */ setup.setLoading = function (on, text) { if (on) { setup.showGlobalLoading(text); } else { setup.hideGlobalLoading(); } }; /* Safety: never let overlay persist across passage changes or story boot */ jQuery(document) .off('.globalloading') .on(':storyready.globalloading :passagedisplay.globalloading', function () { setVisible(false); }); })(); <</script>>

:: StoryInit [init] <<script>> /** * AWS Origin Demo - StoryInit * Version: 1.2.0 (hardened) * * Hardened bootstrap: * - safely extends existing window.RH instead of depending on overwrite behavior * - safely references setup utility functions with local fallbacks * - exposes setup.OM aliases for newer home/resume passages * - initializes once only * - syncs RH.progress from State.variables * - checks unlocks safely on passage display */ (function () { 'use strict'; window.setup = window.setup || {}; window.RH = window.RH || {}; var setup = window.setup; var RH = window.RH; function fallbackGenerateUUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (Math.random() * 16) | 0; var v = c === 'x' ? r : (r & 0x3) | 0x8; return v.toString(16); }); } function fallbackGenerateSessionId() { return Date.now().toString(36) + Math.random().toString(36).slice(2); } function getUUID() { if (setup && typeof setup.generateUUID === 'function') { return setup.generateUUID(); } return fallbackGenerateUUID(); } function getSessionId() { if (setup && typeof setup.generateSessionId === 'function') { return setup.generateSessionId(); } return fallbackGenerateSessionId(); } /* ----------------------------------------------------------------------- setup.OM compatibility bridge ----------------------------------------------------------------------- */ setup.OM = setup.OM || {}; if (typeof setup.OM.hasSavedProgress !== 'function' && typeof setup.hasSavedProgress === 'function') { setup.OM.hasSavedProgress = function () { return setup.hasSavedProgress(); }; } if (typeof setup.OM.loadProgress !== 'function' && typeof setup.loadProgress === 'function') { setup.OM.loadProgress = function () { return setup.loadProgress(); }; } if (typeof setup.OM.saveProgress !== 'function' && typeof setup.saveProgress === 'function') { setup.OM.saveProgress = function () { return setup.saveProgress(); }; } if (typeof setup.OM.clearProgress !== 'function' && typeof setup.clearProgress === 'function') { setup.OM.clearProgress = function () { return setup.clearProgress(); }; } /* ----------------------------------------------------------------------- RH config ----------------------------------------------------------------------- */ RH.config = Object.assign({}, RH.config || {}, { version: '1.2.0', projectName: 'AWS Origin Demo', playerId: (RH.config && RH.config.playerId) || null, sessionId: (RH.config && RH.config.sessionId) || null, routes: Object.assign({}, (RH.config && RH.config.routes) || {}, { home: 'outer_method_home', caseHub: 'case_hub', gateInstruction: 'gate_{family}_instruction', gateIncident: 'gate_{family}_incident', gateBeta: 'gate_{family}_beta', gateEvidence: 'gate_{family}_evidence', gateChoice: 'gate_{family}_choice', gateResult: 'gate_{family}_result', resolution: 'resolution_final', debrief: 'debrief_scorecard' }), unlockThresholds: Object.assign({}, (RH.config && RH.config.unlockThresholds) || {}, { lanes: 1 }), autoLoadProgress: false }); /* ----------------------------------------------------------------------- RH progress mirror ----------------------------------------------------------------------- */ RH.progress = Object.assign({}, RH.progress || {}, { gatesCompleted: [], gateOrder: [], priorityFirst: null, currentGate: null, playtimeSeconds: 0, scores: { cost: 0, security: 0, reliability: 0, clarity: 0 }, choices: { engine: null, ai_host: null, runway: null }, evidenceViewed: [], lanesUnlocked: false, currentLane: 'founder', demoCompleted: false }); RH.syncProgress = function () { if (!window.State || !State.variables) return; RH.progress.gatesCompleted = Array.isArray(State.variables.gates_completed) ? State.variables.gates_completed.slice() : []; RH.progress.gateOrder = Array.isArray(State.variables.gate_order) ? State.variables.gate_order.slice() : []; RH.progress.priorityFirst = State.variables.priority_first || null; RH.progress.currentGate = State.variables.current_gate || null; RH.progress.playtimeSeconds = Number(State.variables.playtime_seconds || 0); RH.progress.scores = Object.assign( { cost: 0, security: 0, reliability: 0, clarity: 0 }, State.variables.scores || {} ); RH.progress.choices = { engine: State.variables.engine_choice || null, ai_host: State.variables.ai_host_choice || null, runway: State.variables.runway_choice || null }; RH.progress.evidenceViewed = Array.isArray(State.variables.evidence_viewed) ? State.variables.evidence_viewed.slice() : []; RH.progress.lanesUnlocked = !!State.variables.lanes_unlocked; RH.progress.currentLane = State.variables.current_lane || 'founder'; RH.progress.demoCompleted = !!State.variables.demo_completed; }; RH.saveProgress = function () { if (typeof setup.saveProgress === 'function') { return setup.saveProgress(); } return false; }; RH.loadProgress = function () { if (typeof setup.loadProgress === 'function') { var loaded = setup.loadProgress(); if (loaded) { RH.syncProgress(); } return loaded; } return false; }; RH.checkUnlocks = function () { if (!window.State || !State.variables) return; var completedCount = Array.isArray(State.variables.gates_completed) ? State.variables.gates_completed.length : 0; if ( completedCount >= Number(RH.config.unlockThresholds.lanes || 1) && !State.variables.lanes_unlocked ) { if (typeof setup.unlockLanes === 'function') { setup.unlockLanes(); } else { State.variables.lanes_unlocked = true; } console.log('[RH] Lanes unlocked'); } RH.syncProgress(); }; RH.ui = RH.ui || {}; RH.ui.updateHUD = RH.ui.updateHUD || function () { return; }; RH.init = function () { if (RH._originInitialized) { return; } RH._originInitialized = true; console.log('[RH] Initializing AWS Origin Demo v' + RH.config.version); try { if (!localStorage.getItem('aws_origin_player_id')) { RH.config.playerId = getUUID(); localStorage.setItem('aws_origin_player_id', RH.config.playerId); } else { RH.config.playerId = localStorage.getItem('aws_origin_player_id'); } } catch (err) { console.warn('[RH] player_id localStorage unavailable, using volatile id', err); RH.config.playerId = getUUID(); } RH.config.sessionId = getSessionId(); if (typeof setup.initializeState === 'function') { setup.initializeState(); } else if (window.State && State.variables) { if (!State.variables.player_id) State.variables.player_id = RH.config.playerId; if (!State.variables.session_id) State.variables.session_id = RH.config.sessionId; if (!Array.isArray(State.variables.gates_completed)) State.variables.gates_completed = []; if (!Array.isArray(State.variables.gate_order)) State.variables.gate_order = []; if (!Array.isArray(State.variables.evidence_viewed)) State.variables.evidence_viewed = []; if (!State.variables.scores || typeof State.variables.scores !== 'object') { State.variables.scores = { cost: 0, security: 0, reliability: 0, clarity: 0 }; } if (typeof State.variables.lanes_unlocked === 'undefined') State.variables.lanes_unlocked = false; if (!State.variables.current_lane) State.variables.current_lane = 'founder'; } if (window.State && State.variables) { if (!State.variables.player_id) State.variables.player_id = RH.config.playerId; if (!State.variables.session_id) State.variables.session_id = RH.config.sessionId; } if (RH.config.autoLoadProgress === true) { RH.loadProgress(); } else { RH.syncProgress(); } if (typeof setup.startPlaytimeTracker === 'function') { setup.startPlaytimeTracker(); } else if (RH.playtime && typeof RH.playtime.start === 'function') { RH.playtime.start(); } console.log('[RH] Initialization complete'); }; /* ----------------------------------------------------------------------- Passage lifecycle sync ----------------------------------------------------------------------- */ jQuery(document) .off('.originstoryinit') .on(':storyready.originstoryinit', function () { RH.init(); }) .on(':passagedisplay.originstoryinit', function () { if (window.State && State.variables) { State.variables.last_passage = State.passage; try { localStorage.setItem('RH_LAST_PASSAGE', State.passage); } catch (err) { console.warn('[RH] RH_LAST_PASSAGE write failed', err); } } RH.checkUnlocks(); RH.syncProgress(); }); /* Run once now too, in case this passage is the only bootstrap point */ RH.init(); console.log('[STORY] StoryInit hardened bootstrap loaded'); })(); <</script>>

<<set $current_passage to "origin_twine_discovery">> <div class="om-bg-page" style="background-image:url('https://i.imgur.com/ak9HUsx.png');">  <div class="rh-media" id="media-origin-twine-discovery"> <div class="rh-player-wrap"> <div id="originTwineDiscoveryClip"></div> </div> </div> <div id="origin-twine-discovery-root">  <div class="vlog-container"> <div class="vlog-frame"> <div class="vlog-header"> <span class="vlog-label">BETA TESTER VLOG</span> <span class="vlog-timestamp">Day 1 - First Playthrough</span> </div> <div class="vlog-content"> <div class="beta-tester-cu"> </div> </div> </div> </div>  <div class="twine-map-container"> <div class="twine-map-header"> <h3>THE DISCOVERY: Twine as System Architecture</h3> </div> <div class="twine-map-visual"> <svg class="twine-graph" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="nodeGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:0.8" /> <stop offset="100%" style="stop-color:#00d4ff;stop-opacity:0" /> </radialGradient> </defs>  <circle class="node node-center" cx="400" cy="300" r="20" fill="#ff9900" /> <text x="400" y="305" text-anchor="middle" fill="#fff" font-size="10">START</text>  <circle class="node node-ring1" cx="300" cy="200" r="12" fill="#00d4ff" /> <circle class="node node-ring1" cx="500" cy="200" r="12" fill="#00d4ff" /> <circle class="node node-ring1" cx="300" cy="400" r="12" fill="#00d4ff" /> <circle class="node node-ring1" cx="500" cy="400" r="12" fill="#00d4ff" />  <circle class="node node-ring2" cx="200" cy="150" r="8" fill="#146eb4" /> <circle class="node node-ring2" cx="400" cy="150" r="8" fill="#146eb4" /> <circle class="node node-ring2" cx="600" cy="150" r="8" fill="#146eb4" /> <circle class="node node-ring2" cx="200" cy="450" r="8" fill="#146eb4" /> <circle class="node node-ring2" cx="400" cy="450" r="8" fill="#146eb4" /> <circle class="node node-ring2" cx="600" cy="450" r="8" fill="#146eb4" />  <circle class="node node-ring3" cx="150" cy="100" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="250" cy="100" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="550" cy="100" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="650" cy="100" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="150" cy="500" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="250" cy="500" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="550" cy="500" r="6" fill="#ff6b35" /> <circle class="node node-ring3" cx="650" cy="500" r="6" fill="#ff6b35" />  <line class="connection conn-1" x1="400" y1="300" x2="300" y2="200" stroke="#00d4ff" stroke-width="2" opacity="0.6" /> <line class="connection conn-2" x1="400" y1="300" x2="500" y2="200" stroke="#00d4ff" stroke-width="2" opacity="0.6" /> <line class="connection conn-3" x1="400" y1="300" x2="300" y2="400" stroke="#00d4ff" stroke-width="2" opacity="0.6" /> <line class="connection conn-4" x1="400" y1="300" x2="500" y2="400" stroke="#00d4ff" stroke-width="2" opacity="0.6" />  <line class="connection conn-5" x1="300" y1="200" x2="200" y2="150" stroke="#146eb4" stroke-width="1.5" opacity="0.4" /> <line class="connection conn-6" x1="300" y1="200" x2="400" y2="150" stroke="#146eb4" stroke-width="1.5" opacity="0.4" /> <line class="connection conn-7" x1="500" y1="200" x2="600" y2="150" stroke="#146eb4" stroke-width="1.5" opacity="0.4" />  <line class="connection conn-8" x1="200" y1="150" x2="150" y2="100" stroke="#ff6b35" stroke-width="1" opacity="0.3" /> <line class="connection conn-9" x1="200" y1="150" x2="250" y2="100" stroke="#ff6b35" stroke-width="1" opacity="0.3" /> </svg> <div class="twine-map-caption"> <p><strong>29 passages.</strong> Each node is a scene. Each connection is a choice.</p> <p>But this isn't just a story map—it's the actual system architecture.</p> </div> </div> </div>  <div class="evidence-note-card-wrap"> <div class="note-card evidence-note-card"> <div class="note-card-content">FRONT END = STORY LOGIC</div> </div> </div>  <<timed 90s>> <<goto "origin_backend_awakening">> <</timed>>  <div class="passage-controls"> [[SKIP →|origin_backend_awakening]] </div> </div> </div> <<script>> (function () { var PASSAGE = 'origin_twine_discovery'; if (!Array.isArray(State.variables.evidence_viewed)) { State.variables.evidence_viewed = []; } if (State.variables.evidence_viewed.indexOf('twine_map') === -1) { State.variables.evidence_viewed.push('twine_map'); console.log('[EVIDENCE] Viewed: twine_map'); } function prepConnections($scope) { $scope.find('.connection').each(function () { var el = this; var targetOpacity = el.getAttribute('opacity') || '0.6'; var len = (typeof el.getTotalLength === 'function') ? el.getTotalLength() : 0; jQuery(el).data('targetOpacity', targetOpacity); el.style.opacity = '0'; if (len > 0) { el.style.strokeDasharray = len + ' ' + len; el.style.strokeDashoffset = String(len); } }); } function prepNodes($scope) { $scope.find('.node').each(function () { var el = this; el.style.opacity = '0'; el.style.transformBox = 'fill-box'; el.style.transformOrigin = 'center'; el.style.transform = 'scale(1)'; }); } function revealNode(el, delay) { window.setTimeout(function () { if (State.passage !== PASSAGE) return; el.style.transition = 'opacity 0.28s ease-out'; el.style.opacity = '1'; }, delay); } function drawConnection(el, delay) { var targetOpacity = jQuery(el).data('targetOpacity') || '0.6'; window.setTimeout(function () { if (State.passage !== PASSAGE) return; el.style.transition = 'stroke-dashoffset 0.42s ease-out, opacity 0.18s ease-out'; el.style.strokeDashoffset = '0'; el.style.opacity = String(targetOpacity); }, delay); } function animateTwineGraph() { var $scope = jQuery('#origin-twine-discovery-root'); var $graph = $scope.find('.twine-graph'); if (!$graph.length) return; var $center = $graph.find('.node-center'); var $ring1 = $graph.find('.node-ring1'); var $ring2 = $graph.find('.node-ring2'); var $ring3 = $graph.find('.node-ring3'); var $conn1 = $graph.find('.conn-1, .conn-2, .conn-3, .conn-4'); var $conn2 = $graph.find('.conn-5, .conn-6, .conn-7'); var $conn3 = $graph.find('.conn-8, .conn-9'); prepNodes($scope); prepConnections($scope); $center.each(function () { revealNode(this, 150); }); $conn1.each(function (i) { drawConnection(this, 500 + (i * 170)); }); $ring1.each(function (i) { revealNode(this, 640 + (i * 170)); }); $conn2.each(function (i) { drawConnection(this, 1450 + (i * 170)); }); $ring2.each(function (i) { revealNode(this, 1600 + (i * 110)); }); $conn3.each(function (i) { drawConnection(this, 2400 + (i * 180)); }); $ring3.each(function (i) { revealNode(this, 2550 + (i * 90)); }); } function initOriginTwineDiscovery() { if (State.passage !== PASSAGE) return; var $mount = jQuery('#originTwineDiscoveryClip'); if (!$mount.length) return; if ($mount.data('rh-init')) return; $mount.data('rh-init', true); if (window.RH && typeof RH.initSkinPlayer === 'function') { RH.initSkinPlayer({ id: 'originTwineDiscoveryClip', skin: 'yt', aspect: '16:9', src: 'https://dwlccmzy2w1e1.cloudfront.net/renders/origin_twine_discovery.mp4', title: 'Origin — Twine Discovery', user: '@OuterMethod', vid: 'origin_twine_discovery', controlsPosition: 'below' }); if (typeof RH.autoLayoutMedia === 'function') { RH.autoLayoutMedia('media-origin-twine-discovery'); } if (typeof RH.mountCounter === 'function') { RH.mountCounter(); } } else { console.warn('[origin_twine_discovery] RH.initSkinPlayer is not available'); } window.requestAnimationFrame(function () { window.setTimeout(function () { if (State.passage !== PASSAGE) return; animateTwineGraph(); }, 50); }); window.setTimeout(function () { if (State.passage !== PASSAGE) return; var video = jQuery('#originTwineDiscoveryClip').find('video').get(0); if (!video) return; video.muted = false; video.defaultMuted = false; video.volume = 1; video.playsInline = true; var p = video.play(); if (p && typeof p.catch === 'function') { p.catch(function (err) { console.warn('[origin_twine_discovery] autoplay blocked', err); }); } video.onended = null; }, 300); } window.setTimeout(initOriginTwineDiscovery, 0); })(); <</script>> <style> .om-bg-page { position: relative; width: 100vw; min-height: 100vh; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem; box-sizing: border-box; background-color: #05070b; background-size: cover; background-position: center center; background-repeat: no-repeat; } .om-bg-page::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--om-bg-page-dim, var(--om-bg-dim-page))) !important; pointer-events: none; } .om-bg-page > * { position: relative; z-index: 2; } </style>

<<set $current_passage to "debrief_scorecard">> <div class="passage-container act3-debrief"> <div class="debrief-header"> <h2 class="debrief-title">PILOT READINESS</h2> <p class="debrief-subtitle">Final Assessment</p> </div> <div class="scorecard"> <div class="score-row"> <span class="score-label">RELIABILITY:</span> <span class="score-value"><<print $scores.reliability || 0>>/10</span> </div> <div class="score-row"> <span class="score-label">SECURITY:</span> <span class="score-value"><<print $scores.security || 0>>/10</span> </div> <div class="score-row"> <span class="score-label">COST:</span> <span class="score-value"><<print $scores.cost || 0>>/10</span> </div> <div class="score-row highlight"> <span class="score-label">CLARITY:</span> <span class="score-value"><<print $scores.clarity || 0>>/10</span> </div> </div> <div class="aws-guide-dialogue"> <div class="guide-speaker">AWS GUIDE</div> <div class="guide-text"> <p>"Pilot readiness: engine, AI host, runway, clarity."</p> </div> </div> <div class="memory-shaped-line"> <<if $priority_first === "reliability">> <p class="memory-text">"Your system holds under state pressure. The experience stays coherent."</p> <<elseif $priority_first === "security">> <p class="memory-text">"Your host stays constrained and routes cleanly. The demo behaves like a guide."</p> <<elseif $priority_first === "cost">> <p class="memory-text">"Your pilot is fundable and defensible. Cost posture and entry point are real."</p> <<else>> <p class="memory-text">"Your system demonstrates foundational readiness across all critical dimensions."</p> <</if>> </div> <div class="aws-guide-assessment"> <div class="guide-speaker">AWS GUIDE</div> <div class="guide-text"> <p>"Based on your priorities, this onboarding experience is deployable—with guardrails."</p> </div> </div> <div class="memory-indicator"> <div class="memory-icon"> <span class="icon-text">💾</span> </div> <div class="memory-label">Priority Memory: <<print $priority_first || "none">></div> </div> <div class="auto-advance-timer"> <span class="timer-text">Advancing to resolution in <span id="countdown-debrief">10</span>s</span> </div> <div class="skip-option"> [[SKIP TO RESOLUTION|resolution_final]] </div> </div> <<timed 10s>> <<goto "resolution_final">> <</timed>> <<script>> (function () { var PASSAGE = 'debrief_scorecard'; var START_AT = 10; window.setup = window.setup || {}; if (window.setup._originDebriefCountdownInterval) { clearInterval(window.setup._originDebriefCountdownInterval); window.setup._originDebriefCountdownInterval = null; } function startDebriefCountdown() { if (State.passage !== PASSAGE) return; var remaining = START_AT; var countdownEl = document.getElementById('countdown-debrief'); if (countdownEl) { countdownEl.textContent = String(remaining); } window.setup._originDebriefCountdownInterval = window.setInterval(function () { if (State.passage !== PASSAGE) { clearInterval(window.setup._originDebriefCountdownInterval); window.setup._originDebriefCountdownInterval = null; return; } remaining -= 1; if (countdownEl) { countdownEl.textContent = String(Math.max(0, remaining)); } if (remaining <= 0) { clearInterval(window.setup._originDebriefCountdownInterval); window.setup._originDebriefCountdownInterval = null; } }, 1000); } window.setTimeout(startDebriefCountdown, 0); })(); <</script>>