Save point: add view selector overlay, mobile/desktop view toggle, scene10g (1982 Holistic Underground), scene10h (1998 Alternative Medicine), expand health timeline, trim scene10f GLP-1 content, minor CSS fixes

index.html

@@ -83,6 +83,7 @@
             display: none;
             justify-content: center;
             align-items: center;
+            overflow-y: auto;
             font-family: 'Courier New', monospace;
             font-size: 1.2rem;
             text-align: center;
@@ -244,7 +245,7 @@
             flex-direction: column;
             justify-content: flex-start;
             align-items: center;
-            padding: 2rem 2rem 1rem;
+            padding: 2rem 2rem 5rem;
             overflow-y: auto;
         }
         #scene4a {
@@ -268,6 +269,12 @@
         #scene4f .s4visual {
             margin-top: 0;
         }
+        #scene10g .s4visual {
+            margin-top: -0.8rem;
+        }
+        #scene10g .s4visual .comp-table {
+            margin-top: 0;
+        }
         .scene4text {
             white-space: pre-wrap;
             text-align: center;
@@ -879,9 +886,162 @@
         #sceneFoodLinks .food-links-title { color:#00ff00; font-size:1.5rem; margin-bottom:1.5rem; }
         #sceneFoodLinks .food-btn { display:block; width:100%; padding:0.8rem 2rem; margin:0.5rem 0; background:#001100; color:#00ff00; border:2px solid #00ff00; cursor:pointer; font-family:'Courier New',monospace; font-size:1rem; letter-spacing:2px; transition:background 0.2s ease; }
         #sceneFoodLinks .food-btn:hover { background:#003300; }
+
+        /* View selector overlay */
+        #viewOverlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            z-index: 300; background: rgba(0,0,0,0.85);
+            display: flex; align-items: center; justify-content: center;
+            opacity: 0; pointer-events: none;
+            transition: opacity 0.6s ease;
+        }
+        #viewOverlay.visible { opacity: 1; pointer-events: auto; }
+        .viewOverlay-inner { text-align: center; }
+        .viewOverlay-title {
+            font-size: 2rem; font-weight: bold; color: #00ff00;
+            letter-spacing: 4px; margin-bottom: 0.5rem;
+        }
+        .viewOverlay-sub {
+            font-size: 1rem; color: #007700;
+            margin-bottom: 2rem; letter-spacing: 2px;
+        }
+        .viewOverlay-btns { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
+        .viewOverlay-btn {
+            padding: 1rem 2.5rem; font-size: 1rem;
+            background: #001100; color: #00ff00;
+            border: 2px solid #00ff00; cursor: pointer;
+            font-family: 'Courier New', monospace; letter-spacing: 3px;
+            transition: background 0.2s ease;
+        }
+        .viewOverlay-btn:hover { background: #003300; }
+        #viewDesktopWarning {
+            display: none; margin-top: 1.5rem;
+            flex-direction: column; align-items: center; gap: 1rem;
+        }
+        #viewDesktopWarning.visible { display: flex; }
+        .viewWarning-text {
+            color: #ff4444; font-size: 0.8rem; max-width: 28rem;
+            line-height: 1.5; border: 1px solid #660000;
+            padding: 1rem; border-radius: 4px;
+        }
+        .viewWarning-continue {
+            padding: 0.6rem 2rem; font-size: 0.85rem;
+            background: #330000; color: #ff6666;
+            border: 2px solid #660000; cursor: pointer;
+            font-family: 'Courier New', monospace; letter-spacing: 2px;
+            transition: background 0.2s ease;
+        }
+        .viewWarning-continue:hover { background: #550000; }
+
+        /* Floating switch-view button */
+        #switchViewBtn {
+            position: fixed; bottom: 1rem; right: 1rem;
+            z-index: 250; cursor: pointer;
+            font-size: 1.5rem; color: #00ff00;
+            opacity: 0.2; transition: opacity 0.3s ease;
+            background: none; border: none;
+            font-family: 'Courier New', monospace;
+            display: none;
+        }
+        #switchViewBtn:hover,
+        #switchViewBtn:active { opacity: 0.8; }
+        #switchViewPanel {
+            position: fixed; bottom: 4rem; right: 1rem;
+            z-index: 260;
+            display: none; flex-direction: column; gap: 0.5rem;
+            background: #000; border: 1px solid #003300;
+            padding: 1rem; border-radius: 4px;
+            min-width: 14rem;
+        }
+        #switchViewPanel.visible { display: flex; }
+        #switchViewAction {
+            padding: 0.6rem 1rem; font-size: 0.8rem;
+            background: #001100; color: #00ff00;
+            border: 1px solid #00ff00; cursor: pointer;
+            font-family: 'Courier New', monospace; letter-spacing: 1px;
+            transition: background 0.2s ease;
+        }
+        #switchViewAction:hover { background: #003300; }
+        #showViewChooserBtn {
+            padding: 0.6rem 1rem; font-size: 0.75rem;
+            background: #000; color: #007700;
+            border: 1px solid #003300; cursor: pointer;
+            font-family: 'Courier New', monospace; letter-spacing: 1px;
+            transition: background 0.2s ease;
+        }
+        #showViewChooserBtn:hover { background: #001100; color: #00ff00; }
+        .switchView-note {
+            font-size: 0.65rem; color: #005500;
+            text-align: center;
+        }
+
+        /* Mobile view overrides */
+        html[data-view="mobile"] .scene { font-size: 0.9rem; padding: 0.5rem; }
+        html[data-view="mobile"] .scene4text { max-width: 100%; }
+        html[data-view="mobile"] .s4visual, html[data-view="mobile"] .scene5text { max-width: 100%; }
+        html[data-view="mobile"] .s5visual { max-width: 100%; }
+        html[data-view="mobile"] .s4tl { max-width: 100%; margin-bottom: 0.5rem; padding: 0.3rem 0; }
+        html[data-view="mobile"] .comp-table { font-size: 0.65rem; max-width: 100%; }
+        html[data-view="mobile"] .comp-table th, html[data-view="mobile"] .comp-table td { padding: 0.3rem; }
+        html[data-view="mobile"] .tl-year { font-size: 0.55rem; }
+        html[data-view="mobile"] .tl-year::after { width: 4px; height: 4px; bottom: -0.2rem; }
+        html[data-view="mobile"] .btn-row { gap: 0.3rem; bottom: 2%; }
+        html[data-view="mobile"] .btnNext { padding: 0.5rem 1rem; font-size: 0.75rem; }
+        html[data-view="mobile"] #scene10e .btnNext { padding: 0.5rem 1rem; }
+        html[data-view="mobile"] #scene3Title { font-size: 1.4rem; top: 0.5rem; left: 0.5rem; }
+        html[data-view="mobile"] #scene3 { padding: 2.5rem 0.5rem; }
+        html[data-view="mobile"] #scene3Text { margin-top: 1rem; }
+        html[data-view="mobile"] #scene3ChoiceRow { flex-direction: column; bottom: 15%; gap: 0.5rem; }
+        html[data-view="mobile"] .scene3ChoiceBtn { padding: 0.7rem 1rem; font-size: 0.85rem; }
+        html[data-view="mobile"] .punch-row { flex-direction: column; gap: 0.5rem; }
+        html[data-view="mobile"] .punch-card { padding: 0.6rem; font-size: 0.75rem; }
+        html[data-view="mobile"] .punch-card .punch-icon { font-size: 1.2rem; }
+        html[data-view="mobile"] .scene4sub { padding: 0.5rem 0.5rem 6rem; }
+        html[data-view="mobile"] #scene4a { padding-top: 0; }
+        html[data-view="mobile"] .hub-title { font-size: 1.3rem; }
+        html[data-view="mobile"] .hub-subtitle { font-size: 0.8rem; }
+        html[data-view="mobile"] .hub-btn { padding: 0.5rem 1rem; font-size: 0.8rem; }
+        html[data-view="mobile"] .hub-row { flex-direction: column; gap: 0.8rem; padding: 0.5rem 0.8rem; }
+        html[data-view="mobile"] #sceneRefs h2 { font-size: 1rem; }
+        html[data-view="mobile"] #sceneRefs li { font-size: 0.75rem; }
+        html[data-view="mobile"] #sceneRefs .refs-content { width: 95%; padding: 0.8rem; max-height: 90vh; }
+        html[data-view="mobile"] .callout-box { font-size: 0.8rem; padding: 0.6rem 0.8rem; }
+        html[data-view="mobile"] #foodOverlay .food-box { padding: 1rem; }
+        html[data-view="mobile"] #foodOverlay .food-title { font-size: 1rem; }
+        html[data-view="mobile"] #foodOverlay .food-btn { font-size: 0.85rem; padding: 0.6rem 1rem; }
+        html[data-view="mobile"] #sceneFoodLinks .food-btn { font-size: 0.85rem; padding: 0.6rem 1rem; }
+        html[data-view="mobile"] #sceneFoodLinks .food-links-title { font-size: 1.1rem; }
+        html[data-view="mobile"] canvas { max-height: 200px; }
+        html[data-view="mobile"] #scene2Line1 { font-size: 1rem; padding: 1rem; }
+        html[data-view="mobile"] #scene2Message2 { font-size: 1rem; }
+        html[data-view="mobile"] #textContainer { font-size: 1rem; }
+        html[data-view="mobile"] .coin-grid { max-width: 12rem; gap: 3px; }
+        html[data-view="mobile"] .scene5text { font-size: 0.85rem; }
+        html[data-view="mobile"] .hash-bar { height: 2rem; }
     </style>
 </head>
 <body>
+    <div id="viewOverlay">
+        <div class="viewOverlay-inner">
+            <div class="viewOverlay-title">SIGNAL ELSEWHERE</div>
+            <div class="viewOverlay-sub">CHOOSE YOUR VIEW</div>
+            <div class="viewOverlay-btns">
+                <button class="viewOverlay-btn" id="viewMobileBtn">MOBILE VIEW</button>
+                <button class="viewOverlay-btn" id="viewDesktopBtn">DESKTOP VIEW</button>
+            </div>
+            <div id="viewDesktopWarning">
+                <div class="viewWarning-text">DESKTOP VIEW IS DESIGNED FOR LARGER SCREENS. ROTATE YOUR DEVICE FOR THE BEST EXPERIENCE, OR GO BACK AND SELECT MOBILE VIEW.</div>
+                <button class="viewWarning-continue" id="viewDesktopContinue">CONTINUE ANYWAY</button>
+            </div>
+        </div>
+    </div>
+    <div id="switchViewBtn">⌂</div>
+    <div id="switchViewPanel">
+        <button id="switchViewAction">SWITCH TO MOBILE VIEW</button>
+        <button id="showViewChooserBtn">SHOW VIEW CHOOSER</button>
+        <div class="switchView-note">TAP OUTSIDE TO CLOSE</div>
+    </div>
+
     <canvas id="matrixCanvas"></canvas>
     
     <div id="textContainer">
@@ -1294,6 +1454,28 @@
             <button class="btnNext btnLab" id="returnFrom10d">LAB</button>
         </div>
     </div>
+    <div id="scene10g" class="scene scene4sub">
+        <div class="s4tl"></div>
+        <div class="scene4text" id="s10gText"></div>
+        <div class="s4visual" id="s10gVisual"></div>
+        <div class="btn-row">
+            <button class="btnNext" id="sources10g">SOURCES</button>
+            <button class="btnNext" id="back10g">BACK</button>
+            <button class="btnNext" id="next10g">NEXT</button>
+            <button class="btnNext btnLab" id="returnFrom10g">LAB</button>
+        </div>
+    </div>
+    <div id="scene10h" class="scene scene4sub">
+        <div class="s4tl"></div>
+        <div class="scene4text" id="s10hText"></div>
+        <div class="s4visual" id="s10hVisual"></div>
+        <div class="btn-row">
+            <button class="btnNext" id="sources10h">SOURCES</button>
+            <button class="btnNext" id="back10h">BACK</button>
+            <button class="btnNext" id="next10h">NEXT</button>
+            <button class="btnNext btnLab" id="returnFrom10h">LAB</button>
+        </div>
+    </div>
     <div id="scene10e" class="scene scene4sub">
         <div class="s4tl"></div>
         <div class="scene4text" id="s10eText"></div>
@@ -1404,6 +1586,47 @@
         let skipAnimations = false;
         let scene3TypewriterTimeouts = [];
 
+        // View selector state
+        let viewChosen = false;
+        let introReady = false;
+        let introStarted = false;
+
+        function setView(mode) {
+            if (mode === 'mobile') {
+                document.documentElement.setAttribute('data-view', 'mobile');
+            } else {
+                document.documentElement.removeAttribute('data-view');
+            }
+            sessionStorage.setItem('signalView', mode);
+        }
+
+        function showViewOverlay() {
+            document.getElementById('viewDesktopWarning').classList.remove('visible');
+            document.getElementById('viewOverlay').classList.add('visible');
+        }
+
+        function dismissViewOverlay() {
+            viewChosen = true;
+            document.getElementById('viewOverlay').classList.remove('visible');
+            document.getElementById('switchViewBtn').style.display = 'block';
+            if (introReady && !introStarted) {
+                introStarted = true;
+                document.getElementById('textContainer').style.visibility = 'visible';
+                typewriter();
+            }
+        }
+
+        // Check for saved view preference (per-tab session)
+        (function() {
+            const savedView = sessionStorage.getItem('signalView');
+            if (savedView) {
+                setView(savedView);
+                viewChosen = true;
+            } else {
+                document.getElementById('viewOverlay').classList.add('visible');
+            }
+        })();
+
         // Canvas setup for Matrix rain
         const canvas = document.getElementById('matrixCanvas');
         const ctx = canvas.getContext('2d');
@@ -1416,7 +1639,7 @@
         window.addEventListener('resize', resizeCanvas);
 
         // Matrix rain configuration
-        const fontSize = 14;
+        const fontSize = window.innerWidth < 480 ? 10 : 14;
         let columns = Math.floor(canvas.width / fontSize);
         let drops = [];
         const chars = '0123456789@#$%^&*()';
@@ -1497,8 +1720,13 @@
                 if (opacity <= 0.15) {
                     opacity = 0.15;
                     clearInterval(fadeInterval);
+                    if (viewChosen && !introStarted) {
+                        introStarted = true;
                         document.getElementById('textContainer').style.visibility = 'visible';
                         typewriter();
+                    } else {
+                        introReady = true;
+                    }
                 }
                 canvasElem.style.opacity = opacity;
             }, 16);
@@ -1842,7 +2070,7 @@
         }
 
         function buildHTimeline(tlElem, activeIdx) {
-            const years = ['1910', '1938', '1965', '1973', '2010', '2026'];
+            const years = ['1910', '1938', '1965', '1973', '1982', '1998', '2010', '2026'];
             tlElem.innerHTML = '';
             years.forEach((y, i) => {
                 const span = document.createElement('span');
@@ -2429,6 +2657,104 @@
             },30);
         }
 
+        // Scene 10g — 1982 The Holistic Underground
+        function loadScene10g(sceneElem) {
+            h10c=[];
+            rstSceneBtns('scene10g');
+            sceneElem.style.display='flex';
+            const txt=sceneElem.querySelector('.scene4text');
+            const vis=sceneElem.querySelector('.s4visual');
+            const tl=sceneElem.querySelector('.s4tl');
+            txt.innerHTML='';
+            vis.className='s4visual';
+            let o=0;
+            const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next10g').style.visibility === 'visible') { clearInterval(fi); return; }
+                o+=0.05;if(o>=1){o=1;clearInterval(fi);
+                    buildHTimeline(tl,4);
+                    typeHtmlCalmly(txt,"BEFORE THE AMA AND FDA, HEALING WAS A COMMUNITY PRACTICE — HERBALISTS, MIDWIVES, BONESETTERS.",()=>{
+                        const t1=setTimeout(()=>{
+                            txt.innerHTML+="\n\n";
+                            typeHtmlCalmly(txt,"THE FLEXNER REPORT OF 1910 SYSTEMATICALLY ELIMINATED THESE TRADITIONS. BY 1938, THE FDA CRIMINALIZED TREATMENTS WITHOUT GOVERNMENT APPROVAL.",()=>{
+                                const t2=setTimeout(()=>{
+                                    txt.innerHTML+="\n\n";
+                                    typeHtmlCalmly(txt,"BUT THE KNOWLEDGE NEVER DIED. IN THE 1970s AND 80s, THE COUNTERCULTURE REDISCOVERED ANCIENT HEALING — ACUPUNCTURE, HERBALISM, MEDITATION, BODYWORK.",()=>{
+                                        let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>HOLISTIC</th></tr>';
+                                        html+='<tr><td>ORIGINS</td><td>1910 FLEXNER / 1938 FDA</td><td>ANCIENT / INDIGENOUS</td></tr>';
+                                        html+='<tr><td>APPROACH</td><td>SYMPTOM SUPPRESSION</td><td>ROOT CAUSE + WHOLE BODY</td></tr>';
+                                        html+='<tr><td>EVIDENCE</td><td>RCT (GOLD STANDARD)</td><td>EMPIRICAL + TRADITIONAL</td></tr>';
+                                        html+='<tr><td>ACCESS</td><td>GATEKEPT BY LICENSE</td><td>OPEN TO ALL</td></tr>';
+                                        html+='<tr><td>COST</td><td>$4.1T AND RISING</td><td>FRACTION OF THE COST</td></tr>';
+                                        html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">🌿</span><span class="punch-text">HEALING EXISTED<br>BEFORE THE FDA</span></div><div class="punch-card"><span class="punch-icon">🧘</span><span class="punch-text">THE BODY KNOWS<br>HOW TO HEAL ITSELF</span></div><div class="punch-card"><span class="punch-icon">🔓</span><span class="punch-text">LICENSING ≠<br>EFFECTIVENESS</span></div></div>';
+                                        vis.innerHTML=html;
+                                        vis.classList.add('visible');
+                                        showNextBtn('next10g');showNextBtn('sources10g');showNextBtn('back10g');
+                                    },undefined,undefined,h10c);
+                                },1200);
+                                h10c.push(t2);
+                            },undefined,undefined,h10c);
+                        },1200);
+                        h10c.push(t1);
+                    },undefined,undefined,h10c);
+                }
+                sceneElem.style.opacity=o;
+            },30);
+        }
+
+        // Scene 10h — 1998 Alternative Medicine Goes Mainstream
+        function loadScene10h(sceneElem) {
+            h10c=[];
+            rstSceneBtns('scene10h');
+            sceneElem.style.display='flex';
+            const txt=sceneElem.querySelector('.scene4text');
+            const vis=sceneElem.querySelector('.s4visual');
+            const tl=sceneElem.querySelector('.s4tl');
+            txt.innerHTML='';
+            vis.className='s4visual';
+            let o=0;
+            const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next10h').style.visibility === 'visible') { clearInterval(fi); return; }
+                o+=0.05;if(o>=1){o=1;clearInterval(fi);
+                    buildHTimeline(tl,5);
+                    typeHtmlCalmly(txt,"BY THE 1990s, ALTERNATIVE MEDICINE WAS A $50 BILLION INDUSTRY.",()=>{
+                        const t1=setTimeout(()=>{
+                            txt.innerHTML+="\n\n";
+                            typeHtmlCalmly(txt,"PATIENTS VOTED WITH THEIR WALLETS — AND THEIR HEALTH IMPROVED.",()=>{
+                                const t2=setTimeout(()=>{
+                                    txt.innerHTML+="\n\n";
+                                    typeHtmlCalmly(txt,"FUNCTIONAL MEDICINE, NATUROPATHY, CHIROPRACTIC, AND ACUPUNCTURE GAINED LEGAL RECOGNITION. THE NIH OFFICE OF ALTERNATIVE MEDICINE BECAME THE NCCIH.",()=>{
+                                        const t3=setTimeout(()=>{
+                                            txt.innerHTML+="\n\n";
+                                            typeHtmlCalmly(txt,"THE DSHEA ACT OF 1994 UNLEASHED THE SUPPLEMENT INDUSTRY. BUT WITH MAINSTREAM ACCEPTANCE CAME CO-OPTATION — BIG PHARMA BOUGHT THE SUPPLEMENT COMPANIES. INSURANCE STARTED COVERING 'INTEGRATIVE' CARE.",()=>{
+                                                const t4=setTimeout(()=>{
+                                                    txt.innerHTML+="\n\n";
+                                                    let html='<table class="comp-table"><tr><th></th><th>1990</th><th>2000</th></tr>';
+                                                    html+='<tr><td>MARKET SIZE</td><td>$10B</td><td>$50B</td></tr>';
+                                                    html+='<tr><td>LEGAL STATUS</td><td>MOSTLY UNLICENSED</td><td>30+ STATES LICENSE NATUROPATHS</td></tr>';
+                                                    html+='<tr><td>SUPPLEMENTS</td><td>UNREGULATED</td><td>DSHEA (1994)</td></tr>';
+                                                    html+='<tr><td>NIH RECOGNITION</td><td>OAM (1992)</td><td>NCCIH (1998)</td></tr>';
+                                                    html+='<tr><td>INSURANCE</td><td>NONE</td><td>SOME PLANS COVER IT</td></tr>';
+                                                    html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">💰</span><span class="punch-text">PATIENTS VOTED<br>WITH THEIR WALLETS</span></div><div class="punch-card"><span class="punch-icon">⚖️</span><span class="punch-text">MAINSTREAM<br>= CO-OPTATION</span></div><div class="punch-card"><span class="punch-icon">🧬</span><span class="punch-text">THE FUTURE IS INTEGRATIVE<br>— BUT WHO OWNS IT?</span></div></div>';
+                                                    vis.innerHTML=html;
+                                                    vis.classList.add('visible');
+                                                    showNextBtn('next10h');showNextBtn('sources10h');showNextBtn('back10h');
+                                                },800);
+                                                h10c.push(t4);
+                                            },undefined,undefined,h10c);
+                                        },1200);
+                                        h10c.push(t3);
+                                    },undefined,undefined,h10c);
+                                },1200);
+                                h10c.push(t2);
+                            },undefined,undefined,h10c);
+                        },1200);
+                        h10c.push(t1);
+                    },undefined,undefined,h10c);
+                }
+                sceneElem.style.opacity=o;
+            },30);
+        }
+
         // Scene 10e — 2010+ Decentralized Health
         function loadScene10e(sceneElem) {
             h10c=[];
@@ -2443,7 +2769,7 @@
             const fi=setInterval(()=>{
                 if (sceneElem.style.display !== 'flex' || document.getElementById('next10e').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
-                    buildHTimeline(tl,4);
+                    buildHTimeline(tl,6);
                     typeHtmlCalmly(txt,"TODAY, A NEW KIND OF MEDICINE IS EMERGING — BIOHACKING, FUNCTIONAL MEDICINE, DIRECT-TO-CONSUMER TESTING.",()=>{
                         const t1=setTimeout(()=>{
                             txt.innerHTML+="\n\n";
@@ -2493,20 +2819,15 @@
             const fi=setInterval(()=>{
                 if (sceneElem.style.display !== 'flex' || document.getElementById('next10f').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
-                    buildHTimeline(tl,5);
+                    buildHTimeline(tl,7);
                     typeHtmlCalmly(txt,"IN 2026, THE DECENTRALIZED HEALTH MOVEMENT IS NO LONGER EMERGING — IT IS HERE.",()=>{
                         const t1=setTimeout(()=>{
-                            txt.innerHTML+="\n\n";
-                            typeHtmlCalmly(txt,"GLP-1 DRUGS LIKE OZEMPIC AND MOUNJARO HAVE DEMOCRATIZED WEIGHT LOSS — CREATING A $100B MARKET THAT FORCED THE ENTIRE PHARMA INDUSTRY TO PIVOT.",()=>{
-                                const t2=setTimeout(()=>{
                             txt.innerHTML+="\n\n";
                             typeHtmlCalmly(txt,"DIRECT-TO-CONSUMER LAB TESTING LETS ANYONE ORDER THEIR OWN BLOOD WORK — NO DOCTOR APPROVAL NEEDED.\n\nAI DIAGNOSIS TOOLS RIVAL BOARD-CERTIFIED PHYSICIANS IN ACCURACY.",()=>{
                                 const t3=setTimeout(()=>{
-                                            txt.innerHTML+="\n\n";
                                     let html='<table class="comp-table"><tr><th></th><th>2020</th><th>2026</th></tr>';
                                     html+='<tr><td>TELEMEDICINE</td><td>NICHE</td><td>MAINSTREAM</td></tr>';
                                     html+='<tr><td>AI DIAGNOSIS</td><td>EXPERIMENTAL</td><td>IN CLINICS</td></tr>';
-                                            html+='<tr><td>GLP-1 ACCESS</td><td>DIABETES ONLY</td><td>WIDESPREAD</td></tr>';
                                     html+='<tr><td>BIOHACKING</td><td>UNDERGROUND</td><td>MAINSTREAM</td></tr>';
                                     html+='<tr><td>PATIENT DATA</td><td>OWNED BY SYSTEM</td><td>DIRECT OWNERSHIP EMERGING</td></tr>';
                                     html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">💊</span><span class="punch-text">GLP-1 BROKE<br>THE PHARMA MODEL</span></div><div class="punch-card"><span class="punch-icon">🤖</span><span class="punch-text">AI CAN DIAGNOSE<br>BETTER THAN DOCTORS</span></div><div class="punch-card"><span class="punch-icon">🔬</span><span class="punch-text">YOU CAN ORDER<br>YOUR OWN LABS</span></div></div>';
@@ -2517,9 +2838,6 @@
                                 h10c.push(t3);
                             },undefined,undefined,h10c);
                         },1200);
-                                h10c.push(t2);
-                            },undefined,undefined,h10c);
-                        },1200);
                         h10c.push(t1);
                     },undefined,undefined,h10c);
                 }
@@ -4974,19 +5292,35 @@
         });
         document.getElementById('next10d').addEventListener('click', () => {
             document.getElementById('scene10d').style.display = 'none';
-            loadScene10e(document.getElementById('scene10e'));
+            loadScene10g(document.getElementById('scene10g'));
         });
         document.getElementById('back10d').addEventListener('click', () => {
             document.getElementById('scene10d').style.display = 'none';
             loadScene10c(document.getElementById('scene10c'));
         });
+        document.getElementById('next10g').addEventListener('click', () => {
+            document.getElementById('scene10g').style.display = 'none';
+            loadScene10h(document.getElementById('scene10h'));
+        });
+        document.getElementById('back10g').addEventListener('click', () => {
+            document.getElementById('scene10g').style.display = 'none';
+            loadScene10d(document.getElementById('scene10d'));
+        });
+        document.getElementById('next10h').addEventListener('click', () => {
+            document.getElementById('scene10h').style.display = 'none';
+            loadScene10e(document.getElementById('scene10e'));
+        });
+        document.getElementById('back10h').addEventListener('click', () => {
+            document.getElementById('scene10h').style.display = 'none';
+            loadScene10g(document.getElementById('scene10g'));
+        });
         document.getElementById('next10e').addEventListener('click', () => {
             document.getElementById('scene10e').style.display = 'none';
             loadScene10f(document.getElementById('scene10f'));
         });
         document.getElementById('back10e').addEventListener('click', () => {
             document.getElementById('scene10e').style.display = 'none';
-            loadScene10d(document.getElementById('scene10d'));
+            loadScene10h(document.getElementById('scene10h'));
         });
         document.getElementById('back10f').addEventListener('click', () => {
             document.getElementById('scene10f').style.display = 'none';
@@ -4996,7 +5330,7 @@
             document.getElementById('scene10f').style.display = 'none';
             loadScene11(document.getElementById('scene11'));
         });
-        ['10a','10b','10c','10d','10e','10f'].forEach(function(id){
+        ['10a','10b','10c','10d','10e','10f','10g','10h'].forEach(function(id){
             document.getElementById('returnFrom'+id).addEventListener('click', function(){
                 document.getElementById('scene'+id).style.display = 'none';
                 h10c.forEach(t => clearTimeout(t)); h10c = [];
@@ -5077,7 +5411,7 @@
             window.location.href = 'https://484.kitchen';
         });
 
-        ['4a','4b','4c','4d','4e','4f','5','10a','10b','10c','10d','10e','10f','11','F1','F2','F3','F4','F5','FoodSum','FoodLinks','D1','D2','D3','D4','D5','M1','M2','M3','M4','M5','I1','I2','I3','I4','I5'].forEach(function(id){
+        ['4a','4b','4c','4d','4e','4f','5','10a','10b','10c','10d','10e','10f','10g','10h','11','F1','F2','F3','F4','F5','FoodSum','FoodLinks','D1','D2','D3','D4','D5','M1','M2','M3','M4','M5','I1','I2','I3','I4','I5'].forEach(function(id){
             var el = document.getElementById('sources'+id);
             if (el) el.addEventListener('click',function(){
                 window.refsCaller='scene'+id;
@@ -5117,6 +5451,52 @@
             }, 500);
         }
 
+        // View selector
+        document.getElementById('viewMobileBtn').addEventListener('click', () => {
+            document.getElementById('viewDesktopWarning').classList.remove('visible');
+            setView('mobile');
+            dismissViewOverlay();
+        });
+        document.getElementById('viewDesktopBtn').addEventListener('click', () => {
+            if (window.innerWidth < 480) {
+                document.getElementById('viewDesktopWarning').classList.add('visible');
+                return;
+            }
+            setView('desktop');
+            dismissViewOverlay();
+        });
+        document.getElementById('viewDesktopContinue').addEventListener('click', () => {
+            setView('desktop');
+            dismissViewOverlay();
+        });
+
+        // Switch view floating button
+        document.getElementById('switchViewBtn').addEventListener('click', (e) => {
+            e.stopPropagation();
+            const panel = document.getElementById('switchViewPanel');
+            const btn = document.getElementById('switchViewAction');
+            const isMobile = document.documentElement.getAttribute('data-view') === 'mobile';
+            btn.textContent = isMobile ? 'SWITCH TO DESKTOP VIEW' : 'SWITCH TO MOBILE VIEW';
+            panel.classList.toggle('visible');
+        });
+        document.getElementById('switchViewAction').addEventListener('click', () => {
+            const isMobile = document.documentElement.getAttribute('data-view') === 'mobile';
+            setView(isMobile ? 'desktop' : 'mobile');
+            document.getElementById('switchViewPanel').classList.remove('visible');
+        });
+        document.getElementById('showViewChooserBtn').addEventListener('click', () => {
+            document.getElementById('switchViewPanel').classList.remove('visible');
+            document.getElementById('switchViewBtn').style.display = 'none';
+            viewChosen = false;
+            showViewOverlay();
+        });
+        document.addEventListener('click', (e) => {
+            const panel = document.getElementById('switchViewPanel');
+            if (panel.classList.contains('visible') && !e.target.closest('#switchViewBtn') && !e.target.closest('#switchViewPanel')) {
+                panel.classList.remove('visible');
+            }
+        });
+
         function showTechHub() {
             if (meshAnimId) { cancelAnimationFrame(meshAnimId); meshAnimId = null; }
             if (phoneAnimId) { cancelAnimationFrame(phoneAnimId); phoneAnimId = null; }
@@ -5391,7 +5771,7 @@
                 const refsDiv = document.getElementById('sceneRefs');
                 if (refsDiv.classList.contains('visible')) {
                     refsDiv.classList.remove('visible');
-                    var c=refsCaller;if(c==='scene7b'||c==='scene8b'||c==='scene4a'||c==='scene4b'||c==='scene4c'||c==='scene4d'||c==='scene4e'||c==='scene4f'||c==='scene5'||c==='scene10a'||c==='scene10b'||c==='scene10c'||c==='scene10d'||c==='scene10e'||c==='scene10f'||c==='scene11'||c==='sceneF1'||c==='sceneF2'||c==='sceneF3'||c==='sceneF4'||c==='sceneF6'||c==='sceneFoodSum'||c==='sceneFoodLinks'||c==='sceneD1'||c==='sceneD2'||c==='sceneD3'||c==='sceneD4'||c==='sceneD5'||c==='sceneM1'||c==='sceneM2'||c==='sceneM3'||c==='sceneM4'||c==='sceneM5'||c==='sceneI1'||c==='sceneI2'||c==='sceneI3'||c==='sceneI4'||c==='sceneI5')document.getElementById(c).style.display='flex';
+                    var c=refsCaller;if(c==='scene7b'||c==='scene8b'||c==='scene4a'||c==='scene4b'||c==='scene4c'||c==='scene4d'||c==='scene4e'||c==='scene4f'||c==='scene5'||c==='scene10a'||c==='scene10b'||c==='scene10c'||c==='scene10d'||c==='scene10e'||c==='scene10f'||c==='scene10g'||c==='scene10h'||c==='scene11'||c==='sceneF1'||c==='sceneF2'||c==='sceneF3'||c==='sceneF4'||c==='sceneF6'||c==='sceneFoodSum'||c==='sceneFoodLinks'||c==='sceneD1'||c==='sceneD2'||c==='sceneD3'||c==='sceneD4'||c==='sceneD5'||c==='sceneM1'||c==='sceneM2'||c==='sceneM3'||c==='sceneM4'||c==='sceneM5'||c==='sceneI1'||c==='sceneI2'||c==='sceneI3'||c==='sceneI4'||c==='sceneI5')document.getElementById(c).style.display='flex';
                     refsCaller = null;
                     return;
                 }
@@ -6032,6 +6412,58 @@
                     showNextBtn('back10d');
                 }
 
+                // Scene 10g skip
+                const s10g = document.getElementById('scene10g');
+                if (s10g.style.display === 'flex') {
+                    h10c.forEach(t => clearTimeout(t)); h10c = [];
+                    const txt = s10g.querySelector('.scene4text');
+                    const vis = s10g.querySelector('.s4visual');
+                    const tl = s10g.querySelector('.s4tl');
+                    buildHTimeline(tl, 4);
+                    txt.innerHTML = "BEFORE THE AMA AND FDA, HEALING WAS A COMMUNITY PRACTICE — HERBALISTS, MIDWIVES, BONESETTERS.\n\nTHE FLEXNER REPORT OF 1910 SYSTEMATICALLY ELIMINATED THESE TRADITIONS. BY 1938, THE FDA CRIMINALIZED TREATMENTS WITHOUT GOVERNMENT APPROVAL.\n\nBUT THE KNOWLEDGE NEVER DIED. IN THE 1970s AND 80s, THE COUNTERCULTURE REDISCOVERED ANCIENT HEALING — ACUPUNCTURE, HERBALISM, MEDITATION, BODYWORK.\n\n";
+                    let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>HOLISTIC</th></tr>';
+                    html+='<tr><td>ORIGINS</td><td>1910 FLEXNER / 1938 FDA</td><td>ANCIENT / INDIGENOUS</td></tr>';
+                    html+='<tr><td>APPROACH</td><td>SYMPTOM SUPPRESSION</td><td>ROOT CAUSE + WHOLE BODY</td></tr>';
+                    html+='<tr><td>EVIDENCE</td><td>RCT (GOLD STANDARD)</td><td>EMPIRICAL + TRADITIONAL</td></tr>';
+                    html+='<tr><td>ACCESS</td><td>GATEKEPT BY LICENSE</td><td>OPEN TO ALL</td></tr>';
+                    html+='<tr><td>COST</td><td>$4.1T AND RISING</td><td>FRACTION OF THE COST</td></tr>';
+                    html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">\uD83C\uDF3F</span><span class="punch-text">HEALING EXISTED<br>BEFORE THE FDA</span></div><div class="punch-card"><span class="punch-icon">\uD83E\uDDD8</span><span class="punch-text">THE BODY KNOWS<br>HOW TO HEAL ITSELF</span></div><div class="punch-card"><span class="punch-icon">\uD83D\uDD13</span><span class="punch-text">LICENSING \u2260<br>EFFECTIVENESS</span></div></div>';
+                    vis.innerHTML=html;
+                    vis.classList.add('visible');
+                    document.getElementById('next10g').style.cssText = '';
+                    showNextBtn('next10g');
+                    document.getElementById('sources10g').style.cssText = '';
+                    showNextBtn('sources10g');
+                    document.getElementById('back10g').style.cssText = '';
+                    showNextBtn('back10g');
+                }
+
+                // Scene 10h skip
+                const s10h = document.getElementById('scene10h');
+                if (s10h.style.display === 'flex') {
+                    h10c.forEach(t => clearTimeout(t)); h10c = [];
+                    const txt = s10h.querySelector('.scene4text');
+                    const vis = s10h.querySelector('.s4visual');
+                    const tl = s10h.querySelector('.s4tl');
+                    buildHTimeline(tl, 5);
+                    txt.innerHTML = "BY THE 1990s, ALTERNATIVE MEDICINE WAS A $50 BILLION INDUSTRY.\n\nPATIENTS VOTED WITH THEIR WALLETS — AND THEIR HEALTH IMPROVED.\n\nFUNCTIONAL MEDICINE, NATUROPATHY, CHIROPRACTIC, AND ACUPUNCTURE GAINED LEGAL RECOGNITION. THE NIH OFFICE OF ALTERNATIVE MEDICINE BECAME THE NCCIH.\n\nTHE DSHEA ACT OF 1994 UNLEASHED THE SUPPLEMENT INDUSTRY. BUT WITH MAINSTREAM ACCEPTANCE CAME CO-OPTATION — BIG PHARMA BOUGHT THE SUPPLEMENT COMPANIES. INSURANCE STARTED COVERING 'INTEGRATIVE' CARE.\n\n";
+                    let html='<table class="comp-table"><tr><th></th><th>1990</th><th>2000</th></tr>';
+                    html+='<tr><td>MARKET SIZE</td><td>$10B</td><td>$50B</td></tr>';
+                    html+='<tr><td>LEGAL STATUS</td><td>MOSTLY UNLICENSED</td><td>30+ STATES LICENSE NATUROPATHS</td></tr>';
+                    html+='<tr><td>SUPPLEMENTS</td><td>UNREGULATED</td><td>DSHEA (1994)</td></tr>';
+                    html+='<tr><td>NIH RECOGNITION</td><td>OAM (1992)</td><td>NCCIH (1998)</td></tr>';
+                    html+='<tr><td>INSURANCE</td><td>NONE</td><td>SOME PLANS COVER IT</td></tr>';
+                    html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">\uD83D\uDCB0</span><span class="punch-text">PATIENTS VOTED<br>WITH THEIR WALLETS</span></div><div class="punch-card"><span class="punch-icon">\u2696\uFE0F</span><span class="punch-text">MAINSTREAM<br>= CO-OPTATION</span></div><div class="punch-card"><span class="punch-icon">\uD83E\uDDEC</span><span class="punch-text">THE FUTURE IS INTEGRATIVE<br>\u2014 BUT WHO OWNS IT?</span></div></div>';
+                    vis.innerHTML=html;
+                    vis.classList.add('visible');
+                    document.getElementById('next10h').style.cssText = '';
+                    showNextBtn('next10h');
+                    document.getElementById('sources10h').style.cssText = '';
+                    showNextBtn('sources10h');
+                    document.getElementById('back10h').style.cssText = '';
+                    showNextBtn('back10h');
+                }
+
                 // Scene 10e skip
                 const s10e = document.getElementById('scene10e');
                 if (s10e.style.display === 'flex') {
@@ -6039,7 +6471,7 @@
                     const txt = s10e.querySelector('.scene4text');
                     const vis = s10e.querySelector('.s4visual');
                     const tl = s10e.querySelector('.s4tl');
-                    buildHTimeline(tl, 4);
+                    buildHTimeline(tl, 6);
                     txt.innerHTML = "TODAY, A NEW KIND OF MEDICINE IS EMERGING — BIOHACKING, FUNCTIONAL MEDICINE, DIRECT-TO-CONSUMER TESTING.\n\nPROJECTS LIKE <a href=\"https://syntropy.institute/\" target=\"_blank\" style=\"text-decoration:underline;font-weight:bold;color:#00ff00\">SYNTPROPY.INSTITUTE</a> ARE BUILDING THE INFRASTRUCTURE FOR MEDICINE YOU CONTROL.\n\n";
                     let html='<table class="comp-table"><tr><th></th><th>TRADITIONAL</th><th>DECENTRALIZED</th></tr>';
                     html+='<tr><td>WHO DECIDES?</td><td>GOVERNMENT / INSURANCE</td><td>YOU + YOUR DOCTOR</td></tr>';
@@ -6066,11 +6498,10 @@
                     const vis = s10f.querySelector('.s4visual');
                     const tl = s10f.querySelector('.s4tl');
                     buildHTimeline(tl, 5);
-                    txt.innerHTML = "IN 2026, THE DECENTRALIZED HEALTH MOVEMENT IS NO LONGER EMERGING — IT IS HERE.\n\nGLP-1 DRUGS LIKE OZEMPIC AND MOUNJARO HAVE DEMOCRATIZED WEIGHT LOSS — CREATING A $100B MARKET THAT FORCED THE ENTIRE PHARMA INDUSTRY TO PIVOT.\n\nDIRECT-TO-CONSUMER LAB TESTING LETS ANYONE ORDER THEIR OWN BLOOD WORK — NO DOCTOR APPROVAL NEEDED.\n\nAI DIAGNOSIS TOOLS RIVAL BOARD-CERTIFIED PHYSICIANS IN ACCURACY.\n\n";
+                    txt.innerHTML = "IN 2026, THE DECENTRALIZED HEALTH MOVEMENT IS NO LONGER EMERGING — IT IS HERE.\n\nDIRECT-TO-CONSUMER LAB TESTING LETS ANYONE ORDER THEIR OWN BLOOD WORK — NO DOCTOR APPROVAL NEEDED.\n\nAI DIAGNOSIS TOOLS RIVAL BOARD-CERTIFIED PHYSICIANS IN ACCURACY.";
                     let html='<table class="comp-table"><tr><th></th><th>2020</th><th>2026</th></tr>';
                     html+='<tr><td>TELEMEDICINE</td><td>NICHE</td><td>MAINSTREAM</td></tr>';
                     html+='<tr><td>AI DIAGNOSIS</td><td>EXPERIMENTAL</td><td>IN CLINICS</td></tr>';
-                    html+='<tr><td>GLP-1 ACCESS</td><td>DIABETES ONLY</td><td>WIDESPREAD</td></tr>';
                     html+='<tr><td>BIOHACKING</td><td>UNDERGROUND</td><td>MAINSTREAM</td></tr>';
                     html+='<tr><td>PATIENT DATA</td><td>OWNED BY SYSTEM</td><td>DIRECT OWNERSHIP EMERGING</td></tr>';
                     html+='</table><div class="punch-row"><div class="punch-card"><span class="punch-icon">\uD83D\uDC8A</span><span class="punch-text">GLP-1 BROKE<br>THE PHARMA MODEL</span></div><div class="punch-card"><span class="punch-icon">\uD83E\uDD16</span><span class="punch-text">AI CAN DIAGNOSE<br>BETTER THAN DOCTORS</span></div><div class="punch-card"><span class="punch-icon">\uD83D\uDD2C</span><span class="punch-text">YOU CAN ORDER<br>YOUR OWN LABS</span></div></div>';
@@ -6276,7 +6707,7 @@
                 <li><a href="https://www.oyez.org/cases/2012/11-796" target="_blank">Bowman v. Monsanto Co. (2013) — Oyez.</a> — Supreme Court ruled that patent exhaustion does not permit farmers to replant patented GM seeds; seed patenting and corporate control of agriculture.</li>
                 <li><a href="https://484.kitchen" target="_blank">484.Kitchen.</a> — Regenerative agriculture, syntropic farming, and decentralized food infrastructure — building the alternative to the industrial food system.</li>
             </ol>
-            <div class="refs-back"><button id="refsBackBtn" onclick="document.getElementById('sceneRefs').classList.remove('visible');var c=window.refsCaller;if(c==='scene7b'||c==='scene8b'||c==='scene4a'||c==='scene4b'||c==='scene4c'||c==='scene4d'||c==='scene4e'||c==='scene4f'||c==='scene5'||c==='scene10a'||c==='scene10b'||c==='scene10c'||c==='scene10d'||c==='scene10e'||c==='scene10f'||c==='scene11'||c==='sceneF1'||c==='sceneF2'||c==='sceneF3'||c==='sceneF4'||c==='sceneF6'||c==='sceneFoodSum'||c==='sceneFoodLinks'||c==='sceneD1'||c==='sceneD2'||c==='sceneD3'||c==='sceneD4'||c==='sceneD5'||c==='sceneM1'||c==='sceneM2'||c==='sceneM3'||c==='sceneM4'||c==='sceneM5'||c==='sceneI1'||c==='sceneI2'||c==='sceneI3'||c==='sceneI4'||c==='sceneI5')document.getElementById(c).style.display='flex';window.refsCaller=null;">BACK</button></div>
+            <div class="refs-back"><button id="refsBackBtn" onclick="document.getElementById('sceneRefs').classList.remove('visible');var c=window.refsCaller;if(c==='scene7b'||c==='scene8b'||c==='scene4a'||c==='scene4b'||c==='scene4c'||c==='scene4d'||c==='scene4e'||c==='scene4f'||c==='scene5'||c==='scene10a'||c==='scene10b'||c==='scene10c'||c==='scene10d'||c==='scene10e'||c==='scene10f'||c==='scene10g'||c==='scene10h'||c==='scene11'||c==='sceneF1'||c==='sceneF2'||c==='sceneF3'||c==='sceneF4'||c==='sceneF6'||c==='sceneFoodSum'||c==='sceneFoodLinks'||c==='sceneD1'||c==='sceneD2'||c==='sceneD3'||c==='sceneD4'||c==='sceneD5'||c==='sceneM1'||c==='sceneM2'||c==='sceneM3'||c==='sceneM4'||c==='sceneM5'||c==='sceneI1'||c==='sceneI2'||c==='sceneI3'||c==='sceneI4'||c==='sceneI5')document.getElementById(c).style.display='flex';window.refsCaller=null;">BACK</button></div>
         </div>
     </div>