{"id":6461,"date":"2026-09-28T15:19:24","date_gmt":"2026-09-28T15:19:24","guid":{"rendered":"https:\/\/micronutritionandhealth.com\/?page_id=6461"},"modified":"2026-09-28T16:12:49","modified_gmt":"2026-09-28T16:12:49","slug":"microbiome-quiz","status":"publish","type":"page","link":"https:\/\/micronutritionandhealth.com\/es\/microbiome-quiz\/","title":{"rendered":"Microbiome Quiz"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n\r\n \r\n\r\n Navigate the Microbiome | Cargill MHS<\/title>\r\n\r\n <style>\r\n :root {\r\n --mhs-green: #03441F;\r\n --mhs-green-dark: #023417;\r\n --white: #FFFFFF;\r\n\r\n --g1: #EDEDED;\r\n --g2: #DADADA;\r\n --g3: #B2B2B2;\r\n --g4: #878787;\r\n --g5: #575757;\r\n\r\n --ink: #171717;\r\n --body: #353535;\r\n --soft-green: #DDEBE2;\r\n\r\n \/* MHS \/ portfolio accent colours *\/\r\n --diamond-red: #BA0C0C;\r\n --biostrong-yellow: #FFBC27;\r\n --cinergy-pink: #F05B78;\r\n --syrena-blue: #57D1FF;\r\n --trupet-purple: #7166FF;\r\n --truequine-green: #007681;\r\n --notox-orange: #FF7C48;\r\n\r\n --shadow: 0 20px 60px rgba(3, 68, 31, 0.12);\r\n\r\n --radius-xl: 32px;\r\n --radius-lg: 22px;\r\n\r\n --max-width: 1180px;\r\n\r\n --ease: cubic-bezier(.2, .8, .2, 1);\r\n\r\n --font-body:\r\n \"Helvetica Now For Cargill\",\r\n Arial,\r\n Helvetica,\r\n sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n min-height: 100vh;\r\n\r\n color: var(--ink);\r\n\r\n background:\r\n radial-gradient(\r\n circle at 20% 0%,\r\n rgba(255,255,255,.96),\r\n transparent 34%\r\n ),\r\n radial-gradient(\r\n circle at 100% 85%,\r\n rgba(205,230,214,.55),\r\n transparent 38%\r\n ),\r\n var(--g1);\r\n\r\n font-family: var(--font-body);\r\n line-height: 1.45;\r\n }\r\n\r\n button,\r\n a {\r\n font-family: inherit;\r\n -webkit-tap-highlight-color: transparent;\r\n touch-action: manipulation;\r\n }\r\n\r\n button {\r\n font-size: inherit;\r\n }\r\n\r\n .sr-only {\r\n position: absolute !important;\r\n width: 1px !important;\r\n height: 1px !important;\r\n padding: 0 !important;\r\n margin: -1px !important;\r\n overflow: hidden !important;\r\n clip: rect(0, 0, 0, 0) !important;\r\n white-space: nowrap !important;\r\n border: 0 !important;\r\n }\r\n\r\n :focus-visible {\r\n outline: 3px solid rgba(3, 68, 31, .34);\r\n outline-offset: 4px;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n *,\r\n *::before,\r\n *::after {\r\n animation-duration: .01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: .01ms !important;\r\n scroll-behavior: auto !important;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n APP\r\n ============================================================ *\/\r\n\r\n .app {\r\n min-height: 100vh;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* ============================================================\r\n HEADER\r\n ============================================================ *\/\r\n\r\n .header {\r\n position: relative;\r\n z-index: 50;\r\n padding: 16px 18px 0;\r\n }\r\n\r\n \r\n\r\n .restart-button {\r\n appearance: none;\r\n\r\n border:\r\n 1px solid rgba(3, 68, 31, .18);\r\n\r\n background:\r\n rgba(255,255,255,.82);\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n border-radius: 999px;\r\n\r\n min-height: 42px;\r\n\r\n padding: 9px 15px;\r\n\r\n font-weight: 700;\r\n font-size: 13px;\r\n\r\n cursor: pointer;\r\n\r\n transition:\r\n transform 240ms var(--ease),\r\n background 240ms var(--ease),\r\n border-color 240ms var(--ease);\r\n }\r\n\r\n .restart-button:hover {\r\n transform: translateY(-1px);\r\n\r\n background: var(--mhs-green);\r\n\t\t\r\n\r\n border-color:\r\n rgba(3,68,31,.34);\r\n }\r\n\t \r\n\t.game-footer {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: flex-end;\r\n\t\tmargin-top: 50px;\r\n\t\t}\r\n \/* ============================================================\r\n MAIN\r\n ============================================================ *\/\r\n\r\n main {\r\n width:\r\n min(\r\n var(--max-width),\r\n calc(100% - 28px)\r\n );\r\n\r\n margin: 0 auto;\r\n\r\n padding: 12px 0 48px;\r\n }\r\n\r\n .screen {\r\n display: none;\r\n\r\n animation:\r\n screen-in\r\n 420ms ease both;\r\n }\r\n\r\n .screen.active {\r\n display: block;\r\n }\r\n\r\n @keyframes screen-in {\r\n from {\r\n opacity: 0;\r\n transform:\r\n translateY(10px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform:\r\n translateY(0);\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n INTRO\r\n ============================================================ *\/\r\n\r\n .intro {\r\n min-height:\r\n calc(100vh - 100px);\r\n\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(0, 1.05fr)\r\n minmax(360px, .95fr);\r\n\r\n gap: 28px;\r\n\r\n align-items: center;\r\n }\r\n\r\n .intro-copy {\r\n position: relative;\r\n\r\n overflow: hidden;\r\n\r\n border-radius:\r\n var(--radius-xl);\r\n\r\n padding:\r\n clamp(28px, 5vw, 62px);\r\n\r\n background:\r\n rgba(255,255,255,.84);\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.10);\r\n\r\n box-shadow:\r\n var(--shadow);\r\n }\r\n\r\n .intro-copy::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n width: 300px;\r\n height: 300px;\r\n\r\n right: -170px;\r\n top: -160px;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.12);\r\n\r\n box-shadow:\r\n 0 0 0 25px rgba(3,68,31,.02),\r\n 0 0 0 52px rgba(3,68,31,.015),\r\n 0 0 0 84px rgba(3,68,31,.01);\r\n }\r\n\r\n .eyebrow {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n gap: 9px;\r\n\r\n margin-bottom: 18px;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size: 12px;\r\n\r\n font-weight: 700;\r\n\r\n letter-spacing: .08em;\r\n\r\n text-transform: uppercase;\r\n }\r\n\r\n .eyebrow-dot {\r\n width: 8px;\r\n height: 8px;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n var(--mhs-green);\r\n\r\n box-shadow:\r\n 0 0 0 6px\r\n rgba(3,68,31,.08);\r\n }\r\n\r\n h1,\r\n h2,\r\n .score-value,\r\n .final-score {\r\n margin: 0;\r\n\r\n font-family:\r\n var(--font-body);\r\n\r\n letter-spacing:\r\n -.05em;\r\n }\r\n\r\n h1 {\r\n max-width: 800px;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size:\r\n clamp(44px, 7vw, 84px);\r\n\r\n font-weight: 700;\r\n\r\n line-height: .94;\r\n }\r\n\r\n .intro-support {\r\n max-width: 700px;\r\n\r\n margin:\r\n 24px 0 28px;\r\n\r\n color:\r\n var(--body);\r\n\r\n font-size:\r\n clamp(17px, 2vw, 22px);\r\n\r\n line-height:\r\n 1.35;\r\n }\r\n\r\n .campaign-tension {\r\n display: flex;\r\n\r\n align-items: center;\r\n\r\n flex-wrap: wrap;\r\n\r\n gap: 9px;\r\n\r\n margin-bottom: 30px;\r\n }\r\n\r\n .campaign-tension span {\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n min-height: 38px;\r\n\r\n padding:\r\n 8px 13px;\r\n\r\n border-radius: 999px;\r\n\r\n background:\r\n var(--g1);\r\n\r\n color:\r\n var(--g5);\r\n\r\n font-size: 14px;\r\n\r\n font-weight: 700;\r\n }\r\n\r\n .campaign-tension .arrow {\r\n background:\r\n transparent;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n padding-left: 2px;\r\n padding-right: 2px;\r\n }\r\n\r\n .campaign-tension .to {\r\n background:\r\n var(--mhs-green);\r\n\r\n color:\r\n #fff;\r\n }\r\n\r\n .primary-button {\r\n appearance: none;\r\n\r\n display: inline-flex;\r\n\r\n align-items: center;\r\n\r\n justify-content: center;\r\n\r\n border: 0;\r\n\r\n min-height: 54px;\r\n\r\n padding:\r\n 15px 23px;\r\n\r\n border-radius: 999px;\r\n\r\n background:\r\n var(--mhs-green);\r\n\r\n color:\r\n #fff;\r\n\r\n font-weight: 700;\r\n\r\n text-decoration: none;\r\n\r\n cursor: pointer;\r\n\r\n box-shadow:\r\n 0 12px 28px\r\n rgba(3,68,31,.18);\r\n\r\n transition:\r\n transform 240ms var(--ease),\r\n background 240ms var(--ease),\r\n box-shadow 240ms var(--ease);\r\n }\r\n\r\n .primary-button:hover {\r\n transform:\r\n translateY(-2px);\r\n\r\n background:\r\n var(--mhs-green-dark);\r\n\r\n box-shadow:\r\n 0 16px 36px\r\n rgba(3,68,31,.22);\r\n }\r\n\r\n .primary-button:active {\r\n transform:\r\n translateY(0);\r\n }\r\n\r\n \/* ============================================================\r\n INTRO VISUAL\r\n ============================================================ *\/\r\n\r\n .intro-visual {\r\n min-height: 420px;\r\n\r\n position: relative;\r\n\r\n overflow: hidden;\r\n\r\n border-radius:\r\n var(--radius-xl);\r\n\r\n background:\r\n radial-gradient(\r\n circle at 30% 30%,\r\n rgba(255,255,255,.96),\r\n transparent 28%\r\n ),\r\n linear-gradient(\r\n 145deg,\r\n #f7f9f8,\r\n #dfe9e2\r\n );\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.10);\r\n\r\n box-shadow:\r\n var(--shadow);\r\n }\r\n\r\n .intro-visual-grid {\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n opacity: .38;\r\n\r\n background-image:\r\n linear-gradient(\r\n rgba(3,68,31,.035) 1px,\r\n transparent 1px\r\n ),\r\n linear-gradient(\r\n 90deg,\r\n rgba(3,68,31,.035) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size: 30px 30px;\r\n\r\n mask-image:\r\n radial-gradient(\r\n circle at center,\r\n black 35%,\r\n transparent 90%\r\n );\r\n }\r\n\r\n .intro-arc {\r\n position: absolute;\r\n\r\n width: 350px;\r\n height: 350px;\r\n\r\n left: 50%;\r\n top: 50%;\r\n\r\n transform:\r\n translate(-50%, -50%)\r\n rotate(-15deg);\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 2px solid rgba(3,68,31,.18);\r\n\r\n box-shadow:\r\n 0 0 0 34px rgba(3,68,31,.025),\r\n 0 0 0 72px rgba(3,68,31,.02);\r\n }\r\n\r\n .intro-arc::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 34px;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 1px dashed rgba(3,68,31,.20);\r\n\r\n animation:\r\n slow-spin\r\n 14s linear infinite;\r\n }\r\n\r\n @keyframes slow-spin {\r\n to {\r\n transform:\r\n rotate(360deg);\r\n }\r\n }\r\n\r\n .intro-node {\r\n position: absolute;\r\n\r\n display: block;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n rgba(255,255,255,.58);\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.20);\r\n\r\n box-shadow:\r\n inset 0 0 0 7px\r\n rgba(3,68,31,.025);\r\n\r\n animation:\r\n gentle-float\r\n 5s ease-in-out infinite;\r\n }\r\n\r\n .intro-node::before,\r\n .intro-node::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.12);\r\n }\r\n\r\n .intro-node::before {\r\n inset: 15%;\r\n }\r\n\r\n .intro-node::after {\r\n inset: 36%;\r\n\r\n background:\r\n rgba(3,68,31,.06);\r\n }\r\n\r\n .intro-node.one {\r\n width: 92px;\r\n height: 92px;\r\n\r\n left: 10%;\r\n top: 17%;\r\n }\r\n\r\n .intro-node.two {\r\n width: 62px;\r\n height: 62px;\r\n\r\n right: 16%;\r\n top: 12%;\r\n\r\n animation-delay:\r\n -1.2s;\r\n }\r\n\r\n .intro-node.three {\r\n width: 118px;\r\n height: 118px;\r\n\r\n right: 10%;\r\n bottom: 12%;\r\n\r\n animation-delay:\r\n -2.4s;\r\n }\r\n\r\n .intro-node.four {\r\n width: 58px;\r\n height: 58px;\r\n\r\n left: 24%;\r\n bottom: 13%;\r\n\r\n animation-delay:\r\n -3.1s;\r\n }\r\n\r\n @keyframes gentle-float {\r\n\r\n 0%,\r\n 100% {\r\n transform:\r\n translate3d(0,0,0);\r\n }\r\n\r\n 50% {\r\n transform:\r\n translate3d(5px,-8px,0);\r\n }\r\n\r\n }\r\n\r\n .intro-core {\r\n position: absolute;\r\n\r\n left: 50%;\r\n top: 50%;\r\n\r\n width: 108px;\r\n height: 108px;\r\n\r\n transform:\r\n translate(-50%, -50%);\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 33% 28%,\r\n #fff 0 9%,\r\n transparent 10%\r\n ),\r\n radial-gradient(\r\n circle at 42% 40%,\r\n #74D69A 0 27%,\r\n var(--mhs-green) 69%\r\n );\r\n\r\n box-shadow:\r\n 0 0 0 17px\r\n rgba(3,68,31,.07),\r\n\r\n 0 0 0 40px\r\n rgba(3,68,31,.035),\r\n\r\n 0 18px 40px\r\n rgba(3,68,31,.20);\r\n }\r\n\r\n \/* ============================================================\r\n GAME\r\n ============================================================ *\/\r\n\r\n .game-shell {\r\n display: grid;\r\n\r\n gap: 16px;\r\n }\r\n\r\n .game-header {\r\n display: grid;\r\n\r\n grid-template-columns:\r\n minmax(0,1fr)\r\n auto;\r\n\r\n gap: 16px;\r\n\r\n align-items:\r\n stretch;\r\n }\r\n\r\n .journey-card,\r\n .score-card {\r\n background:\r\n rgba(255,255,255,.88);\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.10);\r\n\r\n border-radius:\r\n var(--radius-lg);\r\n\r\n box-shadow:\r\n 0 12px 36px\r\n rgba(3,68,31,.07);\r\n }\r\n\r\n .journey-card {\r\n padding:\r\n 17px 19px;\r\n }\r\n\r\n .journey-heading {\r\n display: flex;\r\n\r\n justify-content:\r\n space-between;\r\n\r\n align-items:\r\n center;\r\n\r\n gap: 12px;\r\n\r\n margin-bottom:\r\n 12px;\r\n }\r\n\r\n .journey-label {\r\n color:\r\n var(--g5);\r\n\r\n font-size: 13px;\r\n\r\n font-weight: 700;\r\n }\r\n\r\n .question-count {\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size: 14px;\r\n\r\n font-weight: 700;\r\n }\r\n\r\n \/* ============================================================\r\n HORIZONTAL CAMPAIGN PROGRESS\r\n ============================================================ *\/\r\n\r\n .campaign-progress {\r\n position: relative;\r\n\r\n height: 38px;\r\n\r\n display: flex;\r\n\r\n align-items:\r\n center;\r\n\r\n justify-content:\r\n space-between;\r\n\r\n padding: 0 7px;\r\n }\r\n\r\n .campaign-progress-base,\r\n .campaign-progress-active {\r\n position: absolute;\r\n\r\n left: 10px;\r\n\r\n top: 50%;\r\n\r\n height: 4px;\r\n\r\n transform:\r\n translateY(-50%);\r\n\r\n border-radius: 999px;\r\n }\r\n\r\n .campaign-progress-base {\r\n right: 10px;\r\n\r\n background:\r\n var(--g2);\r\n }\r\n\r\n .campaign-progress-active {\r\n width: 0%;\r\n\r\n max-width:\r\n calc(100% - 20px);\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n var(--diamond-red) 0%,\r\n var(--biostrong-yellow) 18%,\r\n var(--cinergy-pink) 38%,\r\n var(--syrena-blue) 55%,\r\n var(--trupet-purple) 72%,\r\n var(--truequine-green) 86%,\r\n var(--notox-orange) 100%\r\n );\r\n\r\n transition:\r\n width 700ms var(--ease);\r\n }\r\n\r\n .progress-stage {\r\n position: relative;\r\n\r\n z-index: 2;\r\n\r\n display: grid;\r\n\r\n place-items:\r\n center;\r\n\r\n width: 27px;\r\n height: 27px;\r\n\r\n flex: 0 0 auto;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n #fff;\r\n\r\n border:\r\n 2px solid var(--g3);\r\n\r\n color:\r\n var(--g4);\r\n\r\n font-size: 11px;\r\n\r\n font-weight: 700;\r\n\r\n transition:\r\n background 400ms var(--ease),\r\n border-color 400ms var(--ease),\r\n transform 400ms var(--ease),\r\n color 400ms var(--ease);\r\n }\r\n\r\n .progress-stage.active {\r\n border-color:\r\n var(--mhs-green);\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n transform:\r\n scale(1.12);\r\n\r\n box-shadow:\r\n 0 0 0 7px\r\n rgba(3,68,31,.07);\r\n }\r\n\r\n .progress-stage.visited {\r\n border-color:\r\n var(--mhs-green);\r\n\r\n background:\r\n var(--mhs-green);\r\n\r\n color:\r\n #fff;\r\n }\r\n\r\n \/* ============================================================\r\n SCORE\r\n ============================================================ *\/\r\n\r\n .score-card {\r\n min-width:\r\n 175px;\r\n\r\n display: flex;\r\n\r\n align-items:\r\n center;\r\n\r\n gap: 12px;\r\n\r\n padding:\r\n 13px 18px;\r\n }\r\n\r\n .score-ring {\r\n position: relative;\r\n\r\n width: 48px;\r\n height: 48px;\r\n\r\n flex: 0 0 auto;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n conic-gradient(\r\n var(--mhs-green) 0deg,\r\n var(--mhs-green)\r\n var(--score-angle, 0deg),\r\n var(--g2)\r\n var(--score-angle, 0deg),\r\n var(--g2) 360deg\r\n );\r\n\r\n transition:\r\n background 500ms var(--ease),\r\n transform 300ms var(--ease);\r\n }\r\n\r\n .score-ring::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 6px;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n #fff;\r\n }\r\n\r\n .score-ring span {\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n z-index: 2;\r\n\r\n display: grid;\r\n\r\n place-items:\r\n center;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size: 11px;\r\n\r\n font-weight: 700;\r\n }\r\n\r\n .score-copy {\r\n min-width: 0;\r\n }\r\n\r\n .score-label {\r\n color:\r\n var(--g5);\r\n\r\n font-size: 11px;\r\n\r\n font-weight: 700;\r\n\r\n letter-spacing:\r\n .07em;\r\n\r\n text-transform:\r\n uppercase;\r\n }\r\n\r\n .score-value {\r\n margin-top:\r\n 2px;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size:\r\n 29px;\r\n\r\n font-weight:\r\n 700;\r\n\r\n line-height:\r\n 1;\r\n }\r\n\r\n .score-flash\r\n .score-ring {\r\n animation:\r\n score-pop\r\n 500ms\r\n var(--ease);\r\n }\r\n\r\n @keyframes score-pop {\r\n\r\n 0%,\r\n 100% {\r\n transform:\r\n scale(1);\r\n }\r\n\r\n 45% {\r\n transform:\r\n scale(1.13);\r\n }\r\n\r\n }\r\n\r\n \/* ============================================================\r\n MICROBIOME WORLD\r\n ============================================================ *\/\r\n\r\n .world-card {\r\n position: relative;\r\n\r\n min-height:\r\n 325px;\r\n\r\n overflow:\r\n hidden;\r\n\r\n border-radius:\r\n var(--radius-xl);\r\n\r\n background:\r\n radial-gradient(\r\n circle at 27% 25%,\r\n rgba(255,255,255,.97),\r\n transparent 28%\r\n ),\r\n radial-gradient(\r\n circle at 77% 65%,\r\n rgba(205,230,214,.72),\r\n transparent 30%\r\n ),\r\n linear-gradient(\r\n 145deg,\r\n #f6f8f7,\r\n #e2eae5\r\n );\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.09);\r\n\r\n box-shadow:\r\n var(--shadow);\r\n }\r\n\r\n .world-card::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n pointer-events:\r\n none;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 50% 50%,\r\n transparent 0 36%,\r\n rgba(3,68,31,.025) 37%,\r\n transparent 38% 100%\r\n );\r\n }\r\n\r\n .micro-grid {\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n opacity: .36;\r\n\r\n background-image:\r\n linear-gradient(\r\n rgba(3,68,31,.034) 1px,\r\n transparent 1px\r\n ),\r\n linear-gradient(\r\n 90deg,\r\n rgba(3,68,31,.034) 1px,\r\n transparent 1px\r\n );\r\n\r\n background-size:\r\n 30px 30px;\r\n\r\n mask-image:\r\n radial-gradient(\r\n circle at center,\r\n black 35%,\r\n transparent 92%\r\n );\r\n }\r\n\r\n .network {\r\n position: absolute;\r\n\r\n inset: 0;\r\n\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .network-path {\r\n fill: none;\r\n\r\n stroke:\r\n rgba(3,68,31,.13);\r\n\r\n stroke-width:\r\n 1.6;\r\n\r\n stroke-linecap:\r\n round;\r\n\r\n vector-effect:\r\n non-scaling-stroke;\r\n\r\n transition:\r\n stroke 550ms ease,\r\n stroke-width 550ms ease,\r\n opacity 550ms ease;\r\n }\r\n\r\n .network-path.active {\r\n stroke:\r\n rgba(3,68,31,.42);\r\n\r\n stroke-width:\r\n 2.2;\r\n }\r\n\r\n \/* ============================================================\r\n BIOLOGICAL FORMS\r\n ============================================================ *\/\r\n\r\n .cell {\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.23);\r\n\r\n background:\r\n rgba(255,255,255,.48);\r\n\r\n box-shadow:\r\n inset 0 0 0 7px\r\n rgba(3,68,31,.023);\r\n\r\n transition:\r\n opacity 700ms ease,\r\n transform 700ms var(--ease),\r\n background 700ms ease,\r\n border-color 700ms ease;\r\n }\r\n\r\n .cell::before,\r\n .cell::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n border-radius: 50%;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.12);\r\n }\r\n\r\n .cell::before {\r\n inset: 15%;\r\n }\r\n\r\n .cell::after {\r\n inset: 36%;\r\n\r\n background:\r\n rgba(3,68,31,.05);\r\n }\r\n\r\n .cell.a {\r\n width: 100px;\r\n height: 100px;\r\n\r\n left: 7%;\r\n top: 18%;\r\n }\r\n\r\n .cell.b {\r\n width: 65px;\r\n height: 65px;\r\n\r\n left: 27%;\r\n top: 9%;\r\n }\r\n\r\n .cell.c {\r\n width: 118px;\r\n height: 118px;\r\n\r\n left: 49%;\r\n top: 12%;\r\n }\r\n\r\n .cell.d {\r\n width: 72px;\r\n height: 72px;\r\n\r\n right: 11%;\r\n top: 23%;\r\n }\r\n\r\n .cell.e {\r\n width: 89px;\r\n height: 89px;\r\n\r\n left: 15%;\r\n bottom: 8%;\r\n }\r\n\r\n .cell.f {\r\n width: 56px;\r\n height: 56px;\r\n\r\n left: 47%;\r\n bottom: 12%;\r\n }\r\n\r\n .cell.g {\r\n width: 108px;\r\n height: 108px;\r\n\r\n right: 13%;\r\n bottom: 6%;\r\n }\r\n\r\n .cell.revealed {\r\n background:\r\n rgba(255,255,255,.76);\r\n\r\n border-color:\r\n rgba(3,68,31,.38);\r\n\r\n transform:\r\n scale(1.035);\r\n\r\n box-shadow:\r\n inset 0 0 0 7px\r\n rgba(3,68,31,.035),\r\n\r\n 0 9px 28px\r\n rgba(3,68,31,.06);\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n\r\n width: 7px;\r\n height: 7px;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n var(--mhs-green);\r\n\r\n opacity: .22;\r\n }\r\n\r\n .particle.p1 {\r\n left: 18%;\r\n top: 34%;\r\n }\r\n\r\n .particle.p2 {\r\n left: 40%;\r\n top: 42%;\r\n }\r\n\r\n .particle.p3 {\r\n left: 62%;\r\n top: 34%;\r\n }\r\n\r\n .particle.p4 {\r\n left: 78%;\r\n top: 45%;\r\n }\r\n\r\n .particle.p5 {\r\n left: 35%;\r\n top: 69%;\r\n }\r\n\r\n .particle.p6 {\r\n left: 71%;\r\n top: 74%;\r\n }\r\n\r\n \/* ============================================================\r\n JOURNEY NODES\r\n ============================================================ *\/\r\n\r\n .world-nodes {\r\n position: absolute;\r\n\r\n left: 8%;\r\n right: 8%;\r\n\r\n bottom: 62px;\r\n\r\n display: flex;\r\n\r\n justify-content:\r\n space-between;\r\n\r\n align-items:\r\n center;\r\n\r\n pointer-events:\r\n none;\r\n }\r\n\r\n .world-nodes::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 8px;\r\n right: 8px;\r\n\r\n top: 50%;\r\n\r\n height: 1px;\r\n\r\n transform:\r\n translateY(-50%);\r\n\r\n background:\r\n rgba(3,68,31,.15);\r\n }\r\n\r\n .world-node {\r\n position: relative;\r\n\r\n z-index: 2;\r\n\r\n width: 17px;\r\n height: 17px;\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n #fff;\r\n\r\n border:\r\n 2px solid rgba(3,68,31,.20);\r\n\r\n transition:\r\n background 450ms ease,\r\n border-color 450ms ease,\r\n transform 450ms var(--ease);\r\n }\r\n\r\n .world-node.active {\r\n background:\r\n var(--mhs-green);\r\n\r\n border-color:\r\n var(--mhs-green);\r\n\r\n transform:\r\n scale(1.2);\r\n\r\n box-shadow:\r\n 0 0 0 7px\r\n rgba(3,68,31,.08);\r\n }\r\n\r\n .world-node.visited {\r\n background:\r\n #fff;\r\n\r\n border-color:\r\n var(--mhs-green);\r\n }\r\n\r\n \/* ============================================================\r\n PLAYER\r\n ============================================================ *\/\r\n\r\n .player {\r\n position: absolute;\r\n\r\n left: 8%;\r\n\r\n bottom: 54px;\r\n\r\n z-index: 10;\r\n\r\n width: 36px;\r\n height: 36px;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n border-radius: 50%;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 33% 25%,\r\n #fff 0 9%,\r\n transparent 10%\r\n ),\r\n radial-gradient(\r\n circle at 42% 40%,\r\n #78DDA3 0 27%,\r\n var(--mhs-green) 68%\r\n );\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.18);\r\n\r\n box-shadow:\r\n 0 10px 24px\r\n rgba(3,68,31,.22);\r\n\r\n transition:\r\n left 850ms var(--ease),\r\n transform 320ms ease,\r\n box-shadow 320ms ease;\r\n }\r\n\r\n .player.correct-answer {\r\n animation:\r\n player-correct\r\n 650ms ease;\r\n }\r\n\r\n @keyframes player-correct {\r\n\r\n 0%,\r\n 100% {\r\n transform:\r\n translateX(-50%)\r\n scale(1);\r\n }\r\n\r\n 45% {\r\n transform:\r\n translateX(-50%)\r\n scale(1.22);\r\n\r\n box-shadow:\r\n 0 0 0 10px\r\n rgba(3,68,31,.09),\r\n\r\n 0 12px 25px\r\n rgba(3,68,31,.24);\r\n }\r\n\r\n }\r\n\r\n \/* ============================================================\r\n QUESTION\r\n ============================================================ *\/\r\n\r\n .question-card {\r\n position: relative;\r\n\r\n background: #fff;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.10);\r\n\r\n border-radius:\r\n var(--radius-xl);\r\n\r\n box-shadow:\r\n var(--shadow);\r\n\r\n padding:\r\n clamp(23px, 4vw, 40px);\r\n\r\n display: grid;\r\n\r\n gap: 22px;\r\n }\r\n\r\n .question-kicker {\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size: 12px;\r\n\r\n font-weight: 700;\r\n\r\n letter-spacing:\r\n .08em;\r\n\r\n text-transform:\r\n uppercase;\r\n }\r\n\r\n .question-title {\r\n max-width: 930px;\r\n\r\n color:\r\n #173B26;\r\n\r\n font-size:\r\n clamp(27px, 4vw, 46px);\r\n\r\n line-height:\r\n 1.04;\r\n }\r\n\r\n .answer-grid {\r\n display: grid;\r\n\r\n grid-template-columns:\r\n repeat(2, minmax(0,1fr));\r\n\r\n gap: 12px;\r\n }\r\n\r\n .answer-button {\r\n appearance: none;\r\n\r\n min-height: 82px;\r\n\r\n padding:\r\n 16px 19px;\r\n\r\n border-radius:\r\n 18px;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.17);\r\n\r\n background: #fff;\r\n\r\n color:\r\n var(--ink);\r\n\r\n text-align:\r\n left;\r\n\r\n cursor:\r\n pointer;\r\n\r\n font-weight:\r\n 700;\r\n\r\n transition:\r\n transform 240ms var(--ease),\r\n border-color 240ms ease,\r\n background 240ms ease,\r\n color 240ms ease;\r\n }\r\n\r\n .answer-button:hover:not(:disabled) {\r\n transform:\r\n translateY(-2px);\r\n\r\n border-color:\r\n var(--mhs-green);\r\n\r\n background:\r\n rgba(3,68,31,.035);\r\n }\r\n\r\n .answer-button:disabled {\r\n cursor:\r\n default;\r\n }\r\n\r\n .answer-button .label {\r\n display:\r\n block;\r\n\r\n margin-bottom:\r\n 5px;\r\n\r\n color:\r\n inherit;\r\n\r\n opacity:\r\n .56;\r\n\r\n font-size:\r\n 11px;\r\n\r\n letter-spacing:\r\n .08em;\r\n\r\n text-transform:\r\n uppercase;\r\n }\r\n\r\n .answer-button.correct {\r\n border-color:\r\n var(--mhs-green);\r\n\r\n background:\r\n var(--soft-green);\r\n\r\n color:\r\n var(--mhs-green);\r\n }\r\n\r\n .answer-button.incorrect {\r\n border-color:\r\n #8D4B4B;\r\n\r\n background:\r\n #F7EDED;\r\n\r\n color:\r\n #713535;\r\n }\r\n\r\n \/* ============================================================\r\n FEEDBACK\r\n ============================================================ *\/\r\n\r\n .feedback {\r\n display:\r\n none;\r\n\r\n padding:\r\n 16px 18px;\r\n\r\n border-radius:\r\n 18px;\r\n\r\n background:\r\n var(--g1);\r\n\r\n border-left:\r\n 4px solid var(--mhs-green);\r\n }\r\n\r\n .feedback.visible {\r\n display:\r\n block;\r\n\r\n animation:\r\n feedback-in\r\n 350ms ease both;\r\n }\r\n\r\n .feedback.incorrect {\r\n border-left-color:\r\n #814242;\r\n }\r\n\r\n @keyframes feedback-in {\r\n\r\n from {\r\n opacity: 0;\r\n\r\n transform:\r\n translateY(6px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n\r\n transform:\r\n translateY(0);\r\n }\r\n\r\n }\r\n\r\n .feedback-heading {\r\n margin-bottom:\r\n 4px;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size:\r\n 14px;\r\n\r\n font-weight:\r\n 700;\r\n }\r\n\r\n .feedback.incorrect\r\n .feedback-heading {\r\n color:\r\n #713535;\r\n }\r\n\r\n .feedback-copy {\r\n margin:\r\n 0;\r\n\r\n color:\r\n #3d3d3d;\r\n\r\n font-size:\r\n 15px;\r\n }\r\n\r\n .feedback-answer {\r\n margin-top:\r\n 7px;\r\n\r\n color:\r\n #4d4d4d;\r\n\r\n font-size:\r\n 13px;\r\n\r\n font-weight:\r\n 700;\r\n }\r\n\r\n .question-actions {\r\n display:\r\n flex;\r\n\r\n align-items:\r\n center;\r\n\r\n justify-content:\r\n space-between;\r\n\r\n gap:\r\n 16px;\r\n\r\n flex-wrap:\r\n wrap;\r\n }\r\n\r\n .question-status {\r\n color:\r\n var(--g5);\r\n\r\n font-size:\r\n 13px;\r\n\r\n font-weight:\r\n 700;\r\n }\r\n\r\n .next-button {\r\n min-width:\r\n 190px;\r\n }\r\n\r\n \/* ============================================================\r\n ANSWER ANIMATION\r\n ============================================================ *\/\r\n\r\n .insight-pulse {\r\n position:\r\n fixed;\r\n\r\n z-index:\r\n 100;\r\n\r\n width:\r\n 10px;\r\n\r\n height:\r\n 10px;\r\n\r\n border-radius:\r\n 50%;\r\n\r\n background:\r\n var(--mhs-green);\r\n\r\n pointer-events:\r\n none;\r\n\r\n animation:\r\n pulse-travel\r\n 750ms var(--ease)\r\n forwards;\r\n }\r\n\r\n @keyframes pulse-travel {\r\n\r\n 0% {\r\n opacity:\r\n 0;\r\n\r\n transform:\r\n scale(.5);\r\n }\r\n\r\n 20% {\r\n opacity:\r\n 1;\r\n\r\n transform:\r\n scale(1);\r\n }\r\n\r\n 100% {\r\n opacity:\r\n 0;\r\n\r\n transform:\r\n translate(\r\n var(--dx),\r\n var(--dy)\r\n )\r\n scale(.5);\r\n }\r\n\r\n }\r\n\r\n \/* ============================================================\r\n FINAL SCREEN\r\n ============================================================ *\/\r\n\r\n .final-screen {\r\n min-height:\r\n calc(100vh - 100px);\r\n\r\n display:\r\n grid;\r\n\r\n place-items:\r\n center;\r\n }\r\n\r\n .final-card {\r\n position:\r\n relative;\r\n\r\n width:\r\n 100%;\r\n\r\n max-width:\r\n 900px;\r\n\r\n padding:\r\n clamp(28px, 6vw, 64px);\r\n\r\n overflow:\r\n hidden;\r\n\r\n border-radius:\r\n 34px;\r\n\r\n background:\r\n radial-gradient(\r\n circle at 50% -5%,\r\n rgba(221,235,226,.92),\r\n transparent 32%\r\n ),\r\n rgba(255,255,255,.93);\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.10);\r\n\r\n box-shadow:\r\n var(--shadow);\r\n\r\n text-align:\r\n center;\r\n }\r\n\r\n .final-card::before {\r\n content:\r\n \"\";\r\n\r\n position:\r\n absolute;\r\n\r\n width:\r\n 360px;\r\n\r\n height:\r\n 360px;\r\n\r\n left:\r\n 50%;\r\n\r\n top:\r\n -220px;\r\n\r\n transform:\r\n translateX(-50%);\r\n\r\n border-radius:\r\n 50%;\r\n\r\n border:\r\n 1px solid rgba(3,68,31,.11);\r\n\r\n box-shadow:\r\n 0 0 0 28px rgba(3,68,31,.018),\r\n 0 0 0 60px rgba(3,68,31,.012);\r\n\r\n pointer-events:\r\n none;\r\n }\r\n\r\n .final-line {\r\n position:\r\n relative;\r\n\r\n width:\r\n 100%;\r\n\r\n height:\r\n 8px;\r\n\r\n margin:\r\n 0 auto 28px;\r\n\r\n border-radius:\r\n 999px;\r\n\r\n background:\r\n linear-gradient(\r\n 90deg,\r\n var(--diamond-red) 0%,\r\n var(--biostrong-yellow) 15%,\r\n var(--cinergy-pink) 31%,\r\n var(--syrena-blue) 47%,\r\n var(--trupet-purple) 64%,\r\n var(--truequine-green) 80%,\r\n var(--notox-orange) 100%\r\n );\r\n }\r\n\r\n .final-kicker {\r\n display:\r\n inline-flex;\r\n\r\n align-items:\r\n center;\r\n\r\n margin-bottom:\r\n 18px;\r\n\r\n padding:\r\n 9px 14px;\r\n\r\n border-radius:\r\n 999px;\r\n\r\n background:\r\n var(--soft-green);\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size:\r\n 14px;\r\n\r\n font-weight:\r\n 700;\r\n }\r\n\r\n .final-card h2 {\r\n max-width:\r\n 760px;\r\n\r\n margin:\r\n 0 auto 16px;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size:\r\n clamp(38px, 6vw, 69px);\r\n\r\n line-height:\r\n .98;\r\n }\r\n\r\n .final-score {\r\n margin:\r\n 22px 0 10px;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n font-size:\r\n clamp(64px, 11vw, 112px);\r\n\r\n font-weight:\r\n 700;\r\n\r\n line-height:\r\n .9;\r\n }\r\n\r\n .final-correct {\r\n margin-bottom:\r\n 26px;\r\n\r\n color:\r\n var(--g5);\r\n\r\n font-size:\r\n 15px;\r\n\r\n font-weight:\r\n 700;\r\n }\r\n\r\n .final-message {\r\n max-width:\r\n 680px;\r\n\r\n margin:\r\n 0 auto 30px;\r\n\r\n color:\r\n #3b3b3b;\r\n\r\n font-size:\r\n clamp(16px, 2.15vw, 20px);\r\n }\r\n\r\n .final-actions {\r\n display:\r\n flex;\r\n\r\n align-items:\r\n center;\r\n\r\n justify-content:\r\n center;\r\n\r\n flex-wrap:\r\n wrap;\r\n\r\n gap:\r\n 12px;\r\n }\r\n\r\n .secondary-button {\r\n appearance:\r\n none;\r\n\r\n border:\r\n 0;\r\n\r\n background:\r\n transparent;\r\n\r\n color:\r\n var(--mhs-green);\r\n\r\n min-height:\r\n 50px;\r\n\r\n padding:\r\n 12px 16px;\r\n\r\n border-radius:\r\n 10px;\r\n\r\n font-weight:\r\n 700;\r\n\r\n cursor:\r\n pointer;\r\n\r\n text-decoration:\r\n underline;\r\n\r\n text-decoration-thickness:\r\n 1px;\r\n\r\n text-underline-offset:\r\n 4px;\r\n }\r\n\r\n \/* ============================================================\r\n COMPLETION PARTICLES\r\n ============================================================ *\/\r\n\r\n .completion-particle {\r\n position:\r\n fixed;\r\n\r\n left:\r\n 50%;\r\n\r\n top:\r\n 32%;\r\n\r\n z-index:\r\n 90;\r\n\r\n width:\r\n 7px;\r\n\r\n height:\r\n 15px;\r\n\r\n border-radius:\r\n 2px;\r\n\r\n pointer-events:\r\n none;\r\n\r\n animation:\r\n completion-fall\r\n 1200ms ease-out\r\n forwards;\r\n }\r\n\r\n @keyframes completion-fall {\r\n\r\n 0% {\r\n opacity:\r\n 1;\r\n\r\n transform:\r\n translate(-50%, -10px)\r\n rotate(0deg);\r\n }\r\n\r\n 100% {\r\n opacity:\r\n 0;\r\n\r\n transform:\r\n translate(\r\n calc(-50% + var(--x)),\r\n calc(-10px + var(--y))\r\n )\r\n rotate(var(--r));\r\n }\r\n\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n\r\n @media (max-width: 900px) {\r\n\r\n .intro {\r\n grid-template-columns:\r\n 1fr;\r\n }\r\n\r\n .intro-visual {\r\n min-height:\r\n 300px;\r\n }\r\n\r\n .game-header {\r\n grid-template-columns:\r\n 1fr;\r\n }\r\n\r\n .score-card {\r\n min-width:\r\n 0;\r\n }\r\n\r\n }\r\n\r\n @media (max-width: 720px) {\r\n\r\n .header {\r\n padding:\r\n 11px 12px 0;\r\n }\r\n\r\n .header-inner {\r\n min-height:\r\n 56px;\r\n }\r\n\r\n .brand-logo img {\r\n max-width:\r\n 190px;\r\n\r\n height:\r\n 38px;\r\n }\r\n\r\n main {\r\n width:\r\n min(\r\n var(--max-width),\r\n calc(100% - 20px)\r\n );\r\n\r\n padding-bottom:\r\n 24px;\r\n }\r\n\r\n .intro {\r\n min-height:\r\n auto;\r\n\r\n padding-top:\r\n 10px;\r\n }\r\n\r\n .intro-copy {\r\n padding:\r\n 26px 22px;\r\n\r\n border-radius:\r\n 24px;\r\n }\r\n\r\n .intro-visual {\r\n min-height:\r\n 240px;\r\n\r\n border-radius:\r\n 24px;\r\n }\r\n\r\n .campaign-tension {\r\n margin-bottom:\r\n 24px;\r\n }\r\n\r\n .world-card {\r\n min-height:\r\n 255px;\r\n\r\n border-radius:\r\n 24px;\r\n }\r\n\r\n .journey-card,\r\n .score-card,\r\n .question-card {\r\n border-radius:\r\n 22px;\r\n }\r\n\r\n .question-card {\r\n padding:\r\n 22px 18px;\r\n }\r\n\r\n .answer-grid {\r\n grid-template-columns:\r\n 1fr;\r\n }\r\n\r\n .answer-button {\r\n min-height:\r\n 68px;\r\n }\r\n\r\n .question-actions {\r\n align-items:\r\n stretch;\r\n\r\n flex-direction:\r\n column;\r\n }\r\n\r\n .question-status {\r\n width:\r\n 100%;\r\n }\r\n\r\n .next-button {\r\n width:\r\n 100%;\r\n }\r\n\r\n .final-card {\r\n border-radius:\r\n 25px;\r\n }\r\n\r\n .final-actions {\r\n flex-direction:\r\n column;\r\n }\r\n\r\n .final-actions\r\n .primary-button,\r\n .final-actions\r\n .secondary-button {\r\n width:\r\n 100%;\r\n }\r\n\r\n .score-card {\r\n justify-content:\r\n flex-start;\r\n }\r\n\r\n }\r\n\r\n @media (max-width: 440px) {\r\n\r\n h1 {\r\n font-size:\r\n 46px;\r\n }\r\n\r\n .question-title {\r\n font-size:\r\n 28px;\r\n }\r\n\r\n .progress-stage {\r\n width:\r\n 24px;\r\n\r\n height:\r\n 24px;\r\n\r\n font-size:\r\n 10px;\r\n }\r\n\r\n .world-card {\r\n min-height:\r\n 225px;\r\n }\r\n\r\n .cell.a {\r\n width:\r\n 73px;\r\n\r\n height:\r\n 73px;\r\n }\r\n\r\n .cell.b {\r\n width:\r\n 48px;\r\n\r\n height:\r\n 48px;\r\n }\r\n\r\n .cell.c {\r\n width:\r\n 85px;\r\n\r\n height:\r\n 85px;\r\n }\r\n\r\n .cell.d {\r\n width:\r\n 53px;\r\n\r\n height:\r\n 53px;\r\n }\r\n\r\n .cell.e {\r\n width:\r\n 65px;\r\n\r\n height:\r\n 65px;\r\n }\r\n\r\n .cell.f {\r\n width:\r\n 45px;\r\n\r\n height:\r\n 45px;\r\n }\r\n\r\n .cell.g {\r\n width:\r\n 78px;\r\n\r\n height:\r\n 78px;\r\n }\r\n\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n <div class=\"app\">\r\n\r\n <!-- ==========================================================\r\n HEADER\r\n ========================================================== -->\r\n\r\n \r\n <main>\r\n\r\n\r\n <!-- ========================================================\r\n INTRO\r\n ======================================================== -->\r\n\r\n <section\r\n id=\"introScreen\"\r\n class=\"screen active\"\r\n aria-labelledby=\"introTitle\"\r\n >\r\n\r\n <div class=\"intro\">\r\n\r\n\r\n <div class=\"intro-copy\">\r\n\r\n\r\n <div class=\"eyebrow\">\r\n\r\n <span\r\n class=\"eyebrow-dot\"\r\n aria-hidden=\"true\"\r\n ><\/span>\r\n\r\n A five-question microbiome journey\r\n\r\n <\/div>\r\n\r\n\r\n <h1 id=\"introTitle\">\r\n Can you navigate the microbiome?\r\n <\/h1>\r\n\r\n\r\n <p class=\"intro-support\">\r\n Five questions. One invisible world.\r\n See if you can move from gut feelings\r\n to gut science.\r\n <\/p>\r\n\r\n\r\n <div\r\n class=\"campaign-tension\"\r\n aria-label=\"Campaign progression\"\r\n >\r\n\r\n <span>\r\n FROM gut feelings\r\n <\/span>\r\n\r\n\r\n <span\r\n class=\"arrow\"\r\n aria-hidden=\"true\"\r\n >\r\n \u2192\r\n <\/span>\r\n\r\n\r\n <span class=\"to\">\r\n TO gut science\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <button\r\n id=\"startButton\"\r\n class=\"primary-button\"\r\n type=\"button\"\r\n >\r\n Start exploring\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!--\r\n INTRO VISUAL\r\n\r\n No diagonal campaign-colour line.\r\n -->\r\n\r\n <div\r\n class=\"intro-visual\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <div\r\n class=\"intro-visual-grid\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"intro-arc\"\r\n ><\/div>\r\n\r\n\r\n <span\r\n class=\"intro-node one\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"intro-node two\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"intro-node three\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"intro-node four\"\r\n ><\/span>\r\n\r\n\r\n <div\r\n class=\"intro-core\"\r\n ><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n <!-- ========================================================\r\n GAME\r\n ======================================================== -->\r\n\r\n <section\r\n id=\"gameScreen\"\r\n class=\"screen\"\r\n aria-labelledby=\"questionTitle\"\r\n >\r\n\r\n <div class=\"game-shell\">\r\n\r\n\r\n <!-- ====================================================\r\n PROGRESS + SCORE\r\n ==================================================== -->\r\n\r\n <div class=\"game-header\">\r\n\r\n\r\n <div class=\"journey-card\">\r\n\r\n\r\n <div class=\"journey-heading\">\r\n\r\n\r\n <div class=\"journey-label\">\r\n Your journey through the microbiome\r\n <\/div>\r\n\r\n\r\n <div\r\n id=\"questionCount\"\r\n class=\"question-count\"\r\n >\r\n 1 of 5\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!--\r\n Horizontal campaign-colour line.\r\n\r\n This is the only coloured pathway.\r\n -->\r\n\r\n <div\r\n class=\"campaign-progress\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n\r\n <div\r\n class=\"campaign-progress-base\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n id=\"campaignProgress\"\r\n class=\"campaign-progress-active\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"progress-stage active\"\r\n data-stage=\"0\"\r\n >\r\n 1\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"progress-stage\"\r\n data-stage=\"1\"\r\n >\r\n 2\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"progress-stage\"\r\n data-stage=\"2\"\r\n >\r\n 3\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"progress-stage\"\r\n data-stage=\"3\"\r\n >\r\n 4\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"progress-stage\"\r\n data-stage=\"4\"\r\n >\r\n 5\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!-- SCORE -->\r\n\r\n <div\r\n id=\"scoreCard\"\r\n class=\"score-card\"\r\n aria-live=\"polite\"\r\n >\r\n\r\n\r\n <div\r\n id=\"scoreRing\"\r\n class=\"score-ring\"\r\n style=\"--score-angle: 0deg\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n <span\r\n id=\"scoreRingText\"\r\n >\r\n 0%\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"score-copy\">\r\n\r\n <div\r\n class=\"score-label\"\r\n >\r\n Your score\r\n <\/div>\r\n\r\n\r\n <div\r\n id=\"scoreValue\"\r\n class=\"score-value\"\r\n >\r\n 0%\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!-- ====================================================\r\n MICROBIOME WORLD\r\n ==================================================== -->\r\n\r\n <div\r\n class=\"world-card\"\r\n aria-hidden=\"true\"\r\n >\r\n\r\n\r\n <div\r\n class=\"micro-grid\"\r\n ><\/div>\r\n\r\n\r\n <svg\r\n class=\"network\"\r\n viewBox=\"0 0 100 100\"\r\n preserveAspectRatio=\"none\"\r\n >\r\n\r\n\r\n <path\r\n class=\"network-path active\"\r\n data-network=\"0\"\r\n d=\"\r\n M6,76\r\n C20,64 18,38 31,45\r\n C45,53 46,18 59,31\r\n C69,41 73,16 90,26\r\n \"\r\n \/>\r\n\r\n\r\n <path\r\n class=\"network-path\"\r\n data-network=\"1\"\r\n d=\"\r\n M12,21\r\n C23,31 25,58 39,55\r\n C54,51 56,74 67,65\r\n C77,57 80,69 91,78\r\n \"\r\n \/>\r\n\r\n\r\n <path\r\n class=\"network-path\"\r\n data-network=\"2\"\r\n d=\"\r\n M19,91\r\n C33,78 41,83 51,72\r\n C60,62 65,74 77,68\r\n C85,64 89,48 94,43\r\n \"\r\n \/>\r\n\r\n\r\n <path\r\n class=\"network-path\"\r\n data-network=\"3\"\r\n d=\"\r\n M29,12\r\n C34,26 43,23 48,34\r\n C51,40 57,42 63,35\r\n \"\r\n \/>\r\n\r\n\r\n <path\r\n class=\"network-path\"\r\n data-network=\"4\"\r\n d=\"\r\n M8,48\r\n C21,51 30,39 40,28\r\n C50,17 63,18 77,32\r\n C86,41 91,55 95,67\r\n \"\r\n \/>\r\n\r\n\r\n <\/svg>\r\n\r\n\r\n <!-- CELLS -->\r\n\r\n <div\r\n class=\"cell a\"\r\n data-cell=\"0\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"cell b\"\r\n data-cell=\"1\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"cell c\"\r\n data-cell=\"2\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"cell d\"\r\n data-cell=\"3\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"cell e\"\r\n data-cell=\"4\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"cell f\"\r\n data-cell=\"5\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"cell g\"\r\n data-cell=\"6\"\r\n ><\/div>\r\n\r\n\r\n <!-- PARTICLES -->\r\n\r\n <span\r\n class=\"particle p1\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"particle p2\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"particle p3\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"particle p4\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"particle p5\"\r\n ><\/span>\r\n\r\n <span\r\n class=\"particle p6\"\r\n ><\/span>\r\n\r\n\r\n <!-- JOURNEY NODES -->\r\n\r\n <div class=\"world-nodes\">\r\n\r\n\r\n <span\r\n class=\"world-node active\"\r\n data-world-node=\"0\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"world-node\"\r\n data-world-node=\"1\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"world-node\"\r\n data-world-node=\"2\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"world-node\"\r\n data-world-node=\"3\"\r\n ><\/span>\r\n\r\n\r\n <span\r\n class=\"world-node\"\r\n data-world-node=\"4\"\r\n ><\/span>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!-- PLAYER -->\r\n\r\n <div\r\n id=\"player\"\r\n class=\"player\"\r\n ><\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!-- ====================================================\r\n QUESTION CARD\r\n ==================================================== -->\r\n\r\n <div class=\"question-card\">\r\n\r\n\r\n <div class=\"question-kicker\">\r\n Explore the next layer\r\n <\/div>\r\n\r\n\r\n <h2\r\n id=\"questionTitle\"\r\n class=\"question-title\"\r\n >\r\n The microbiome is simply a collection\r\n of bacteria living inside an animal.\r\n <\/h2>\r\n\r\n\r\n <!-- ANSWERS -->\r\n\r\n <div\r\n id=\"answerGrid\"\r\n class=\"answer-grid\"\r\n >\r\n\r\n\r\n <button\r\n class=\"answer-button\"\r\n type=\"button\"\r\n data-answer=\"true\"\r\n >\r\n\r\n <span class=\"label\">\r\n Choose one\r\n <\/span>\r\n\r\n True\r\n\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"answer-button\"\r\n type=\"button\"\r\n data-answer=\"false\"\r\n >\r\n\r\n <span class=\"label\">\r\n Choose one\r\n <\/span>\r\n\r\n False\r\n\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!-- FEEDBACK -->\r\n\r\n <div\r\n id=\"feedback\"\r\n class=\"feedback\"\r\n aria-live=\"polite\"\r\n >\r\n\r\n\r\n <div\r\n id=\"feedbackHeading\"\r\n class=\"feedback-heading\"\r\n ><\/div>\r\n\r\n\r\n <p\r\n id=\"feedbackCopy\"\r\n class=\"feedback-copy\"\r\n ><\/p>\r\n\r\n\r\n <div\r\n id=\"feedbackAnswer\"\r\n class=\"feedback-answer\"\r\n ><\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <!-- ACTIONS -->\r\n\r\n <div\r\n class=\"question-actions\"\r\n >\r\n\r\n\r\n <div\r\n id=\"questionStatus\"\r\n class=\"question-status\"\r\n >\r\n Correct answers add 20% to your score.\r\n <\/div>\r\n\r\n\r\n <button\r\n id=\"nextButton\"\r\n class=\"primary-button next-button\"\r\n type=\"button\"\r\n hidden\r\n >\r\n Continue exploring\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\t\t\t<div class=\"game-footer\">\r\n\r\n\t\t\t<button\r\n\t\t\tid=\"restartButton\"\r\n\t\t\tclass=\"restart-button\"\r\n\t\t\ttype=\"button\"\r\n\t\t\taria-label=\"Restart the microbiome experience\"\r\n\t\t\t>\r\n\t\t\tRestart\r\n\t\t\t<\/button>\r\n\r\n\t\t\t<\/div>\t\t\t\r\n\r\n <div\r\n id=\"srLive\"\r\n class=\"sr-only\"\r\n aria-live=\"polite\"\r\n ><\/div>\r\n\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n <!-- ========================================================\r\n FINAL\r\n ======================================================== -->\r\n\r\n <section\r\n id=\"finalScreen\"\r\n class=\"screen\"\r\n aria-labelledby=\"finalTitle\"\r\n >\r\n\r\n\r\n <div class=\"final-screen\">\r\n\r\n\r\n <div class=\"final-card\">\r\n\r\n\r\n <!-- Horizontal campaign colour line -->\r\n\r\n <div\r\n class=\"final-line\"\r\n ><\/div>\r\n\r\n\r\n <div\r\n class=\"final-kicker\"\r\n >\r\n From gut feelings to gut science\r\n <\/div>\r\n\r\n\r\n <h2\r\n id=\"finalTitle\"\r\n >\r\n You navigated the microbiome\r\n <\/h2>\r\n\r\n\r\n <div\r\n id=\"finalScore\"\r\n class=\"final-score\"\r\n >\r\n 0%\r\n <\/div>\r\n\r\n\r\n <div\r\n id=\"finalCorrect\"\r\n class=\"final-correct\"\r\n >\r\n 0 of 5 questions correct\r\n <\/div>\r\n\r\n\r\n <p class=\"final-message\">\r\n Understanding the interplay between\r\n nutrition and the microbiome can turn\r\n complexity into actionable insight.\r\n <\/p>\r\n\r\n\r\n <div\r\n class=\"final-actions\"\r\n >\r\n\r\n\r\n <!-- FINAL CTA -->\r\n\r\n <a\r\n class=\"primary-button\"\r\n href=\"https:\/\/micronutritionandhealth.com\/\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n >\r\n Go deeper\r\n <\/a>\r\n\r\n\r\n <button\r\n id=\"playAgainButton\"\r\n class=\"secondary-button\"\r\n type=\"button\"\r\n >\r\n Play again\r\n <\/button>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n <\/section>\r\n\r\n\r\n <\/main>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- ============================================================\r\n JAVASCRIPT\r\n ============================================================ -->\r\n\r\n <script>\r\n\r\n\r\n \/* ============================================================\r\n EDITABLE QUESTION DATA\r\n ============================================================ *\/\r\n\r\n const QUESTIONS = [\r\n\r\n {\r\n question:\r\n \"The microbiome is simply a collection of bacteria living inside an animal.\",\r\n\r\n answer:\r\n false,\r\n\r\n feedback:\r\n \"The microbiome is a complex ecosystem. Understanding its interactions helps us better understand animal health and performance.\"\r\n },\r\n\r\n\r\n {\r\n question:\r\n \"Nutrition and the microbiome influence one another.\",\r\n\r\n answer:\r\n true,\r\n\r\n feedback:\r\n \"They\u2019re interconnected. Micronutrition & Health Solutions looks at the interplay between nutrition and the animal microbiome rather than viewing either in isolation.\"\r\n },\r\n\r\n\r\n {\r\n question:\r\n \"The microbiome can influence nutrient utilization, immunity and resilience.\",\r\n\r\n answer:\r\n true,\r\n\r\n feedback:\r\n \"What happens at the micro level can influence important biological functions linked to animal health and performance.\"\r\n },\r\n\r\n\r\n \/*\r\n UPDATED QUESTION 4\r\n *\/\r\n\r\n {\r\n question:\r\n \"The microbiome is too complex to understand.\",\r\n\r\n answer:\r\n false,\r\n\r\n feedback:\r\n \"Complex does not mean impossible to understand. Microbiome science can help us make sense of biological information and turn complexity into clearer, actionable insights. At Micronutrition & Health Solutions, we focus on understanding the interplay between nutrition and the animal microbiome.\"\r\n },\r\n\r\n\r\n {\r\n question:\r\n \"Understanding the microbiome can help inform more targeted nutrition decisions.\",\r\n\r\n answer:\r\n true,\r\n\r\n feedback:\r\n \"Exactly. By understanding how nutrition and the microbiome interact, we can move from gut feelings to gut science.\"\r\n }\r\n\r\n ];\r\n\r\n\r\n \/* ============================================================\r\n GAME CONFIGURATION\r\n ============================================================ *\/\r\n\r\n const POINTS_PER_CORRECT =\r\n 20;\r\n\r\n\r\n \/* ============================================================\r\n DOM REFERENCES\r\n ============================================================ *\/\r\n\r\n const introScreen =\r\n document.getElementById(\r\n \"introScreen\"\r\n );\r\n\r\n\r\n const gameScreen =\r\n document.getElementById(\r\n \"gameScreen\"\r\n );\r\n\r\n\r\n const finalScreen =\r\n document.getElementById(\r\n \"finalScreen\"\r\n );\r\n\r\n\r\n const startButton =\r\n document.getElementById(\r\n \"startButton\"\r\n );\r\n\r\n\r\n const restartButton =\r\n document.getElementById(\r\n \"restartButton\"\r\n );\r\n\r\n\r\n const playAgainButton =\r\n document.getElementById(\r\n \"playAgainButton\"\r\n );\r\n\r\n\r\n const questionTitle =\r\n document.getElementById(\r\n \"questionTitle\"\r\n );\r\n\r\n\r\n const questionCount =\r\n document.getElementById(\r\n \"questionCount\"\r\n );\r\n\r\n\r\n const scoreCard =\r\n document.getElementById(\r\n \"scoreCard\"\r\n );\r\n\r\n\r\n const scoreRing =\r\n document.getElementById(\r\n \"scoreRing\"\r\n );\r\n\r\n\r\n const scoreRingText =\r\n document.getElementById(\r\n \"scoreRingText\"\r\n );\r\n\r\n\r\n const scoreValue =\r\n document.getElementById(\r\n \"scoreValue\"\r\n );\r\n\r\n\r\n const answerGrid =\r\n document.getElementById(\r\n \"answerGrid\"\r\n );\r\n\r\n\r\n const feedback =\r\n document.getElementById(\r\n \"feedback\"\r\n );\r\n\r\n\r\n const feedbackHeading =\r\n document.getElementById(\r\n \"feedbackHeading\"\r\n );\r\n\r\n\r\n const feedbackCopy =\r\n document.getElementById(\r\n \"feedbackCopy\"\r\n );\r\n\r\n\r\n const feedbackAnswer =\r\n document.getElementById(\r\n \"feedbackAnswer\"\r\n );\r\n\r\n\r\n const questionStatus =\r\n document.getElementById(\r\n \"questionStatus\"\r\n );\r\n\r\n\r\n const nextButton =\r\n document.getElementById(\r\n \"nextButton\"\r\n );\r\n\r\n\r\n const campaignProgress =\r\n document.getElementById(\r\n \"campaignProgress\"\r\n );\r\n\r\n\r\n const player =\r\n document.getElementById(\r\n \"player\"\r\n );\r\n\r\n\r\n const srLive =\r\n document.getElementById(\r\n \"srLive\"\r\n );\r\n\r\n\r\n const finalScore =\r\n document.getElementById(\r\n \"finalScore\"\r\n );\r\n\r\n\r\n const finalCorrect =\r\n document.getElementById(\r\n \"finalCorrect\"\r\n );\r\n\r\n\r\n \/* ============================================================\r\n STATE\r\n ============================================================ *\/\r\n\r\n const state = {\r\n\r\n currentQuestion:\r\n 0,\r\n\r\n score:\r\n 0,\r\n\r\n correctAnswers:\r\n 0,\r\n\r\n answered:\r\n false\r\n\r\n };\r\n\r\n\r\n \/* ============================================================\r\n SCREEN MANAGEMENT\r\n ============================================================ *\/\r\n\r\n function showScreen(\r\n targetScreen\r\n ) {\r\n\r\n [\r\n introScreen,\r\n gameScreen,\r\n finalScreen\r\n ].forEach(\r\n screen => {\r\n\r\n screen.classList.toggle(\r\n \"active\",\r\n screen === targetScreen\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n window.scrollTo({\r\n\r\n top: 0,\r\n\r\n behavior: \"smooth\"\r\n\r\n });\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n RESET\r\n ============================================================ *\/\r\n\r\n function resetGame() {\r\n\r\n state.currentQuestion =\r\n 0;\r\n\r\n state.score =\r\n 0;\r\n\r\n state.correctAnswers =\r\n 0;\r\n\r\n state.answered =\r\n false;\r\n\r\n\r\n updateScore();\r\n\r\n updateJourney();\r\n\r\n\r\n feedback.className =\r\n \"feedback\";\r\n\r\n\r\n feedbackHeading.textContent =\r\n \"\";\r\n\r\n\r\n feedbackCopy.textContent =\r\n \"\";\r\n\r\n\r\n feedbackAnswer.textContent =\r\n \"\";\r\n\r\n\r\n nextButton.hidden =\r\n true;\r\n\r\n\r\n questionStatus.textContent =\r\n \"Correct answers add 20% to your score.\";\r\n\r\n\r\n document\r\n .querySelectorAll(\r\n \".answer-button\"\r\n )\r\n .forEach(\r\n button => {\r\n\r\n button.disabled =\r\n false;\r\n\r\n button.classList.remove(\r\n \"correct\",\r\n \"incorrect\"\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n finalScore.textContent =\r\n \"0%\";\r\n\r\n\r\n finalCorrect.textContent =\r\n `0 of ${QUESTIONS.length} questions correct`;\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n START\r\n ============================================================ *\/\r\n\r\n function startGame() {\r\n\r\n resetGame();\r\n\r\n renderQuestion();\r\n\r\n showScreen(\r\n gameScreen\r\n );\r\n\r\n\r\n setTimeout(() => {\r\n\r\n document\r\n .querySelector(\r\n \".answer-button\"\r\n )\r\n ?.focus();\r\n\r\n }, 250);\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n RESTART\r\n ============================================================ *\/\r\n\r\n function restartGame() {\r\n\r\n resetGame();\r\n\r\n showScreen(\r\n introScreen\r\n );\r\n\r\n\r\n setTimeout(() => {\r\n\r\n startButton.focus();\r\n\r\n }, 200);\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n RENDER QUESTION\r\n ============================================================ *\/\r\n\r\n function renderQuestion() {\r\n\r\n const item =\r\n QUESTIONS[\r\n state.currentQuestion\r\n ];\r\n\r\n\r\n state.answered =\r\n false;\r\n\r\n\r\n questionTitle.textContent =\r\n item.question;\r\n\r\n\r\n questionCount.textContent =\r\n `${state.currentQuestion + 1} of ${QUESTIONS.length}`;\r\n\r\n\r\n feedback.className =\r\n \"feedback\";\r\n\r\n\r\n feedbackHeading.textContent =\r\n \"\";\r\n\r\n\r\n feedbackCopy.textContent =\r\n \"\";\r\n\r\n\r\n feedbackAnswer.textContent =\r\n \"\";\r\n\r\n\r\n nextButton.hidden =\r\n true;\r\n\r\n\r\n questionStatus.textContent =\r\n \"Correct answers add 20% to your score.\";\r\n\r\n\r\n document\r\n .querySelectorAll(\r\n \".answer-button\"\r\n )\r\n .forEach(\r\n button => {\r\n\r\n button.disabled =\r\n false;\r\n\r\n button.classList.remove(\r\n \"correct\",\r\n \"incorrect\"\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n updateJourney();\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n SCORE\r\n ============================================================ *\/\r\n\r\n function updateScore() {\r\n\r\n const percentage =\r\n state.score;\r\n\r\n\r\n const angle =\r\n (percentage \/ 100) *\r\n 360;\r\n\r\n\r\n scoreValue.textContent =\r\n `${percentage}%`;\r\n\r\n\r\n scoreRingText.textContent =\r\n `${percentage}%`;\r\n\r\n\r\n scoreRing.style.setProperty(\r\n \"--score-angle\",\r\n `${angle}deg`\r\n );\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n JOURNEY\r\n ============================================================ *\/\r\n\r\n function updateJourney() {\r\n\r\n \/*\r\n Journey progress and knowledge score are deliberately\r\n separate.\r\n\r\n Journey:\r\n How far the player has travelled.\r\n\r\n Score:\r\n How many questions the player got right.\r\n *\/\r\n\r\n const answeredProgress =\r\n state.answered\r\n ? state.currentQuestion + 1\r\n : state.currentQuestion;\r\n\r\n\r\n const journeyPercentage =\r\n (\r\n answeredProgress \/\r\n QUESTIONS.length\r\n ) * 100;\r\n\r\n\r\n \/*\r\n Horizontal campaign progress.\r\n *\/\r\n\r\n campaignProgress.style.width =\r\n `${journeyPercentage}%`;\r\n\r\n\r\n \/*\r\n Move the player through the world.\r\n *\/\r\n\r\n const playerPositions = [\r\n\r\n \"8%\",\r\n\r\n \"29%\",\r\n\r\n \"49%\",\r\n\r\n \"69%\",\r\n\r\n \"92%\"\r\n\r\n ];\r\n\r\n\r\n const playerPosition =\r\n state.answered\r\n\r\n ? playerPositions[\r\n state.currentQuestion\r\n ]\r\n\r\n : playerPositions[\r\n Math.max(\r\n 0,\r\n state.currentQuestion - 1\r\n )\r\n ];\r\n\r\n\r\n player.style.left =\r\n playerPosition;\r\n\r\n\r\n \/*\r\n Numbered progress stages.\r\n *\/\r\n\r\n document\r\n .querySelectorAll(\r\n \".progress-stage\"\r\n )\r\n .forEach(\r\n (stage, index) => {\r\n\r\n stage.classList.toggle(\r\n\r\n \"active\",\r\n\r\n index ===\r\n state.currentQuestion\r\n\r\n );\r\n\r\n\r\n stage.classList.toggle(\r\n\r\n \"visited\",\r\n\r\n index <\r\n answeredProgress\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Microbiome nodes.\r\n *\/\r\n\r\n document\r\n .querySelectorAll(\r\n \".world-node\"\r\n )\r\n .forEach(\r\n (node, index) => {\r\n\r\n node.classList.toggle(\r\n\r\n \"active\",\r\n\r\n index ===\r\n Math.min(\r\n state.currentQuestion,\r\n QUESTIONS.length - 1\r\n )\r\n\r\n );\r\n\r\n\r\n node.classList.toggle(\r\n\r\n \"visited\",\r\n\r\n index <\r\n answeredProgress\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Biological network becomes clearer.\r\n *\/\r\n\r\n document\r\n .querySelectorAll(\r\n \".network-path\"\r\n )\r\n .forEach(\r\n (path, index) => {\r\n\r\n path.classList.toggle(\r\n\r\n \"active\",\r\n\r\n index <=\r\n state.currentQuestion\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Biological forms progressively resolve.\r\n *\/\r\n\r\n document\r\n .querySelectorAll(\r\n \".cell\"\r\n )\r\n .forEach(\r\n (cell, index) => {\r\n\r\n const revealThreshold =\r\n index <\r\n answeredProgress + 2;\r\n\r\n\r\n cell.classList.toggle(\r\n\r\n \"revealed\",\r\n\r\n revealThreshold\r\n\r\n );\r\n\r\n }\r\n );\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n ANSWER QUESTION\r\n ============================================================ *\/\r\n\r\n function answerQuestion(\r\n selectedAnswer\r\n ) {\r\n\r\n if (\r\n state.answered\r\n ) {\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n state.answered =\r\n true;\r\n\r\n\r\n const item =\r\n QUESTIONS[\r\n state.currentQuestion\r\n ];\r\n\r\n\r\n const correct =\r\n selectedAnswer ===\r\n item.answer;\r\n\r\n\r\n \/*\r\n Answer styling.\r\n *\/\r\n\r\n document\r\n .querySelectorAll(\r\n \".answer-button\"\r\n )\r\n .forEach(\r\n button => {\r\n\r\n const value =\r\n button.dataset.answer ===\r\n \"true\";\r\n\r\n\r\n button.disabled =\r\n true;\r\n\r\n\r\n if (\r\n value ===\r\n item.answer\r\n ) {\r\n\r\n button.classList.add(\r\n \"correct\"\r\n );\r\n\r\n }\r\n\r\n\r\n if (\r\n value ===\r\n selectedAnswer &&\r\n !correct\r\n ) {\r\n\r\n button.classList.add(\r\n \"incorrect\"\r\n );\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n\r\n \/*\r\n Feedback.\r\n *\/\r\n\r\n feedback.className =\r\n `feedback visible${\r\n correct\r\n ? \"\"\r\n : \" incorrect\"\r\n }`;\r\n\r\n\r\n feedbackHeading.textContent =\r\n correct\r\n\r\n ? \"Correct \u2014 you\u2019re going deeper\"\r\n\r\n : \"Not quite \u2014 here\u2019s the science\";\r\n\r\n\r\n feedbackCopy.textContent =\r\n item.feedback;\r\n\r\n\r\n if (\r\n !correct\r\n ) {\r\n\r\n feedbackAnswer.textContent =\r\n `The correct answer is ${\r\n item.answer\r\n ? \"TRUE\"\r\n : \"FALSE\"\r\n }.`;\r\n\r\n } else {\r\n\r\n feedbackAnswer.textContent =\r\n \"\";\r\n\r\n }\r\n\r\n\r\n \/*\r\n Update score.\r\n *\/\r\n\r\n if (\r\n correct\r\n ) {\r\n\r\n state.score +=\r\n POINTS_PER_CORRECT;\r\n\r\n\r\n state.correctAnswers +=\r\n 1;\r\n\r\n\r\n updateScore();\r\n\r\n\r\n scoreCard.classList.remove(\r\n \"score-flash\"\r\n );\r\n\r\n\r\n void scoreCard.offsetWidth;\r\n\r\n\r\n scoreCard.classList.add(\r\n \"score-flash\"\r\n );\r\n\r\n\r\n questionStatus.textContent =\r\n \"+20% \u2014 correct answer\";\r\n\r\n\r\n createInsightPulse();\r\n\r\n\r\n player.classList.remove(\r\n \"correct-answer\"\r\n );\r\n\r\n\r\n void player.offsetWidth;\r\n\r\n\r\n player.classList.add(\r\n \"correct-answer\"\r\n );\r\n\r\n\r\n setTimeout(() => {\r\n\r\n player.classList.remove(\r\n \"correct-answer\"\r\n );\r\n\r\n }, 700);\r\n\r\n } else {\r\n\r\n questionStatus.textContent =\r\n \"Keep exploring \u2014 every answer reveals more.\";\r\n\r\n }\r\n\r\n\r\n \/*\r\n Move through the journey after every answer.\r\n *\/\r\n\r\n updateJourney();\r\n\r\n\r\n \/*\r\n Accessibility.\r\n *\/\r\n\r\n srLive.textContent =\r\n correct\r\n\r\n ?\r\n `Correct. Your score is ${state.score} percent.`\r\n\r\n :\r\n `Incorrect. The correct answer is ${\r\n item.answer\r\n ? \"true\"\r\n : \"false\"\r\n }. Your score remains ${\r\n state.score\r\n } percent.`;\r\n\r\n\r\n \/*\r\n Next.\r\n *\/\r\n\r\n nextButton.hidden =\r\n false;\r\n\r\n\r\n nextButton.textContent =\r\n\r\n state.currentQuestion ===\r\n QUESTIONS.length - 1\r\n\r\n ? \"See your result\"\r\n\r\n : \"Continue exploring\";\r\n\r\n\r\n setTimeout(() => {\r\n\r\n nextButton.focus();\r\n\r\n }, 120);\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n CONTINUE\r\n ============================================================ *\/\r\n\r\n function continueJourney() {\r\n\r\n if (\r\n !state.answered\r\n ) {\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n state.currentQuestion <\r\n QUESTIONS.length - 1\r\n ) {\r\n\r\n state.currentQuestion +=\r\n 1;\r\n\r\n\r\n renderQuestion();\r\n\r\n\r\n setTimeout(() => {\r\n\r\n document\r\n .querySelector(\r\n \".answer-button\"\r\n )\r\n ?.focus();\r\n\r\n }, 150);\r\n\r\n } else {\r\n\r\n finishGame();\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n FINISH\r\n ============================================================ *\/\r\n\r\n function finishGame() {\r\n\r\n const percentage =\r\n state.score;\r\n\r\n\r\n finalScore.textContent =\r\n `${percentage}%`;\r\n\r\n\r\n finalCorrect.textContent =\r\n `${state.correctAnswers} of ${QUESTIONS.length} questions correct`;\r\n\r\n\r\n showScreen(\r\n finalScreen\r\n );\r\n\r\n\r\n createCompletionAnimation();\r\n\r\n\r\n srLive.textContent =\r\n `Journey complete. Your score is ${percentage} percent. You answered ${state.correctAnswers} of ${QUESTIONS.length} questions correctly.`;\r\n\r\n\r\n setTimeout(() => {\r\n\r\n playAgainButton.focus();\r\n\r\n }, 500);\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n CORRECT ANSWER PULSE\r\n ============================================================ *\/\r\n\r\n function createInsightPulse() {\r\n\r\n const origin =\r\n player.getBoundingClientRect();\r\n\r\n\r\n const target =\r\n scoreRing.getBoundingClientRect();\r\n\r\n\r\n const particle =\r\n document.createElement(\r\n \"span\"\r\n );\r\n\r\n\r\n particle.className =\r\n \"insight-pulse\";\r\n\r\n\r\n particle.style.left =\r\n `${\r\n origin.left +\r\n origin.width \/ 2\r\n }px`;\r\n\r\n\r\n particle.style.top =\r\n `${\r\n origin.top +\r\n origin.height \/ 2\r\n }px`;\r\n\r\n\r\n particle.style.setProperty(\r\n \"--dx\",\r\n `${\r\n target.left -\r\n origin.left\r\n }px`\r\n );\r\n\r\n\r\n particle.style.setProperty(\r\n \"--dy\",\r\n `${\r\n target.top -\r\n origin.top\r\n }px`\r\n );\r\n\r\n\r\n document.body.appendChild(\r\n particle\r\n );\r\n\r\n\r\n setTimeout(() => {\r\n\r\n particle.remove();\r\n\r\n }, 900);\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n COMPLETION ANIMATION\r\n ============================================================ *\/\r\n\r\n function createCompletionAnimation() {\r\n\r\n const colours = [\r\n\r\n \"#03441F\",\r\n\r\n \"#BA0C0C\",\r\n\r\n \"#FFBC27\",\r\n\r\n \"#F05B78\",\r\n\r\n \"#57D1FF\",\r\n\r\n \"#7166FF\",\r\n\r\n \"#007681\",\r\n\r\n \"#FF7C48\"\r\n\r\n ];\r\n\r\n\r\n for (\r\n let i = 0;\r\n i < 24;\r\n i++\r\n ) {\r\n\r\n const particle =\r\n document.createElement(\r\n \"span\"\r\n );\r\n\r\n\r\n particle.className =\r\n \"completion-particle\";\r\n\r\n\r\n particle.style.background =\r\n colours[\r\n i %\r\n colours.length\r\n ];\r\n\r\n\r\n particle.style.setProperty(\r\n\r\n \"--x\",\r\n\r\n `${\r\n (Math.random() - .5) *\r\n 600\r\n }px`\r\n\r\n );\r\n\r\n\r\n particle.style.setProperty(\r\n\r\n \"--y\",\r\n\r\n `${\r\n 150 +\r\n Math.random() *\r\n 400\r\n }px`\r\n\r\n );\r\n\r\n\r\n particle.style.setProperty(\r\n\r\n \"--r\",\r\n\r\n `${\r\n (Math.random() - .5) *\r\n 720\r\n }deg`\r\n\r\n );\r\n\r\n\r\n particle.style.animationDelay =\r\n `${\r\n Math.random() *\r\n 220\r\n }ms`;\r\n\r\n\r\n document.body.appendChild(\r\n particle\r\n );\r\n\r\n\r\n setTimeout(() => {\r\n\r\n particle.remove();\r\n\r\n }, 1600);\r\n\r\n }\r\n\r\n }\r\n\r\n\r\n \/* ============================================================\r\n KEYBOARD\r\n\r\n T \/ 1 = TRUE\r\n F \/ 2 = FALSE\r\n ESCAPE = RESTART\r\n ============================================================ *\/\r\n\r\n document.addEventListener(\r\n\r\n \"keydown\",\r\n\r\n event => {\r\n\r\n const isGameActive =\r\n gameScreen\r\n .classList\r\n .contains(\r\n \"active\"\r\n );\r\n\r\n\r\n if (\r\n event.key ===\r\n \"Escape\" &&\r\n isGameActive\r\n ) {\r\n\r\n restartGame();\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n isGameActive &&\r\n !state.answered\r\n ) {\r\n\r\n const key =\r\n event.key.toLowerCase();\r\n\r\n\r\n if (\r\n key === \"t\" ||\r\n event.key === \"1\"\r\n ) {\r\n\r\n answerQuestion(\r\n true\r\n );\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n if (\r\n key === \"f\" ||\r\n event.key === \"2\"\r\n ) {\r\n\r\n answerQuestion(\r\n false\r\n );\r\n\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n );\r\n\r\n\r\n \/* ============================================================\r\n EVENT LISTENERS\r\n ============================================================ *\/\r\n\r\n startButton.addEventListener(\r\n \"click\",\r\n startGame\r\n );\r\n\r\n\r\n restartButton.addEventListener(\r\n \"click\",\r\n restartGame\r\n );\r\n\r\n\r\n playAgainButton.addEventListener(\r\n \"click\",\r\n startGame\r\n );\r\n\r\n\r\n answerGrid.addEventListener(\r\n\r\n \"click\",\r\n\r\n event => {\r\n\r\n const button =\r\n event.target.closest(\r\n \".answer-button\"\r\n );\r\n\r\n\r\n if (!button) {\r\n return;\r\n }\r\n\r\n\r\n answerQuestion(\r\n\r\n button.dataset.answer ===\r\n \"true\"\r\n\r\n );\r\n\r\n }\r\n\r\n );\r\n\r\n\r\n nextButton.addEventListener(\r\n \"click\",\r\n continueJourney\r\n );\r\n\r\n\r\n \/* ============================================================\r\n INITIALISE\r\n ============================================================ *\/\r\n\r\n resetGame();\r\n\r\n renderQuestion();\r\n\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Five questions. One invisible world. See if you can move from gut feelings to gut science.<\/p>","protected":false},"author":1,"featured_media":6472,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6461","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.7 (Yoast SEO v28.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Microbiome Quiz - Micronutrition and Health Solutions<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/micronutritionandhealth.com\/es\/microbiome-quiz\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Microbiome Quiz\" \/>\n<meta property=\"og:description\" content=\"Five questions. One invisible world. See if you can move from gut feelings to gut science.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/micronutritionandhealth.com\/es\/microbiome-quiz\/\" \/>\n<meta property=\"og:site_name\" content=\"Micronutrition and Health Solutions\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-28T16:12:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2026\/09\/microbiome-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"576\" \/>\n\t<meta property=\"og:image:height\" content=\"446\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/\",\"url\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/\",\"name\":\"Microbiome Quiz - Micronutrition and Health Solutions\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/micronutritionandhealth.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/microbiome-image.jpg\",\"datePublished\":\"2026-09-28T15:19:24+00:00\",\"dateModified\":\"2026-09-28T16:12:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/#primaryimage\",\"url\":\"https:\\\/\\\/micronutritionandhealth.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/microbiome-image.jpg\",\"contentUrl\":\"https:\\\/\\\/micronutritionandhealth.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/microbiome-image.jpg\",\"width\":576,\"height\":446},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/microbiome-quiz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/micronutritionandhealth.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Microbiome Quiz\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/#website\",\"url\":\"https:\\\/\\\/micronutritionandhealth.com\\\/\",\"name\":\"Cargill - Micronutrition and Health Solutions\",\"description\":\"We elevate animal performance with purpose.\",\"publisher\":{\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/micronutritionandhealth.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/#organization\",\"name\":\"Cargill - Micronutrition and Health Solutions\",\"url\":\"https:\\\/\\\/micronutritionandhealth.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/micronutritionandhealth.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/MHS-Wordmark_Vertical_RGB_Black.svg\",\"contentUrl\":\"https:\\\/\\\/micronutritionandhealth.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/MHS-Wordmark_Vertical_RGB_Black.svg\",\"width\":1080,\"height\":350,\"caption\":\"Cargill - Micronutrition and Health Solutions\"},\"image\":{\"@id\":\"https:\\\/\\\/micronutritionandhealth.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Microbiome Quiz - Micronutrition and Health Solutions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/micronutritionandhealth.com\/es\/microbiome-quiz\/","og_locale":"es_ES","og_type":"article","og_title":"Microbiome Quiz","og_description":"Five questions. One invisible world. See if you can move from gut feelings to gut science.","og_url":"https:\/\/micronutritionandhealth.com\/es\/microbiome-quiz\/","og_site_name":"Micronutrition and Health Solutions","article_modified_time":"2026-09-28T16:12:49+00:00","og_image":[{"width":576,"height":446,"url":"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2026\/09\/microbiome-image.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/","url":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/","name":"Microbiome Quiz - Micronutrition and Health Solutions","isPartOf":{"@id":"https:\/\/micronutritionandhealth.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/#primaryimage"},"image":{"@id":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/#primaryimage"},"thumbnailUrl":"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2026\/09\/microbiome-image.jpg","datePublished":"2026-09-28T15:19:24+00:00","dateModified":"2026-09-28T16:12:49+00:00","breadcrumb":{"@id":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/micronutritionandhealth.com\/microbiome-quiz\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/#primaryimage","url":"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2026\/09\/microbiome-image.jpg","contentUrl":"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2026\/09\/microbiome-image.jpg","width":576,"height":446},{"@type":"BreadcrumbList","@id":"https:\/\/micronutritionandhealth.com\/microbiome-quiz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/micronutritionandhealth.com\/"},{"@type":"ListItem","position":2,"name":"Microbiome Quiz"}]},{"@type":"WebSite","@id":"https:\/\/micronutritionandhealth.com\/#website","url":"https:\/\/micronutritionandhealth.com\/","name":"Cargill - Soluciones de Nutrici\u00f3n y Salud","description":"Elevamos el rendimiento animal con prop\u00f3sito.","publisher":{"@id":"https:\/\/micronutritionandhealth.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/micronutritionandhealth.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/micronutritionandhealth.com\/#organization","name":"Cargill - Soluciones de Nutrici\u00f3n y Salud","url":"https:\/\/micronutritionandhealth.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/micronutritionandhealth.com\/#\/schema\/logo\/image\/","url":"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2024\/10\/MHS-Wordmark_Vertical_RGB_Black.svg","contentUrl":"https:\/\/micronutritionandhealth.com\/wp-content\/uploads\/2024\/10\/MHS-Wordmark_Vertical_RGB_Black.svg","width":1080,"height":350,"caption":"Cargill - Micronutrition and Health Solutions"},"image":{"@id":"https:\/\/micronutritionandhealth.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/pages\/6461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/comments?post=6461"}],"version-history":[{"count":0,"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/pages\/6461\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/media\/6472"}],"wp:attachment":[{"href":"https:\/\/micronutritionandhealth.com\/es\/wp-json\/wp\/v2\/media?parent=6461"}],"curies":[{"name":"bien jugado","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}