Outer Method DEMO

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<div id="home-wrap">  <header id="rh-header"> <img id="rh-title" src="https://i.imgur.com/PZhFI9V.png" alt="Outer Method"> <nav id="home-nav"> <a href="#" id="nav-about">ABOUT US</a> <a href="mailto:jason@rabbitholestory.com">CONTACT</a> </nav> </header>  <div id="start-btn"> <img id="rabbit-img" src="https://i.imgur.com/5kDGMQD.png" alt="Start RabbitHole"> </div>  <footer id="corp-footer"> <p><strong>ArcEngine™</strong> — Augmented Reality Cinema</p> <p>Created by <strong>Elder Scare LLC</strong>, merging film, AI, and audience interaction into immersive cinematic experiences.</p> <p>Powered by <strong>AWS Bedrock</strong>, <strong>Rekognition</strong>, and <strong>Supabase</strong>. <strong>Built on AWS.</strong></p> </footer> </div>  <script> $(function () { // Start button -> spin then go to mmmhome $(document).one('click', '#start-btn', function () { const $wrap = $('#home-wrap'); $wrap.addClass('spin-out'); setTimeout(function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmmhome'); } }, 1800); }); // ABOUT US link -> go to "about us" passage $(document).on('click', '#nav-about', function (e) { e.preventDefault(); if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('about us'); } }); }); </script>

<div id="about-wrap"> <div id="about-content"> <div id="about-text" data-typewriter="true"> <p><strong>OUTER METHOD ARC™</strong> or augmented reality cinema, is an immersive cinematic platform that merges film and gaming. Instead of just watching a story, participants travel inside it — switching perspectives, and uncovering hidden clues that progress you through branching narratives.</p> <p>In a time where audiences scroll past everything — where attention is fractured across platforms and algorithms — studios and brands are fighting just to be seen.</p> <p>Every day, the digital noise grows stronger. You’ve got stories worth telling — but they’re trapped in old formats, in passive media.</p> <p> What you need is something that connects every touchpoint and pulls the audience inside the story instead of pushing content at them.</p> <p><strong>That’s where Outer Method steps in.</strong></p> <p>We’ve created the framework for immersive storytelling: interactive video, location triggers, AI-driven dialogue — all connected through an agentic cinematic organism.</p> <p>We teach your company how to use it — how to design a narrative journey, how to make your customer the hero of their own story.</p> <p><strong>Our ArcEngine™ doesn’t replace your storytelling — it amplifies it.</strong></p> </div> <br><br> <a class="back-btn" onclick='SugarCube.Engine.play("rabbithome")'>BACK</a> </div> </div>

<div id="gate-wrap"> <div id="gate-overlay"></div> <div id="gate-inner"> <div id="gate-text" data-typewriter="true"> <p>This experience contains fictional violence and disturbing imagery presented in a controlled narrative demo.</p> <p>Miss Murder Me is a private preview sequence built on OUTER METHOD™ ArcEngine™ to demonstrate our interactive storytelling technology.</p> <p>Viewer discretion is advised.</p> <p>Do you wish to proceed "Down the RabbitHole" into the Miss Murder Me demo environment?</p> </div> <div id="gate-actions"> <a class="gate-back" onclick="SugarCube.Engine.play('rabbithome')">BACK</a>  <div id="gate-start-btn" onclick="SugarCube.Engine.play('rabbitlog')"> <img src="https://i.imgur.com/0RYpq9f.png" alt="Enter Miss Murder Me"> </div> </div> </div> </div>

:: jess_post_1 <div class="rh-media" id="media-jess1"> <div class="rh-player-wrap"> <div id="clipA"></div> </div>  <div id="agent-jess1" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player RH.initSkinPlayer({ id: 'clipA', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.jpg', title: 'Jessica Live — Post 1', user: '@alvarezjessica76', vid: 'jess_post_1', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess1'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess1').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Hook the underlying <video> so we jump to next Jessica post when done const video = $('#clipA').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_2'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box */ #agent-jess1 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess1 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 1 <div class="rh-media" id="media-ldk"> <div class="rh-player-wrap"> <div id="yt1"></div> </div>  <div id="agent-ldk" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt1', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+1+Slow+Zoom.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 1', user: '@OuterMethod', vid: 'ldk_post_1' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk'); $('#media-ldk').removeClass('side'); // 3) Y/N/M/O routing — match Jessica/Merrick canonical routes const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt1 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to ldk_post_2 when done const video = $('#yt1').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_2'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 1 <div class="rh-media" id="media-merrick1"> <div class="rh-player-wrap"> <div id="merrickClip1"></div> </div>  <div id="agent-merrick1" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip1', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%201%20Surveil%20Order.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%201%20Surveil%20Order.jpg', title: 'Merrick Cam — Surveil Order', user: '@Merrick_CID', vid: 'merr_post_1', // ✅ match nav map + routes controlsPosition: 'below' // ✅ lets faux-nav place arrows cleanly }); // 2) Layout: auto, then force stacked (no side-by-side) RH.autoLayoutMedia('media-merrick1'); $('#media-merrick1').removeClass('side'); // 3) Y/N/M/O routing — matches Jessica pattern const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick1') .off('click.merr1') .on('click.merr1', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Keep the global 00/20 bubble alive if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_2 when done const video = $('#merrickClip1').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_2'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick1 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick1 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

<div class="mmm-terminal" id="merrickAgentBox">  <<if !$mmmSeenIntro>> <div id="merrick-intro" data-typewriter="true"> <p>MERRICK: You’re plugged into my case backend. We’ve got Jessica’s live streams, the killer’s camera, and my briefings — but the file is full of gaps.</p> <p><strong>CLOCK'S RUNNING.</strong> You’ve got about an hour of real time to work this case before the demo locks and your session gets kicked into my queue.</p> <p>YOUR JOB IS TO HELP ME RECONSTRUCT THE NIGHT. ASK ANYTHING ABOUT FOOTAGE, TIMELINE, OR EVIDENCE — OR USE KEYS <strong>Y</strong>, <strong>N</strong>, <strong>M</strong>, <strong>O</strong> TO LET ME PICK THE NEXT LANE.</p> <p>Every clip you watch and every lane you follow pushes the case index forward. When you hit the right flags, I’ll surface hidden leads — extra posts, my fifth briefing, POV sync, even a GPS-locked clue. When <strong>FOLLOW MERRICK → GO</strong> lights up, hit <strong>GO</strong> and I’ll drop you straight into the next piece of the truth.</p> <p>Somewhere around twenty clips, I’m going to need one clean call on the killer’s next move. If you give me the right answer before the hour runs out, you beat this build — if you don’t, the file closes with him still on the board.</p> </div> <<set $mmmSeenIntro = true>> <<else>> <div id="merrick-intro"> <p>Clock’s still ticking. YOUR JOB IS TO HELP ME RECONSTRUCT THE NIGHT — ask about footage, timeline, or evidence, or use keys <strong>Y</strong>, <strong>N</strong>, <strong>M</strong>, <strong>O</strong> to let me pick the next lane.</p> <p>Keep bouncing between lanes and watching clips. When you’ve tripped a new lead, <strong>FOLLOW MERRICK → GO</strong> lights up — hit <strong>GO</strong> and I’ll move you to the next clue. Or just ask me, <em>“Did I unlock a clue yet?”</em> and I’ll check the index for you.</p> <p>Once you’ve seen enough, I’ll hit you with a final-case question about where he goes next. Answer it clean before the hour’s up if you want this demo logged as a solved run.</p> </div> <</if>>  <div class="mmm-agent-choices"> <button class="mmm-agent-btn" data-choice="Y">Y · Jessica stream</button> <button class="mmm-agent-btn" data-choice="N">N · Killer-cam (LDK)</button> <button class="mmm-agent-btn" data-choice="M">M · Merrick briefing</button> <button class="mmm-agent-btn" data-choice="O">O · Play full sequence</button> </div>  <div id="merrick-output" class="mmm-terminal-output"> <p>MERRICK: Feed me a question about the Miss Murder Me case.</p> </div>  <div id="merrick-next-wrap" class="mmm-next-wrap" style="margin-top:0.75em; display:none;"> <span class="mmm-next-label">FOLLOW MERRICK →</span> <button id="merrick-go">GO</button> </div>  <div class="mmm-terminal-input-row"> <input id="merrick-question" type="text" autocomplete="off" placeholder="Ask Merrick about footage, timeline, or evidence..." /> <button id="merrick-send">SEND</button> </div>  <div id="merrick-routing" class="mmm-terminal-routing"></div>  <div id="merrick-clues" class="mmm-clue-links"></div>  <div class="mmm-terminal-footer"> <<link "BACK">><<goto "mmmhome">><</link>> </div> </div> <style> /* Global tighten for the Merrick terminal */ .mmm-terminal { font-size: 0.9rem; line-height: 1.25; } .mmm-terminal p { margin: 0 0 0.35em 0; } #merrick-intro { font-size: 0.9rem; line-height: 1.25; opacity: 0.9; margin-bottom: 0.6rem; } .mmm-agent-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.5rem 0; } .mmm-agent-btn { border: 1px solid rgba(0, 228, 255, 0.35); background: rgba(0,0,0,0.40); color: #fff; padding: 0.35em 0.6em; border-radius: 6px; font: 700 12px ui-monospace, Menlo, Consolas, monospace; cursor: pointer; letter-spacing: .06em; text-transform: uppercase; } .mmm-agent-btn:hover { background: rgba(0, 228, 255, 0.22); color: #ffffff; box-shadow: 0 0 0 1px rgba(0, 228, 255, 1), 0 0 10px rgba(0, 228, 255, 0.8); } .mmm-agent-btn:active { background: rgba(0, 228, 255, 0.10); box-shadow: 0 0 0 1px rgba(0, 228, 255, 1), 0 0 4px rgba(0, 228, 255, 0.6); } .mmm-terminal-output { margin-top: 0.4rem; padding: 0.45rem 0.6rem; } .mmm-terminal-output p { margin: 0; line-height: 1.25; } .mmm-next-wrap { font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 0.45rem; } .mmm-terminal-input-row { margin-top: 0.45rem; } #merrick-question { line-height: 1.2; } /* Unlocked leads block: - Title "CASE LEADS (UNLOCKED)" in white - Links / bullet text in cyan */ .mmm-clue-links { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed rgba(0, 228, 255, 0.3); font-size: 0.8rem; color: #00e4ff; /* default cyan for items */ } /* First line inside the block (the title) */ .mmm-clue-links p:first-child { color: #ffffff; } /* If title is wrapped in <strong>, keep that white too */ .mmm-clue-links p:first-child strong { color: #ffffff; } /* Links stay canonical cyan */ .mmm-clue-links a { color: #00e4ff; } </style>

:: jess_post_2 <div class="rh-media" id="media-jess2"> <div class="rh-player-wrap"> <div id="clipB"></div> </div>  <div id="agent-jess2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 2) RH.initSkinPlayer({ id: 'clipB', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%202%20Lost%20Dog%20Poster.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%202%20Lost%20Dog%20Poster.jpg', title: 'Jessica Live — Post 2', user: '@alvarezjessica76', vid: 'jess_post_2', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess2'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_2', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess2').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_3 when it ends const video = $('#clipB').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_3'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_sequence  <div class="rh-media" id="media-seq"> <div class="rh-player-wrap"> <div id="seq1"></div> </div> <div id="agent-seq"></div> </div>  <div class="rh-seq-ctrl"> <button class="rh-seq-btn" id="seqPrev">◀ PREV</button> <div class="rh-seq-status"> <span id="seqLabel">—</span> <span id="seqCount">0 / 0</span> </div> <button class="rh-seq-btn" id="seqNext">NEXT ▶</button> <button class="rh-seq-btn ghost" id="seqReplay">REPLAY</button> <button class="rh-seq-btn ghost" id="seqSkipAll">SKIP ALL ➜</button> </div> <script> window.RH = window.RH || {}; if (!RH.playSequence) { RH.playSequence = function playSequence(rootId, items, opts) { if (!items || !items.length) return; const $root = $('#' + rootId); const $label = $('#seqLabel'); const $count = $('#seqCount'); const $btnPrev = $('#seqPrev'); const $btnNext = $('#seqNext'); const $btnReplay = $('#seqReplay'); const $btnSkip = $('#seqSkipAll'); let i = 0; function mount(idx) { i = Math.max(0, Math.min(idx, items.length - 1)); const it = items[i]; // Rebuild faux player cleanly inside the sequence slot $root.empty().removeData('rh-wired'); const innerId = 'seqInner'; $root.append($('<div>', { id: innerId })); RH.initSkinPlayer({ id: innerId, skin: it.skin || 'yt', aspect: it.aspect || (it.skin === 'tt' ? '9:16' : '16:9'), src: it.src, poster: it.poster, title: it.title || '', user: it.user || '', vid: it.vid || null }); // Controls UNDER the video $('#' + innerId + ' .rh-frame').addClass('controls-below'); // HUD label + count $label.text(it.ui || it.title || ''); $count.text((i + 1) + ' / ' + items.length); // Layout player + agent, then FORCE stacked layout (no .side) RH.autoLayoutMedia('media-seq'); $('#media-seq').removeClass('side'); // Agent panel, full-width (compact:false) RH.mountAgentPanel({ containerId: 'agent-seq', title: 'Detective Merrick', promptPlaceholder: 'Y / N / M / O …', compact: false, routes: (opts && opts.routes) ? opts.routes : { Y: 'jess_post 1', N: 'rabbithome', M: 'mmm_marked', O: 'mmm_overview' } }); // Auto-play + auto-advance system (UNMUTED) const video = $root.find('video').get(0); if (video) { video.muted = false; // audio ON // Try to auto-play this clip video.play().catch(err => { // First clip may require a manual tap on mobile; // once user interacts, subsequent clips should auto-play. }); video.onended = () => { if (i < items.length - 1) { // Mount next clip mount(i + 1); // After mount, grab the new <video> and auto-play it too setTimeout(() => { const nextVid = $root.find('video').get(0); if (nextVid) { nextVid.muted = false; nextVid.play().catch(() => { // If blocked, user can still hit PLAY manually }); } }, 50); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }; } } // Controls $btnPrev.off('click').on('click', () => mount(i - 1)); $btnNext.off('click').on('click', () => mount(i + 1)); $btnReplay.off('click').on('click', () => mount(i)); $btnSkip.off('click').on('click', () => { if (opts && typeof opts.skipTo === 'string') { SugarCube.Engine.play(opts.skipTo); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }); // Start with first clip mount(0); }; } $(function () { const clips = [ /* FIRST THREE */ { ui: 'Jessica — Vertical Live', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.mp4', title: 'Jessica — Stream 1', user: '@alvarezjessica76', vid: 'jess_post_1' }, { ui: 'LDK — Slow Zoom', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+1+Slow+Zoom.mp4', title: 'Miss Murder Me — LDK Post 1', user: '@OuterMethod', vid: 'ldk_post_1' }, { ui: 'Merrick Cam — Surveil Order', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+1+Surveil+Order.mp4', title: 'Merrick Cam — Surveil Order', user: '@Merrick_CID', vid: 'merrick_post_1' }, /* REST OF THE SEQUENCE */ { ui: 'Jessica — Dog Poster', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+2+Lost+Dog+Poster.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 2', user: '@alvarezjessica76', vid: 'jess_post_2' }, { ui: 'Jessica — Threshold', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+3+Dog+Threshold.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 3', user: '@alvarezjessica76', vid: 'jess_post_3' }, { ui: 'LDK — Cage Reveal', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 2', user: '@OuterMethod', vid: 'ldk_post_2' }, { ui: 'Jessica — Memory', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+4-5+Reveal-Memory.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 4', user: '@alvarezjessica76', vid: 'jess_post_4' }, { ui: 'Merrick — Lost Control', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 3', user: '@Merrick_CID', vid: 'merrick_post_3' }, { ui: 'LDK — The Corner', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 4', user: '@OuterMethod', vid: 'ldk_post_4' }, { ui: "Jessica — Jessica's Offer", skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica\'s+offer.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: "Jessica Live — Post 6", user: '@alvarezjessica76', vid: 'jess_post_6' }, { ui: 'Jessica — Phone Death', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 7', user: '@alvarezjessica76', vid: 'jess_post_7' }, { ui: 'LDK — Escape', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 8', user: '@OuterMethod', vid: 'ldk_post_8' }, { ui: 'Merrick — Lockdown', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 4', user: '@Merrick_CID', vid: 'merrick_post_4' } ]; RH.playSequence('seq1', clips, { skipTo: 'mmm_agent', onDone: function () { SugarCube.Engine.play('mmm_agent'); }, routes: { Y: 'jess_post 1', N: 'rabbithome', M: 'mmm_marked', O: 'mmm_overview' } }); if (RH.mountCounter) RH.mountCounter(); }); </script> <style> .rh-seq-ctrl { margin-top: .75rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color:#fff; } .rh-seq-status { opacity:.85; display:flex; align-items:center; gap:.6rem; } .rh-seq-btn { border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff; padding:.45em .7em; border-radius:6px; cursor:pointer; } .rh-seq-btn:hover { background: rgba(255,255,255,.12); } .rh-seq-btn.ghost { opacity:.85; } @media (max-width: 640px){ .rh-seq-ctrl { gap:.55rem; } .rh-seq-btn { padding:.4em .55em; } } </style>:: mmm_sequence  <div class="rh-media" id="media-seq"> <div class="rh-player-wrap"> <div id="seq1"></div> </div> <div id="agent-seq"></div> </div>  <div class="rh-seq-ctrl"> <button class="rh-seq-btn" id="seqPrev">◀ PREV</button> <div class="rh-seq-status"> <span id="seqLabel">—</span> <span id="seqCount">0 / 0</span> </div> <button class="rh-seq-btn" id="seqNext">NEXT ▶</button> <button class="rh-seq-btn ghost" id="seqReplay">REPLAY</button> <button class="rh-seq-btn ghost" id="seqSkipAll">SKIP ALL ➜</button> </div> <script> window.RH = window.RH || {}; if (!RH.playSequence) { RH.playSequence = function playSequence(rootId, items, opts) { if (!items || !items.length) return; const $root = $('#' + rootId); const $label = $('#seqLabel'); const $count = $('#seqCount'); const $btnPrev = $('#seqPrev'); const $btnNext = $('#seqNext'); const $btnReplay = $('#seqReplay'); const $btnSkip = $('#seqSkipAll'); let i = 0; function mount(idx) { i = Math.max(0, Math.min(idx, items.length - 1)); const it = items[i]; // Rebuild faux player cleanly inside the sequence slot $root.empty().removeData('rh-wired'); const innerId = 'seqInner'; $root.append($('<div>', { id: innerId })); RH.initSkinPlayer({ id: innerId, skin: it.skin || 'yt', aspect: it.aspect || (it.skin === 'tt' ? '9:16' : '16:9'), src: it.src, poster: it.poster, title: it.title || '', user: it.user || '', vid: it.vid || null, controlsPosition: 'below' }); // HUD label + count $label.text(it.ui || it.title || ''); $count.text((i + 1) + ' / ' + items.length); // Layout player + agent, then FORCE stacked layout (no .side) RH.autoLayoutMedia('media-seq'); $('#media-seq').removeClass('side'); // Agent panel, full-width (compact:false) RH.mountAgentPanel({ containerId: 'agent-seq', title: 'Detective Merrick', promptPlaceholder: 'Y / N / M / O …', compact: false, routes: (opts && opts.routes) ? opts.routes : { Y: 'jess_post 1', N: 'rabbithome', M: 'mmm_marked', O: 'mmm_overview' } }); // Auto-play + auto-advance system (UNMUTED) const video = $root.find('video').get(0); if (video) { video.muted = false; // audio ON // Try to auto-play this clip video.play().catch(err => { // First clip may require a manual tap on mobile; // once user interacts, subsequent clips should auto-play. }); video.onended = () => { if (i < items.length - 1) { // Mount next clip mount(i + 1); // After mount, grab the new <video> and auto-play it too setTimeout(() => { const nextVid = $root.find('video').get(0); if (nextVid) { nextVid.muted = false; nextVid.play().catch(() => { // If blocked, user can still hit PLAY manually }); } }, 50); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }; } } // Controls $btnPrev.off('click').on('click', () => mount(i - 1)); $btnNext.off('click').on('click', () => mount(i + 1)); $btnReplay.off('click').on('click', () => mount(i)); $btnSkip.off('click').on('click', () => { if (opts && typeof opts.skipTo === 'string') { SugarCube.Engine.play(opts.skipTo); } else if (opts && typeof opts.onDone === 'function') { opts.onDone(); } }); // Start with first clip mount(0); }; } $(function () { const clips = [ /* FIRST THREE */ { ui: 'Jessica — Vertical Live', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20post%201%20live%20stream.mp4', title: 'Jessica — Stream 1', user: '@alvarezjessica76', vid: 'jess_post_1' }, { ui: 'LDK — Slow Zoom', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+1+Slow+Zoom.mp4', title: 'Miss Murder Me — LDK Post 1', user: '@OuterMethod', vid: 'ldk_post_1' }, { ui: 'Merrick Cam — Surveil Order', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+1+Surveil+Order.mp4', title: 'Merrick Cam — Surveil Order', user: '@Merrick_CID', vid: 'merrick_post_1' }, /* REST OF THE SEQUENCE */ { ui: 'Jessica — Dog Poster', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+2+Lost+Dog+Poster.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 2', user: '@alvarezjessica76', vid: 'jess_post_2' }, { ui: 'Jessica — Threshold', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+3+Dog+Threshold.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 3', user: '@alvarezjessica76', vid: 'jess_post_3' }, { ui: 'LDK — Cage Reveal', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 2', user: '@OuterMethod', vid: 'ldk_post_2' }, { ui: 'Jessica — Memory', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+4-5+Reveal-Memory.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 4', user: '@alvarezjessica76', vid: 'jess_post_4' }, { ui: 'Merrick — Lost Control', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 3', user: '@Merrick_CID', vid: 'merrick_post_3' }, { ui: 'LDK — The Corner', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 4', user: '@OuterMethod', vid: 'ldk_post_4' }, { ui: "Jessica — Jessica's Offer", skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica\'s+offer.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: "Jessica Live — Post 6", user: '@alvarezjessica76', vid: 'jess_post_6' }, { ui: 'Jessica — Phone Death', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post 7', user: '@alvarezjessica76', vid: 'jess_post_7' }, { ui: 'LDK — Escape', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post 8', user: '@OuterMethod', vid: 'ldk_post_8' }, { ui: 'Merrick — Lockdown', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post 4', user: '@Merrick_CID', vid: 'merrick_post_4' } ]; RH.playSequence('seq1', clips, { skipTo: 'mmm_agent', onDone: function () { SugarCube.Engine.play('mmm_agent'); }, routes: { Y: 'jess_post_1', N: 'rabbithome', M: 'mer_post_1, O: 'mmm_sequence' } }); if (RH.mountCounter) RH.mountCounter(); }); </script> <style> .rh-seq-ctrl { margin-top: .75rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color:#fff; } .rh-seq-status { opacity:.85; display:flex; align-items:center; gap:.6rem; } .rh-seq-btn { border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff; padding:.45em .7em; border-radius:6px; cursor:pointer; } .rh-seq-btn:hover { background: rgba(255,255,255,.12); } .rh-seq-btn.ghost { opacity:.85; } @media (max-width: 640px){ .rh-seq-ctrl { gap:.55rem; } .rh-seq-btn { padding:.4em .55em; } } </style>

:: jess_post_3 <div class="rh-media" id="media-jess3"> <div class="rh-player-wrap"> <div id="clipC"></div> </div>  <div id="agent-jess3" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 3) RH.initSkinPlayer({ id: 'clipC', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%203%20Dog%20Threshold.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%203%20Dog%20Threshold.jpg', title: 'Jessica Live — Post 3', user: '@alvarezjessica76', vid: 'jess_post_3', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess3'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_3', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess3').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_4-5 when it ends const video = $('#clipC').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_4-5'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess3 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess3 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_4-5 <div class="rh-media" id="media-jess4"> <div class="rh-player-wrap"> <div id="clipD"></div> </div>  <div id="agent-jess4" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 4-5) RH.initSkinPlayer({ id: 'clipD', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%204-5%20Reveal-Memory.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica%201080p/MMM%20Post%204-5%20Reveal-Memory.jpg', title: 'Jessica Live — Post 4-5', user: '@alvarezjessica76', vid: 'jess_post_4-5', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess4'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_4-5', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess4').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_6 when it ends const video = $('#clipD').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_6'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess4 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess4 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_6 <div class="rh-media" id="media-jess6"> <div class="rh-player-wrap"> <div id="clipF"></div> </div>  <div id="agent-jess6" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 6) RH.initSkinPlayer({ id: 'clipF', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica%27s+offer.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica%27s+offer.jpg', title: 'Jessica Live — Post 6', user: '@alvarezjessica76', vid: 'jess_post_6', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess6'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post_6', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess6').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_7-8 when it ends const video = $('#clipF').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_7-8'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess6 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess6 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_1-12 <div class="rh-media" id="media-jess1_12"> <div class="rh-player-wrap"> <div id="clipJ"></div> </div>  <div id="agent-jess1_12" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Posts 1–12 compilation) RH.initSkinPlayer({ id: 'clipJ', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+post+1-12+park+snatch.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+post+1-12+park+snatch.jpg', title: 'Jessica Live — Posts 1–12', user: '@alvarezjessica76', vid: 'jess_post_1-12', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess1_12'); // 3) Y/N/M/O routing for this post (same pattern as jess_post_7-8) const routes = { Y: 'jess_post_1-12', // stays here N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess1_12').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to jess_post_1-12-2 when it ends const video = $('#clipJ').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('jess_post_1-12-2'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess1_12 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess1_12 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post_7-8 <div class="rh-media" id="media-jess5"> <div class="rh-player-wrap"> <div id="clipE"></div> </div>  <div id="agent-jess5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 7–8) RH.initSkinPlayer({ id: 'clipE', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.jpg', title: 'Jessica Live — Post 7-8', user: '@alvarezjessica76', vid: 'jess_post_7', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess5'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post 7', // stays here N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump back to Merrick console when it ends const video = $('#clipE').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: jess_post 1-12-2 <div class="rh-media" id="media-jess1_12_2"> <div class="rh-player-wrap"> <div id="clipK"></div> </div>  <div id="agent-jess1_12_2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (Post 1-12-2) RH.initSkinPlayer({ id: 'clipK', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+1-12-2+Park+Snatch.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+1-12-2+Park+Snatch.jpg', title: 'Jessica Live — Post 1-12-2', user: '@alvarezjessica76', vid: 'jess_post_1-12-2', controlsPosition: 'below' }); // 2) Layout RH.autoLayoutMedia('media-jess1_12_2'); // 3) Y/N/M/O routing for this post const routes = { Y: 'jess_post 1-12-2', // stays here N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess1_12_2').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump to Merrick console when it ends const video = $('#clipK').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess1_12_2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess1_12_2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 2 <div class="rh-media" id="media-merrick2"> <div class="rh-player-wrap"> <div id="merrickClip2"></div> </div>  <div id="agent-merrick2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip2', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%202%20Radio%20Conflict.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%202%20Radio%20Conflict.jpg', title: 'Merrick Cam — Radio Conflict', user: '@Merrick_CID', vid: 'merr_post_2', // ✅ matches CLIP_NEXT / CLIP_PREV maps controlsPosition: 'below' // ✅ lets faux-nav inject ◀ / ▶ under frame }); // 2) Layout: auto, then force stacked (no side-by-side) RH.autoLayoutMedia('media-merrick2'); $('#media-merrick2').removeClass('side'); // 3) Y/N/M/O routing — same destinations as Merrick 1 / Jessica pattern const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick2') .off('click.merr2') .on('click.merr2', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_3 when done const video = $('#merrickClip2').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_3'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 3 <div class="rh-media" id="media-merrick3"> <div class="rh-player-wrap"> <div id="merrickClip3"></div> </div>  <div id="agent-merrick3" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip3', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%203%20Loss%20of%20Control.jpg', title: 'Merrick Cam — Loss of Control', user: '@Merrick_CID', vid: 'merr_post_3', // ✅ matches CLIP_NEXT / CLIP_PREV IDs controlsPosition: 'below' // ✅ let faux-nav inject ◀ / ▶ under frame }); // 2) Layout: auto, then force stacked layout (no side-by-side) RH.autoLayoutMedia('media-merrick3'); $('#media-merrick3').removeClass('side'); // 3) Y/N/M/O routing — same canonical pattern as Merrick 1/2 & Jessica const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick3') .off('click.merr3') .on('click.merr3', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_4 when done const video = $('#merrickClip3').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_4'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick3 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick3 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 4 <div class="rh-media" id="media-merrick4"> <div class="rh-player-wrap"> <div id="merrickClip4"></div> </div>  <div id="agent-merrick4" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip4', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%204%20Perimeter%20Lockdown.jpg', title: 'Merrick Cam — Perimeter Lockdown', user: '@Merrick_CID', vid: 'merr_post_4', // ✅ canonical clip id for nav map controlsPosition: 'below' // ✅ enable faux-nav ◀ / ▶ in control bar }); // 2) Layout: FORCE stacked layout (prevent off-screen shift) RH.autoLayoutMedia('media-merrick4'); $('#media-merrick4').removeClass('side'); // 3) Y/N/M/O routing — same canonical pattern as the other Merrick/Jess posts const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick4') .off('click.merr4') .on('click.merr4', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to merr_post_6 when done const video = $('#merrickClip4').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('merr_post_6'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick4 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick4 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_merr_post 5 <div class="rh-media" id="media-merrick5"> <div class="rh-player-wrap"> <div id="merrickClip5"></div> </div>  <div id="agent-merrick5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player RH.initSkinPlayer({ id: 'merrickClip5', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+5+Dashcam+follow.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick%201080p/MMM%20post%205%20Dashcam.jpg', title: 'Merrick Cam — Dashcam Follow', user: '@Merrick_CID', vid: 'merrick_post_5' }); // 2) Layout: force stacked layout (no side-by-side) RH.autoLayoutMedia('media-merrick5'); $('#media-merrick5').removeClass('side'); // 3) Y/N/M/O routing — match Jessica/Merrick canonical routes const routes = { Y: 'jess_post_1', N: 'ldk_post_4', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under video $('#merrickClip5 .rh-frame').addClass('controls-below'); // 5) Global counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to mmm_agent when done const video = $('#merrickClip5').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* BACK TO MERRICK button pill style for this passage */ #agent-merrick5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 2 <div class="rh-media" id="media-ldk2"> <div class="rh-player-wrap"> <div id="yt2"></div> </div>  <div id="agent-ldk2" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt2', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 2', user: '@OuterMethod', vid: 'ldk_post_2' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk2'); $('#media-ldk2').removeClass('side'); // 3) Y/N/M/O routing — same pattern as ldk_post 1 const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk2').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under video $('#yt2 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to ldk_post_3 when done const video = $('#yt2').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_3'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk2 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk2 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 3 <div class="rh-media" id="media-ldk3"> <div class="rh-player-wrap"> <div id="yt3"></div> </div>  <div id="agent-ldk3" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt3', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+3+In+corner.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 3', user: '@OuterMethod', vid: 'ldk_post_3' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk3'); $('#media-ldk3').removeClass('side'); // 3) Y/N/M/O routing — same pattern as the other LDK posts const routes = { Y: 'jess_post_1', N: 'ldk_post_2', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk3').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt3 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to ldk_post_4 when done const video = $('#yt3').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_4'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk3 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk3 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 4 <div class="rh-media" id="media-ldk4"> <div class="rh-player-wrap"> <div id="yt4"></div> </div>  <div id="agent-ldk4" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt4', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 4', user: '@OuterMethod', vid: 'ldk_post_4' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk4'); $('#media-ldk4').removeClass('side'); // 3) Y/N/M/O routing — mirror other LDK posts const routes = { Y: 'jess_post_1', N: 'ldk_post_3', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk4').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt4 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to LDK Post 5 when done const video = $('#yt4').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_5'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk4 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk4 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 5 <div class="rh-media" id="media-ldk5"> <div class="rh-player-wrap"> <div id="yt5"></div> </div>  <div id="agent-ldk5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt5', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+5+Martyrdom.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 5', user: '@OuterMethod', vid: 'ldk_post_5' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk5'); $('#media-ldk5').removeClass('side'); // 3) Y/N/M/O routing — mirror other LDK posts const routes = { Y: 'jess_post_1', N: 'ldk_post_4', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt5 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to LDK Post 8 when done const video = $('#yt5').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('ldk_post_8'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 7 <div class="rh-media" id="media-ldk7"> <div class="rh-player-wrap"> <div id="yt7"></div> </div>  <div id="agent-ldk7" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt7', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+7+Forced+Entry.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 7', user: '@OuterMethod', vid: 'ldk_post_7' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk7'); $('#media-ldk7').removeClass('side'); // 3) Y/N/M/O routing (match the LDK pattern from 5/8) const routes = { Y: 'jess_post_1', N: 'ldk_post_4', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk7').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt7 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to mmm_agent when done const video = $('#yt7').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk7 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk7 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: ldk_post 8 <div class="rh-media" id="media-ldk8"> <div class="rh-player-wrap"> <div id="yt8"></div> </div>  <div id="agent-ldk8" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div>  <div class="rh-player-links"> <a href="https://youtube.com/@OuterMethod/playlists" target="_blank" rel="noopener"> Subscribe on YouTube </a> </div> <script> $(function () { // 1) Faux YouTube-style player (16:9) RH.initSkinPlayer({ id: 'yt8', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', // poster: 'https://YOUR-S3/frame-yt.jpg', title: 'Miss Murder Me — LDK Post 8', user: '@OuterMethod', vid: 'ldk_post_8' // unique ID for 00/20 counter }); // 2) Layout: call autoLayout, then FORCE stacked layout RH.autoLayoutMedia('media-ldk8'); $('#media-ldk8').removeClass('side'); // 3) Y/N/M/O routing — mirror LDK pattern const routes = { Y: 'jess_post_1', N: 'ldk_post_5', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-ldk8').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target) { SugarCube.Engine.play(target); } }); // 4) Controls under the video $('#yt8 .rh-frame').addClass('controls-below'); // 5) Global 00/20 counter bubble if (RH.mountCounter) { RH.mountCounter(); } // 6) Autoplay + auto-advance to Merrick console when done const video = $('#yt8').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-ldk8 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-ldk8 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

{ ui: 'Jessica — Dog poster', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+2+Lost+Dog+Poster.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'Jessica —Threshold', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+3+Dog+Threshold.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'LDK — Cage Reveal', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+2+cage+reveal.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post X', user: '@OuterMethod', vid: 'ldk_post_X' } { ui: 'Jessica — Memory', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+4-5+Reveal-Memory.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'Merrick — Lost Control', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+3+Loss+of+Control.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post X', user: '@Merrick_CID', vid: 'merrick_post_X' } { ui: 'LDK — The Corner, skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+4+In+corner.mp4, poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post X', user: '@OuterMethod', vid: 'ldk_post_X' } { ui: 'Jessica — Jessica's Offer', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+6+Jessica's+offer.mp4', poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'Jessica — Phone Death, skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+7-8+Phone+to+Death.mp4, poster: 'https://YOUR-S3/vertical_clip.jpg', title: 'Jessica Live — Post X', user: '@alvarezjessica76', vid: 'jess_post_X' } { ui: 'LDK — Escape', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/MMM+post+8+Escape+angle.mp4', poster: 'https://YOUR-S3/ldk_clip.jpg', title: 'Miss Murder Me — LDK Post X', user: '@OuterMethod', vid: 'ldk_post_X' } { ui: 'Merrick — Lockdown, skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+4+perimeter+Lockdown.mp4', poster: 'https://YOUR-S3/merrick_clip.jpg', title: 'Merrick Cam — Post X', user: '@Merrick_CID', vid: 'merrick_post_X' }

:: full_case_file  <div class="rh-media" id="media-fullcase"> <div class="rh-player-wrap"> <div id="fullCase"></div> </div> </div>  <div class="rh-player-links fullcase-links"> <span class="agent-back-wrap fullcase-back"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> <script> window.RH = window.RH || {}; $(function () { // Build the faux player for the pre-cut sequence RH.initSkinPlayer({ id: 'fullCase', skin: 'yt', // 16:9 "YouTube-style" frame aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/full_case_file.mp4', title: 'Miss Murder Me — Full Case File', user: '@OuterMethod', vid: 'full_case_file', controlsPosition: 'below' // keep transport under the frame }); // Layout the player using our standard helper if (RH.autoLayoutMedia) { RH.autoLayoutMedia('media-fullcase'); $('#media-fullcase').removeClass('side'); // force stacked if needed } // Optional: mount the global watch counter if available if (RH.mountCounter) { RH.mountCounter(); } // Hook the underlying <video> so we jump to mmm_agent when done const $wrap = $('#fullCase'); const video = $wrap.find('video').get(0); if (video) { // Try to autoplay with sound on (user gesture may still be required on mobile) video.muted = false; video.play().catch(() => { // If blocked, user can manually tap play. }); video.onended = function () { // When the sequence finishes, send player to the Merrick agent passage SugarCube.Engine.play('mmm_agent'); }; } }); </script> <style> /* BACK TO MERRICK pill style for full_case_file */ .fullcase-back .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .fullcase-back .macro-link:hover { background: rgba(255,255,255,.12); } .fullcase-links { margin-top: 0.75rem; text-align: center; } </style>

:: mmm_pov_mode <div class="rh-media" id="pov-media"> <div class="rh-player-wrap">  <div id="povJess" class="pov-player pov-active"></div> <div id="povMerrick" class="pov-player"></div> <div id="povLDK" class="pov-player"></div> </div> </div>  <div class="pov-ctrl-bar"> <div class="pov-left"> <div class="pov-toggle-label">TOGGLE HERE FOR LIVE VIEW</div> <div class="pov-buttons"> <button class="pov-btn pov-btn-active" id="btnJess">JESSICA POV</button> <button class="pov-btn" id="btnMerrick">MERRICK POV</button> <button class="pov-btn" id="btnLDK">LDK POV</button> </div> </div> <div class="pov-status"> <span class="pov-label" id="povLabel">Jessica — Live Stream</span> <span class="pov-time" id="povTimecode">00:00</span> </div> </div>  <div class="rh-player-links pov-links"> <span class="agent-back-wrap pov-back"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> <<script>> (function () { // Prevent double-wiring if SugarCube re-renders this passage if (window._mmmPovWired) return; window._mmmPovWired = true; $(document).on(':passagedisplay', function () { if (SugarCube.State.passage !== 'mmm_pov_mode') return; // --- 1. Build three faux players once --- if (!$('#povJess video').length) { RH.initSkinPlayer({ id: 'povJess', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/jessica_pov_mode.mp4', title: 'Jessica — Live POV', user: '@alvarezjessica76', vid: 'pov_jessica', controlsPosition: 'below' }); RH.initSkinPlayer({ id: 'povMerrick', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/merrick_pov_mode.mp4', title: 'Merrick — Surveillance POV', user: '@Merrick_CID', vid: 'pov_merrick', controlsPosition: 'below' }); RH.initSkinPlayer({ id: 'povLDK', skin: 'yt', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/LDK+1080p/ldk_pov_mode.mp4', title: 'LDK — Killer POV', user: '@OuterMethod', vid: 'pov_ldk', controlsPosition: 'below' }); } // IMPORTANT: do NOT autoLayout here; POV stays stacked $('#pov-media').removeClass('side'); // --- 2. Internal state + helpers --- let activeKey = 'jess'; // 'jess' | 'merrick' | 'ldk' let lastTime = 0; // shared timecode in seconds const players = { jess: $('#povJess').find('video').get(0) || null, merrick: $('#povMerrick').find('video').get(0) || null, ldk: $('#povLDK').find('video').get(0) || null }; // HARD OVERRIDE: make sure all POV videos are unmuted to start Object.keys(players).forEach(key => { const v = players[key]; if (!v) return; try { v.muted = false; v.defaultMuted = false; v.volume = 1.0; v.removeAttribute('muted'); } catch (e) {} }); const labels = { jess: 'Jessica — Live Stream', merrick: 'Merrick — Surveillance', ldk: 'LDK — Killer Cam' }; const $label = $('#povLabel'); const $time = $('#povTimecode'); function formatTime(t) { t = Math.max(0, t | 0); const m = (t / 60) | 0; const s = (t % 60) | 0; const mm = m < 10 ? '0' + m : '' + m; const ss = s < 10 ? '0' + s : '' + s; return mm + ':' + ss; } function updateTimecode(t) { lastTime = t; $time.text(formatTime(t)); } // Keep timecode in sync with active video Object.keys(players).forEach(key => { const video = players[key]; if (!video || video.dataset.rhPovWired) return; video.dataset.rhPovWired = '1'; video.addEventListener('timeupdate', function () { if (key === activeKey) { updateTimecode(video.currentTime || 0); } }); // Safety: any actual play keeps this POV unmuted video.addEventListener('play', function () { try { video.muted = false; video.defaultMuted = false; video.removeAttribute('muted'); video.volume = 1.0; } catch (e) {} }); }); function setActiveKey(newKey) { if (!players[newKey] || newKey === activeKey) return; const oldKey = activeKey; const oldVid = players[oldKey]; const newVid = players[newKey]; // 1) Capture time from old POV if (oldVid && !isNaN(oldVid.currentTime)) { lastTime = oldVid.currentTime; try { oldVid.pause(); } catch (e) {} } // 2) Toggle visibility $('.pov-player').removeClass('pov-active'); if (newKey === 'jess') $('#povJess').addClass('pov-active'); if (newKey === 'merrick') $('#povMerrick').addClass('pov-active'); if (newKey === 'ldk') $('#povLDK').addClass('pov-active'); // 3) Update button highlight + label $('.pov-btn').removeClass('pov-btn-active'); if (newKey === 'jess') $('#btnJess').addClass('pov-btn-active'); if (newKey === 'merrick') $('#btnMerrick').addClass('pov-btn-active'); if (newKey === 'ldk') $('#btnLDK').addClass('pov-btn-active'); $label.text(labels[newKey] || 'POV'); // 4) Seek new POV to same time, then play UNMUTED after user has interacted function seekAndPlay() { try { if (!isNaN(lastTime)) { newVid.currentTime = lastTime; } newVid.muted = false; newVid.defaultMuted = false; newVid.removeAttribute('muted'); newVid.volume = 1.0; newVid.play().catch(() => { // if blocked, user can hit play in controls }); } catch (e) { // ignore } } if (newVid.readyState >= 2) { seekAndPlay(); } else { const onMeta = function () { newVid.removeEventListener('loadedmetadata', onMeta); seekAndPlay(); }; newVid.addEventListener('loadedmetadata', onMeta); } activeKey = newKey; } // Wire POV buttons (clear old handlers first) $('#btnJess').off('click.mmmPov').on('click.mmmPov', function () { setActiveKey('jess'); }); $('#btnMerrick').off('click.mmmPov').on('click.mmmPov', function () { setActiveKey('merrick'); }); $('#btnLDK').off('click.mmmPov').on('click.mmmPov', function () { setActiveKey('ldk'); }); // --- 3. Prime Merrick + LDK only AFTER Jessica is manually started --- const startVid = players.jess; if (startVid && !startVid.dataset.rhPovStartWired) { startVid.dataset.rhPovStartWired = '1'; let primedOthers = false; function primeOthers() { if (primedOthers) return; primedOthers = true; ['merrick', 'ldk'].forEach(function (key) { const v = players[key]; if (!v) return; try { // Prime silently, then restore unmuted state v.muted = true; const p = v.play(); if (p && typeof p.then === 'function') { p.then(function () { v.pause(); v.currentTime = 0; v.muted = false; v.defaultMuted = false; v.removeAttribute('muted'); v.volume = 1.0; }).catch(function () {}); } else { v.pause(); v.currentTime = 0; v.muted = false; v.defaultMuted = false; v.removeAttribute('muted'); v.volume = 1.0; } } catch (e) {} }); } // KEY CHANGE: we no longer auto-play here. // We just wait for the first real play (user gesture) on Jessica. startVid.addEventListener('play', function () { try { startVid.muted = false; startVid.defaultMuted = false; startVid.removeAttribute('muted'); startVid.volume = 1.0; } catch (e) {} primeOthers(); }, { once: true }); } }); })(); <</script>> <style> /* Only one POV player visible at a time */ .pov-player { display: none; } .pov-player.pov-active { display: block; } #pov-media { width: 100%; margin: 0 auto; } #pov-media .rh-player-wrap { max-width: min(1100px, 100vw); margin: 0 auto; } #pov-media .rh-frame { margin: 0 auto; } .pov-ctrl-bar { width: 100%; max-width: min(1100px, 100vw); margin: 0.01rem auto 0.001rem auto; /* less empty space above & below */ padding: 0.01rem 0.005rem; /* tiny vertical padding */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color: #fff; } .pov-left { display: flex; flex-direction: column; gap: 0.0015rem; /* tighter gap between label and buttons */ } .pov-toggle-label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; } .pov-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pov-btn { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; padding: 0.4em 0.7em; border-radius: 6px; cursor: pointer; letter-spacing: 0.04em; } .pov-btn:hover { background: rgba(255,255,255,.12); } .pov-btn-active { border-color: rgba(255,0,0,.6); background: rgba(255,0,0,.25); } .pov-status { display: flex; align-items: center; gap: 0.5rem; opacity: 0.9; } .pov-time { font-variant-numeric: tabular-nums; padding: 0.2em 0.6em; border-radius: 4px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); } @media (max-width: 640px) { .pov-ctrl-bar { flex-direction: column; align-items: flex-start; } } .pov-back .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pov-back .macro-link:hover { background: rgba(255,255,255,.12); } .pov-links { margin-top: 0.015rem; /* closer to the POV bar */ text-align: center; } </style>

:: mmm_gps_clue <<set $mmmAfterGPS to true>> <p id="gps-status">Checking your location…</p> <p id="gps-debug"></p> <div id="gps-map" style="width:100%; height:300px; border:1px solid #444;"></div>  <div class="gps-proceed"> <<link "PROCEED">> <<if $nearClue>> <<goto "mmm_jess_gps">> <<else>> <<replace "#gps-status">>❌ No clue found — move closer to the marked spot and hit PROCEED again.<</replace>> <</if>> <</link>> </div>  <div class="rh-player-links gps-links"> <span class="agent-back-wrap gps-back"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> <<script>> (function () { const clueLat = 33.96240; const clueLon = -118.45110; const detectionRadius = 10; // real-world radius in feet const desktopOverride = true; // ☑ allow 0-ft testing from desktop // Distance helper (Haversine) function getDistanceInFeet(lat1, lon1, lat2, lon2) { const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat/2)**2 + Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180) * Math.sin(dLon/2)**2; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); return R * c * 3280.84; // km → ft } // ---- Desktop override ---- if (desktopOverride && !navigator.geolocation) { console.log("[GPS] Desktop override active → auto-success."); State.variables.nearClue = true; document.getElementById("gps-status").textContent = "🎯 Clue Nearby! (desktop test)"; document.getElementById("gps-debug").textContent = "Desktop browser – GPS override forced success."; return; } navigator.geolocation.getCurrentPosition( function (pos) { const lat = pos.coords.latitude; const lon = pos.coords.longitude; State.variables.userLat = lat; State.variables.userLon = lon; const dist = getDistanceInFeet(lat, lon, clueLat, clueLon); document.getElementById("gps-debug").textContent = "Lat " + lat.toFixed(5) + " / Lon " + lon.toFixed(5) + " — Distance: " + Math.round(dist) + " ft"; if (dist <= detectionRadius) { State.variables.nearClue = true; document.getElementById("gps-status").textContent = "🎯 Clue Nearby!"; } else { State.variables.nearClue = false; document.getElementById("gps-status").textContent = "❌ No clue found."; } // Map const map = new google.maps.Map(document.getElementById("gps-map"), { center: { lat, lng: lon }, zoom: 18, mapTypeId: "satellite", }); // Player new google.maps.Marker({ position: { lat, lng: lon }, map, title: "You are here", icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" }); // Clue new google.maps.Marker({ position: { lat: clueLat, lng: clueLon }, map, title: "Clue location" }); // Radius new google.maps.Circle({ map, center: { lat: clueLat, lng: clueLon }, radius: detectionRadius * 0.3048, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.25 }); }, function (error) { document.getElementById("gps-status").textContent = "⚠️ GPS error: " + error.message; // Desktop override fallback if (desktopOverride) { console.log("[GPS] Using fallback override due to error."); State.variables.nearClue = true; document.getElementById("gps-debug").textContent = "Override success (GPS failed)."; } } ); })(); <</script>>  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5gygK_hFUXI0A5ihee-G_z_6cGgf7wZY"></script> <style> .gps-proceed { margin-top: 1rem; text-align: center; } .gps-proceed .macro-link { font-weight: 700; letter-spacing: 0.12em; } .gps-back .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .gps-back .macro-link:hover { background: rgba(255,255,255,.12); } .gps-links { margin-top: 0.75rem; text-align: center; } </style>

:: reset_progress [reset] <h2>Reset Miss Murder Me progress?</h2> <p>This will clear your watched video count, unlocks, and playtime clock on this device.</p> <<link "YES — wipe local progress">> <<run RH.resetProgress()>> <p>Progress cleared. Returning to Merrick…</p> <<goto "mmm_agent">> <</link>>

:: mmm_merr_post 6 <div class="rh-media" id="media-merrick6"> <div class="rh-player-wrap"> <div id="merrickClip6"></div> </div>  <div id="agent-merrick6" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://x.com/Merrick_CID" target="_blank" rel="noopener"> Follow on X </a> </div> <script> $(function () { // 1) Faux X / Twitter-style player (Bag & Tag, with poster) RH.initSkinPlayer({ id: 'merrickClip6', skin: 'x', aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+6+Bag+%26+tag.mp4', poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/Merrick+1080p/MMM+post+6+Bag+%26+tag.jpg', title: 'Merrick Cam — Bag & Tag', user: '@Merrick_CID', vid: 'merr_post_6', // ✅ clip id for nav map controlsPosition: 'below' // ✅ enable faux-nav ◀ / ▶ in control bar }); // 2) Layout: FORCE stacked layout (prevent off-screen shift) RH.autoLayoutMedia('media-merrick6'); $('#media-merrick6').removeClass('side'); // 3) Y/N/M/O routing — same canonical pattern as other Merrick/Jess posts const routes = { Y: 'jess_post_1', N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-merrick6') .off('click.merr6') .on('click.merr6', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Global 00/20 counter if (window.RH && typeof RH.mountCounter === 'function') { RH.mountCounter(); } // 5) Autoplay + auto-advance to mmm_agent when done const video = $('#merrickClip6').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmm_agent'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-merrick6 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-merrick6 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

:: mmm_jess_gps <div class="rh-media" id="media-jess5"> <div class="rh-player-wrap"> <div id="clipE"></div> </div>  <div id="agent-jess5" class="rh-agent"> <div class="agent-block"> <div class="choice-row"> <button class="rh-btn choice" data-choice="Y">Y</button> <button class="rh-btn choice" data-choice="N">N</button> <button class="rh-btn choice" data-choice="M">M</button> <button class="rh-btn choice" data-choice="O">O</button>  <span class="agent-back-wrap"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </span> </div> </div> </div> </div> <div class="rh-player-links"> <a href="https://tiktok.com/@alvarezjessica76" target="_blank" rel="noopener"> Follow on TikTok </a> </div> <script> $(function () { // 1) Build Jessica faux player (GPS unlock — "I'm back") RH.initSkinPlayer({ id: 'clipE', skin: 'tt', aspect: '9:16', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+9+I\'m+back.mp4', // poster: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/MMM+Post+9+I\'m+back.jpg', title: 'Jessica Live — Post 9 (GPS Unlock)', user: '@alvarezjessica76', vid: 'jess_post_9', controlsPosition: 'below' }); // 2) Layout (same wrapper + sizing as jess_post_7-8) RH.autoLayoutMedia('media-jess5'); // 3) Y/N/M/O routing for this GPS post const routes = { Y: 'jess_post 9', // stays in Jessica lane (GPS post) N: 'ldk_post_1', M: 'merr_post_1', O: 'full_case_file' }; $('#agent-jess5').on('click', '.choice', function () { const choice = String($(this).data('choice') || '').toUpperCase(); const target = routes[choice]; if (target && window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play(target); } }); // 4) Optional: global watch counter if (RH.mountCounter) { RH.mountCounter(); } // 5) Auto-play this clip and jump back to Merrick console when it ends const video = $('#clipE').find('video').get(0); if (video) { video.muted = false; video.play().catch(() => { // user can manually hit PLAY if autoplay is blocked }); video.onended = function () { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmm_agent'); } }; } }); </script> <style> /* Style the BACK TO MERRICK button inside the green box for this passage */ #agent-jess5 .agent-back-wrap .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.35em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.85); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; margin-left: 0.75rem; } #agent-jess5 .agent-back-wrap .macro-link:hover { background: rgba(255,255,255,.12); } </style>

<div class="rh-media" id="mmm-intro-media"> <div class="rh-player-wrap"> <div id="introClip"></div> </div> </div> <script> $(function () { // 1) Build faux player for the intro RH.initSkinPlayer({ id: 'introClip', skin: 'yt', // widescreen frame; can switch to 'tt' if you prefer aspect: '16:9', src: 'https://missmurderme-demo-media.s3.us-east-1.amazonaws.com/jessica+1080p/Miss+Murder+Me+Intro.mp4', title: 'Miss Murder Me — Intro', user: '@OuterMethod', vid: 'mmm_intro', controlsPosition: 'below' }); // 2) Layout + force stacked, then make it fill the viewport if (RH.autoLayoutMedia) { RH.autoLayoutMedia('mmm-intro-media'); } $('#mmm-intro-media').removeClass('side'); // 3) Optional global counter if (RH.mountCounter) { RH.mountCounter(); } // 4) Autoplay + auto-advance to mmm_agent, try for fullscreen once const $frame = $('#introClip .rh-frame'); const video = $('#introClip').find('video').get(0); if (video) { // try autoplay with sound on; mobile may still require user interaction video.muted = false; video.play().catch(() => { // user can tap PLAY if blocked }); // attempt fullscreen on first play (browsers may ignore if no gesture) const fsTarget = $frame.get(0) || video; const onPlay = function () { video.removeEventListener('play', onPlay); if (fsTarget && fsTarget.requestFullscreen) { fsTarget.requestFullscreen().catch(() => {}); } }; video.addEventListener('play', onPlay); // when intro finishes, go to Merrick console video.onended = function () { if (document.fullscreenElement && document.exitFullscreen) { document.exitFullscreen().catch(() => {}); } SugarCube.Engine.play('mmm_agent'); }; } }); </script>

<div id="about-wrap"> <div id="about-content"> <div id="mmm-text" data-typewriter="true"> <p>This sequence is currently in a restricted preview for partners, investors, and AWS review.</p> <p>To request access to the live interactive demo, contact <a href="mailto:jason@rabbitholestory.com">jason@rabbitholestory.com</a>. </p> </div> <br><br> <a class="back-btn" onclick='SugarCube.Engine.play("mmmhome")'>BACK</a> </div> </div>  <div id="code-gate"> <input id="codeInput" type="text" placeholder="Enter Code"> <button id="submitCode">SUBMIT</button> <div id="codeResponse"></div> </div> <<script>> (function () { function handleCode() { var code = jQuery('#codeInput').val().trim().toLowerCase(); var $resp = jQuery('#codeResponse'); if (!code) { return; } if (code === 'squat') { $resp.text(''); SugarCube.Engine.play('squat'); } else if (code === 'mmmbeta') { $resp.text(''); SugarCube.Engine.play('mmm_intro'); } else { $resp.text('Wrong code. Try again.'); } } jQuery(function () { jQuery('#submitCode').off('.codegate').on('click.codegate', function (ev) { ev.preventDefault(); handleCode(); }); jQuery('#codeInput').off('.codegate').on('keydown.codegate', function (ev) { if (ev.key === 'Enter') { ev.preventDefault(); handleCode(); } }); }); })(); <</script>> <style> /* 🔥 Full-page background image */ #about-wrap { position: relative; width: 100%; min-height: 100vh; background-image: url('https://i.imgur.com/6ctu2SX.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; padding: 2rem; } /* Keep content readable over the image */ #about-content { max-width: 600px; background: rgba(0,0,0,0.55); padding: 2rem; border-radius: 8px; backdrop-filter: blur(3px); } #mmm-text p { color: #fff; line-height: 1.45; } #code-gate { margin-top: 1.5rem; text-align: center; } #codeInput { padding: 0.6rem 0.8rem; width: 200px; border-radius: 6px; border: 1px solid #00e4ff; background: rgba(0,0,0,0.6); color: #fff; } #submitCode { padding: 0.6rem 1rem; margin-left: 0.5rem; border-radius: 6px; border: 1px solid #00e4ff; background: rgba(0,0,0,0.7); color: #fff; cursor: pointer; } #submitCode:hover { background: rgba(0,0,0,0.9); } #codeResponse { margin-top: 0.75rem; color: #ff6b6b; } .back-btn { color: #00e4ff; cursor: pointer; } </style>

:: reset_progress [reset] <<set _routing to $merrickRouting>> <<set _caseSolved = (_routing and _routing.caseSolved)>> <div id="reset-wrap"> <div id="reset-overlay"></div> <div id="reset-inner"> <div id="reset-label"> CASE FILE: <strong>MISS MURDER ME / BETA-01</strong> </div> <div id="reset-text"> ██ CASE STATUS: <strong> <<if _caseSolved>> SOLVED (BETA BUILD) <<else>> PENDING <</if>> </strong> This screen will wipe your local Miss Murder Me progress on this device: watched video count, unlocks, and playtime clock. When you confirm below, we’ll clear your case data and return you to Merrick’s terminal with a clean file. </div> <div id="reset-actions"> <span class="reset-copy"> <p class="demo-end-note"> <strong>WARNING:</strong> This cannot be undone. Your previous run will only exist in Merrick’s server-side case log. </p> </span> <div id="reset-start-btn"> <<link "YES — RESET LOCAL CASE DATA">> <<run RH.resetProgress()>> <<goto "mmm_agent">> <</link>> </div> </div> </div> </div> <p class="demo-end-link"> <<link "OPEN BETA FEEDBACK FORM">><<goto "mmm_beta_feedback">><</link>> <<link "RETURN TO RABBITHOLE HOME">><<goto "rabbithome">><</link>> </p> <style> /* Full-page reset wrap with background image */ #reset-wrap { position: relative; width: 100%; min-height: 100vh; padding: 2rem; display: flex; justify-content: center; align-items: center; background-image: url('https://i.imgur.com/6ctu2SX.jpeg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } #reset-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); } #reset-inner { position: relative; max-width: 720px; width: 100%; padding: 1.75rem 2rem; border-radius: 8px; background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(0, 228, 255, 0.4); box-shadow: 0 0 35px rgba(0, 0, 0, 0.9); color: #fff; font-size: 0.95rem; line-height: 1.5; } #reset-label { font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #00e4ff; margin-bottom: 1rem; } #reset-text { white-space: pre-line; margin-bottom: 1.5rem; } #reset-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .reset-copy { max-width: 60%; } #reset-start-btn .macro-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 1.4em; border-radius: 999px; border: 1px solid rgba(0, 228, 255, 0.8); background: rgba(0, 0, 0, 0.9); color: #fff; font: 700 11px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; } #reset-start-btn .macro-link:hover { background: rgba(0, 228, 255, 0.18); } .demo-end-note, .demo-end-link { text-align: center; margin-top: 1rem; } .demo-end-link .macro-link { color: #00e4ff; text-decoration: none; } .demo-end-link .macro-link:hover { text-decoration: underline; } @media (max-width: 640px) { #reset-inner { padding: 1.4rem 1.1rem; } #reset-actions { flex-direction: column; align-items: flex-start; } .reset-copy { max-width: 100%; } } </style>

<div class="mmm-feedback-wrap"> <p>1. Copy the questions below into an email.</p> <p>2. Answer underneath each question in as much detail as you like.</p> <p>3. Send to <a href="mailto:jason@rabbitholestory.com">jason@rabbitholestory.com</a></p> <div class="beta-summary"> <p><strong>Session summary (approx.):</strong></p> <ul> <li>Total clips watched: <span id="beta-total-clips">—</span></li> <li>Time in demo: <span id="beta-total-mins">—</span> minutes</li> </ul> <p class="beta-note"></p> <p><strong>Basic setup</strong> — What device, browser, and connection were you using?<br> (Desktop/laptop or phone, OS, browser, headphones or speakers, approximate screen size.)</p> <p><strong>Technical performance</strong> — Did anything break or feel janky?<br> (video playback issues, audio glitches, lag, dead links, passages that stuck or repeated, problems, etc.)</p> <p><strong>GPS / clue unlocks</strong> — If you unlocked GPS or other hidden leads, did it feel earned and understandable?<br> If not, what would make those unlocks clearer?</p> <p><strong>Difficulty & guidance</strong> — Overall, was this:<br> too guided, about right, or too opaque / “figure it out yourself”?<br> What kind of hinting or UI affordances would improve the experience?</p> <p><strong>Emotional reaction</strong> — How did the demo make you feel?<br> (uneasy, thrilled, bored, overwhelmed, etc.)<br> Were there any moments that stuck with you after you finished?</p> <p><strong>Final thoughts</strong> — If you could change or add one thing before we show this to a cold audience, what would it be?</p> <br> <<link "RETURN TO RABBITHOLE HOME">><<goto "rabbithome">><</link>> </div> <style> .mmm-feedback-wrap { max-width: 850px; margin: 2rem auto; padding: 1rem 1.5rem; font-size: 0.95rem; line-height: 1.5; color: #fff; } .mmm-feedback-wrap hr { margin: 1.5rem 0; border: 0; border-top: 1px solid rgba(0, 228, 255, 0.3); } .mmm-feedback-wrap a { color:#00e4ff; text-decoration:none; } .mmm-feedback-wrap a:hover { text-decoration:underline; } </style>

:: mmm_case_question <<run RH.mountCounter()>> <div id="case-wrap"> <div id="case-overlay"></div> <div id="case-inner"> <div class="mmm-terminal" id="mmmCaseQuestion"> <div id="merrick-output"> <p><strong>MERRICK:</strong> The Lost Dog Killer is using the missing-dog posters to find victims. Based on that pattern, where do I redeploy units?</p> <p>Type your answer.</p> </div> <div class="mmm-terminal-row" style="display:flex;gap:.5rem;align-items:center;margin-top:1rem;"> <input id="mmm-case-answer" type="text" placeholder="TYPE YOUR ANSWER…" style="flex:1;padding:.65rem .75rem;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;letter-spacing:.06em;text-transform:uppercase;outline:none;"> <button id="mmm-case-submit" type="button" class="rh-btn">SUBMIT</button> </div> <div style="margin-top:1rem;"> <<link "BACK TO MERRICK CONSOLE">><<goto "mmm_agent">><</link>> </div> </div> </div> </div> <<script>> (function () { var $ = window.jQuery || window.$; if (!$) { console.error('[mmm_case_question] jQuery not found'); return; } function getVars() { if (window.SugarCube && SugarCube.State && SugarCube.State.variables) return SugarCube.State.variables; if (window.State && State.variables) return State.variables; return {}; } function write(html) { $('#merrick-output').html(html); } // Local fallback grader (in case canonical helper is missing or opts out) function localGrade(valRaw) { var v = getVars(); var s = String(valRaw || '').toLowerCase(); var hasPark = /\bpark\b|\bparks\b|\btrail\b|\btrails\b|\btrailhead\b|\bgreenbelt\b/.test(s); var hasPoster = (/\bposter\b|\bposters\b|\bflyer\b|\bfliers\b/.test(s)) && (/\bdog\b|\bdogs\b|\bpuppy\b|\bmissing\b/.test(s)); // Mirror our canonical flags as closely as possible v.mmmFinalQuestionRequired = true; v.mmmFinalQuestionPrompted = true; v.mmmFinalQuestionAnswered = true; if (hasPark || hasPoster) { v.mmmFinalQuestionSolved = true; v.merrickRouting = v.merrickRouting || {}; v.merrickRouting.caseSolved = true; write( '<p><strong>MERRICK:</strong> Copy.</p>' + '<p>We’re shifting the canvass to ' + (hasPark ? '<strong>parks/trail corridors</strong>' : '') + (hasPark && hasPoster ? ' and ' : '') + (hasPoster ? '<strong>missing-dog poster hotspots</strong>' : '') + '. Units roll now.</p>' + '<p><em>Stand by…</em></p>' ); setTimeout(function () { try { if (window.SugarCube && SugarCube.Engine) { SugarCube.Engine.play('mmm_end_beta'); } else if (window.Engine && Engine.play) { Engine.play('mmm_end_beta'); } } catch (e) { console.error('[mmm_case_question] redirect error:', e); } }, 450); return true; } write( '<p><strong>MERRICK:</strong> That’s not actionable.</p>' + '<p>I need a search vector—think <strong>parks</strong> or <strong>missing-dog poster</strong> locations. Try again.</p>' ); return false; } function submit() { var inp = document.getElementById('mmm-case-answer'); if (!inp) return; var val = (inp.value || '').trim(); if (!val) return; // Click SFX like the rest of the build if (window.RH && typeof RH.playClick === 'function') { try { RH.playClick(); } catch (e) { /* ignore */ } } var handled = false; // Prefer canonical final-case handler if present if (window.setup && typeof setup.merrickMaybeHandleFinalCaseAnswer === 'function') { try { // Convention: return false to explicitly delegate to local fallback. var result = setup.merrickMaybeHandleFinalCaseAnswer(val, { fromPassage: 'mmm_case_question', outputSelector: '#merrick-output' }); handled = (result !== false); // true or undefined => treated as handled } catch (e) { console.error('[mmm_case_question] canonical handler error:', e); } } if (!handled) { localGrade(val); } inp.value = ''; } function bindOnce() { var btn = document.getElementById('mmm-case-submit'); var inp = document.getElementById('mmm-case-answer'); if (!btn || !inp) { setTimeout(bindOnce, 50); return; } // Guard: do not double-bind if player revisits if (btn.dataset.mmmBound === '1') return; btn.dataset.mmmBound = '1'; // Capture-phase listeners so they fire even if global handlers stop propagation btn.addEventListener('click', function (e) { e.preventDefault(); submit(); }, true); inp.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); submit(); } }, true); // Autofocus on the answer input, after DOM settles setTimeout(function () { try { inp.focus(); } catch (e) {} }, 60); } bindOnce(); })(); <</script>> <style> #case-wrap{ position:relative; width:100%; min-height:100vh; padding:2rem; display:flex; justify-content:center; align-items:center; background-image:url('https://i.imgur.com/6ctu2SX.jpeg'); background-size:cover; background-position:center center; background-repeat:no-repeat; box-sizing:border-box; } #case-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.75); z-index:0; } #case-inner{ position:relative; z-index:1; width:min(760px, calc(100% - 2rem)); border-radius:8px; background:rgba(0,0,0,.80); border:1px solid rgba(0,228,255,.55); box-shadow:0 0 35px rgba(0,0,0,.90); box-sizing:border-box; overflow:hidden; } #case-inner::before{ content:""; position:absolute; inset:14px; border-radius:6px; border:1px solid rgba(0,228,255,.45); pointer-events:none; } #mmmCaseQuestion{ margin:0; padding:1.75rem 2rem; background:transparent; border:0; box-sizing:border-box; position:relative; z-index:1; color:#fff; } @media (max-width:640px){ #case-wrap{padding:1.25rem;} #mmmCaseQuestion{padding:1.25rem 1.1rem;} #case-inner::before{inset:12px;} } </style>