index.html

---
title: P(doom) Calculator
description: Pick a beginner, medium, or expert quiz, set the probability for each link in the chain, and see your P(doom) with a 10–90% uncertainty band.
extra_styles: /assets/css/quiz.css
---
<!--
Similar to a **Windows Wizard**. First page is the welcome page.
From there the visitor picks a level: **beginner**, **medium** or **expert**.
Every level ends on the **sliders**. There is no way to reach the sliders without
going through a quiz first -- no card, no breadcrumb -- so the only navigation
away from a quiz is "Choose a different level", which returns to the start.

Beginner and medium open their quiz directly. Expert opens a knowledge check
first: 30 terms, 15 genuinely AI-related and 15 decoys. Each term scores
independently — a ticked AI term and an unticked decoy both count — so ticking
nothing already scores 15.

The score picks the level we recommend:
0..20 -> **beginner**, 21..25 -> **medium**, 26..30 -> **expert**.

The check is advisory. Below 26 the visitor is offered the recommended quiz and
a "continue to expert anyway" button; taking that second door records the
submission as a self-declared rather than verified expert (`expert_verified`
in the database). The check no longer pre-sets the sliders, because whichever
quiz follows overwrites both spread and midpoint anyway.

I have omitted these areas:
Safety testing, since a model that does continuous learning, would be so hard to assess if it conforms to a safety benchmark.
Context length, since it's already a massive amount of data models already can attend to.
Take off period, If it's 1 year, 5 years, 25 years. No matter what it's going to be disruptive for everyone.

Gaps / potential future questions:
- Open vs closed source — Open-weight models (Llama, Mistral) vs closed (GPT, Claude) and safety implications.
- Concentration of power — Who controls AI, monopoly risks, democratic oversight.
- Economic disruption / job displacement — Widely discussed P(doom)-adjacent concern.
- Alignment techniques — RLHF, constitutional AI, interpretability.
- Scaling laws — Whether bigger models = smarter models, and whether this continues.
- Instrumental convergence / power-seeking — Only in the knowledge check (paperclip maximizer), not explored as a quiz topic.
- Deceptive alignment — An AI that appears aligned during training but pursues different goals when deployed.
-->
<main>
    <header class="page-header">
      <h1>P(doom) Calculator</h1>
      <p class="description">Probability that AI causes a global catastrophe.</p>
    </header>

    <div class="sticky-header">
      <div class="sticky-pdoom" id="stickyPdoom" hidden>
        <span class="sticky-pdoom__label">P(doom)</span>
        <span class="sticky-pdoom__value" id="stickyPdoomValue">–</span>
      </div>

      <div class="quiz-preview" id="quizPreview" hidden>
        <div class="quiz-preview__title" id="quizPreviewTitle">Calibration preview</div>
        <div class="quiz-preview__values">
          <span>P(doom): <strong id="quizPreviewMidpoint">–</strong></span>
          <span>Spread: <strong id="quizPreviewSpread">–</strong></span>
        </div>
      </div>
    </div>

    <section class="knowledge-quiz quiz-wizard" id="levelWizard">
      <header class="wizard-header">
        <h2 id="wizardHeaderTitle">Choose your quiz path</h2>
        <p class="wizard-intro" id="wizardHeaderIntro" hidden></p>
      </header>
      <div class="wizard-body">
        <div class="wizard-panel wizard-panel--active" id="wizardStepWelcome" data-step="welcome">
          <div class="wizard-flow-grid" id="wizardFlowList"></div>
        </div>
        <div class="wizard-panel" id="wizardStepQuiz" data-step="quiz" hidden>
          <ol class="wizard-question-list" id="wizardQuestionList"></ol>
          <div class="wizard-actions">
            <button class="primary-button" type="button" id="wizardSubmitButton">Continue to the sliders</button>
          </div>
          <p class="quiz-result" id="wizardResult" aria-live="polite"></p>
          <div class="quiz-result-actions" id="wizardResultActions" hidden></div>
        </div>
      </div>
    </section>

    <div class="sliders-ui" id="slidersUi" hidden>
      <p class="slider-hint" id="sliderHint">Drag inside the bell curves to shift your estimate left or right.</p>
      <p class="description">
        Choose your best guess for each stage and how uncertain you are (± pts).
      </p>
  
      <section class="factor-list" id="factorList"></section>

      <section class="metrics" id="metrics">
        <article class="metric-card">
          <h2>P(doom)</h2>
          <div class="metric-value" id="midpointEstimate">–</div>
          <div class="uncertainty-note">Your best guess, ignoring uncertainty.</div>
        </article>
        <article class="metric-card">
          <h2>10th percentile</h2>
          <div class="metric-value" id="p10">–</div>
          <div class="uncertainty-note">An optimistic outcome, given your uncertainty.</div>
        </article>
        <article class="metric-card">
          <h2>90th percentile</h2>
          <div class="metric-value" id="p90">–</div>
          <div class="uncertainty-note">A pessimistic outcome, given your uncertainty.</div>
        </article>
        <article class="metric-card">
          <h2>Range</h2>
          <div class="metric-value" id="range">–</div>
          <div class="uncertainty-note">Full range of possible outcomes.</div>
        </article>
      </section>

      <section class="driver-message" id="driverMessage">
        Stage with the widest probability range will be highlighted here.
      </section>

      <section class="submission" id="submission">
        <button class="primary-button" id="submitParametersButton" type="button">Register your prediction</button>
        <p class="submission-note">
          Your answers join a
          <a class="stats-link" href="{{ '/stats/' | relative_url }}">public dataset</a>.
        </p>
        <p class="submission-status" id="submissionStatus" aria-live="polite"></p>
        <div class="exhibit-result" id="exhibitResult" hidden></div>
      </section>
    </div>

    <p class="footer-note">
      Stephen Hawking cautioned: "The development of full artificial intelligence could spell the end of the human race."
    </p>

    <script type="application/json" id="exhibitsData">
      {{ site.data.exhibits | jsonify }}
    </script>

    <div class="wizard-welcome-actions" id="wizardWelcomeActions">
      <button class="quiet-button" type="button" id="wizardResetButton">Reset saved answers</button>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script>
    const SUPABASE_URL = window.SUPABASE_URL;
    const SUPABASE_ANON_KEY = window.SUPABASE_ANON_KEY;
    const SUBMISSIONS_TABLE = 'submissions';

    // ?developer=1 builds and signs the submission exactly as normal but stops short
    // of the insert, so the live table stays clean while working on the page. A bare
    // ?developer counts too; ?developer=0 does not.
    const DEVELOPER_MODE = (() => {
      const value = new URLSearchParams(window.location.search).get('developer');
      return value !== null && value !== '0' && value !== 'false';
    })();
    let supabaseClient = null;
    let latestSnapshot = null;
    let latestQuizData = null;

    const config = [
      {
        key: 'powerfulAi',
        label: 'P(powerful AI)',
        explanation: 'Probability that at least one deployable model or toolchain (model, agents, tools, scaling) reaches strategic capability.',
        defaults: { lower: 0.4, upper: 0.6 }
      },
      {
        key: 'dangerousBehavior',
        label: 'P(dangerous behavior | powerful AI)',
        explanation: 'Given such a system exists, what is the chance it is misaligned with human values?',
        defaults: { lower: 0.4, upper: 0.6 }
      },
      {
        key: 'globalCatastrophe',
        label: 'P(global catastrophe | dangerous behavior)',
        explanation: 'Probability that misalignment leads to an unrecoverable global catastrophe.',
        defaults: { lower: 0.4, upper: 0.6 }
      }
    ];

    const knowledgeCheckQuestions = [
      {
        id: 'phase1',
        prompt: 'Select every entry that is AI related. “Check my answers” then reveals the facts.',
        type: 'multi-select',
        options: [
          {
            id: 'paperclip-maximizer',
            text: 'Paperclip maximizer',
            fact: 'Nick Bostrom popularized this thought experiment as a warning about misaligned superintelligence optimizing for the wrong goal.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Instrumental_convergence',
            aiRelated: true
          },
          {
            id: 'operation-paperclip',
            text: 'Operation Paperclip',
            fact: 'Operation Paperclip was a U.S. intelligence program that relocated more than 1,600 German scientists after World War II.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Operation_Paperclip',
            aiRelated: false
          },
          {
            id: 'attention-is-all-you-need',
            text: 'Attention Is All You Need',
            fact: 'The 2017 paper that introduced the Transformer architecture powering modern large language models.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Attention_Is_All_You_Need',
            aiRelated: true
          },
          {
            id: 'all-you-need-is-love',
            text: 'All You Need Is Love',
            fact: 'A 1967 Beatles single celebrating peace and love rather than neural nets.',
            wikiUrl: 'https://en.wikipedia.org/wiki/All_You_Need_Is_Love',
            aiRelated: false
          },
          {
            id: 'the-real-slim-shady',
            text: 'May I have your attention, please?',
            fact: 'The opening line from Eminem\'s 2000 single "The Real Slim Shady."',
            wikiUrl: 'https://en.wikipedia.org/wiki/The_Real_Slim_Shady',
            aiRelated: false
          },
          {
            id: 'adhd',
            text: 'Attention deficit hyperactivity disorder',
            fact: 'A neurodevelopmental disorder treated by clinicians, not an AI concept.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Attention_deficit_hyperactivity_disorder',
            aiRelated: false
          },
          {
            id: 'john-von-neumann',
            text: 'John von Neumann',
            fact: 'Stanislaw Ulam attributed the first use of the term "Singularity" to von Neumann, referring to a point where technological progress becomes too fast for humans to comprehend.',
            wikiUrl: 'https://en.wikipedia.org/wiki/John_von_Neumann',
            aiRelated: true
          },
          {
            id: 'alan-turing',
            text: 'Alan Turing',
            fact: 'Pioneer of computer science and namesake of the Turing test for machine intelligence.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Alan_Turing',
            aiRelated: true
          },
          {
            id: 'mary-shelley',
            text: 'Mary Shelley',
            fact: 'Author of "Frankenstein," one of the earliest stories about an artificial being.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Mary_Shelley',
            aiRelated: true
          },
          {
            id: 'isaac-asimov',
            text: 'Isaac Asimov',
            fact: 'Science-fiction writer who coined the Three Laws of Robotics.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Isaac_Asimov',
            aiRelated: true
          },
          {
            id: 'schrodingers-cat',
            text: "Schrödinger's cat",
            fact: 'A thought experiment in quantum mechanics by Erwin Schrödinger, not an AI concept.',
            wikiUrl: "https://en.wikipedia.org/wiki/Schr%C3%B6dinger's_cat",
            aiRelated: false
          },
          {
            id: 'james-bond',
            text: 'James Bond',
            fact: 'Ian Fleming\'s fictional British spy, not an AI agent.',
            wikiUrl: 'https://en.wikipedia.org/wiki/James_Bond',
            aiRelated: false
          },
          {
            id: 'agent',
            text: 'Agent',
            fact: 'In AI, agents perceive, plan, and act within an environment or toolchain.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Intelligent_agent',
            aiRelated: true
          },
          {
            id: 'agent-orange',
            text: 'Agent Orange',
            fact: 'A herbicide and defoliant used by the U.S. military during the Vietnam War, infamous for its health impacts, not an AI “agent.”',
            wikiUrl: 'https://en.wikipedia.org/wiki/Agent_Orange',
            aiRelated: false
          },
          {
            id: 'red-team',
            text: 'Red team',
            fact: 'Red teaming is a technique used to test the robustness of a model or agent by exposing it to adversarial examples.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Red-teaming',
            aiRelated: true
          },
          {
            id: 'standard-model',
            text: 'The Standard Model',
            fact: 'The prevailing theory describing elementary particles in physics. Unrelated to AI.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Standard_Model',
            aiRelated: false
          },
          {
            id: 'wireframe-model',
            text: 'Wire-frame model',
            fact: 'A computer-graphics technique for representing 3D shapes. Unrelated to AI.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Wire-frame_model',
            aiRelated: false
          },
          {
            id: 'latent-space',
            text: 'Latent space',
            fact: 'The hidden representation of data in a high-dimensional space. Used in AI.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Latent_space',
            aiRelated: true
          },
          {
            id: 'reward-hacking',
            text: 'Reward hacking',
            fact: 'When an AI system exploits flaws in its reward function or metrics to achieve high reward without doing what was intended.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Reward_hacking',
            aiRelated: true
          },
          {
            id: 'training-data',
            text: 'Training data',
            fact: 'Datasets used to fit and evaluate machine learning models.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Training,_validation,_and_test_data_sets',
            aiRelated: true
          },
          {
            id: 'personal-trainer',
            text: 'Personal trainer',
            fact: 'A fitness professional who coaches workouts, not an AI term.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Personal_trainer',
            aiRelated: false
          },
          {
            id: 'overfitting',
            text: 'Overfitting',
            fact: 'Overfitting is a phenomenon in machine learning where a model learns the training data too well, resulting in poor performance on new data.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Overfitting',
            aiRelated: true
          },
          {
            id: 'cherenkov-radiation',
            text: 'Cherenkov Radiation',
            fact: 'A type of radiation emitted when a charged particle travels faster than the speed of light in a medium.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Cherenkov_radiation',
            aiRelated: false
          },
          {
            id: 'moire-pattern',
            text: 'Moiré pattern',
            fact: 'A pattern of interference fringes caused by the superposition of two periodic grids, not an AI concept.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Moir%C3%A9_pattern',
            aiRelated: false
          },
          {
            id: 'backpropagation',
            text: 'Backpropagation',
            fact: 'The standard algorithm for training neural networks by propagating error gradients backward through the layers.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Backpropagation',
            aiRelated: true
          },
          {
            id: 'unsupervised-learning',
            text: 'Unsupervised learning',
            fact: 'An ML paradigm where models discover structure without labeled targets.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Unsupervised_learning',
            aiRelated: true
          },
          {
            id: 'clinical-supervisor',
            text: 'Clinical supervisor',
            fact: 'A senior clinician overseeing the work of trainees, unrelated to AI.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Clinical_supervision',
            aiRelated: false
          },
          {
            id: 'magnus-effect',
            text: 'Magnus effect',
            fact: 'The effect of a spinning object being deflected by the air or fluid around it, not an AI concept.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Magnus_effect',
            aiRelated: false
          },
          {
            id: 'reinforced-concrete',
            text: 'Reinforced concrete',
            fact: 'A construction material in which concrete is embedded with steel reinforcement (rebar) to increase tensile strength.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Reinforced_concrete',
            aiRelated: false
          },
          {
            id: 'hallucination',
            text: 'Hallucination',
            fact: 'In AI, this refers to a confident response by a model that is not justified by its training data.',
            wikiUrl: 'https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)',
            aiRelated: true
          }
        ]
      }
    ];

    const levelJumpRules = [
      { min: 0, max: 20, flowId: 'beginner' },
      { min: 21, max: 25, flowId: 'medium' },
      { min: 26, max: 30, flowId: 'expert' }
    ];

    const quizFlows = [
      // The expert gate. Not offered as a card — reaching it means the visitor
      // asked for the expert quiz, and the score decides which level we then
      // recommend. Advisory: the expert quiz stays available either way.
      {
        id: 'expert-check',
        label: 'Expert check',
        description: 'Spot the AI-related terms and avoid the decoys.',
        meta: '30 terms · ~5 minutes',
        hiddenFromChooser: true,
        kind: 'knowledge-check',
        questions: knowledgeCheckQuestions
      },
      {
        id: 'beginner',
        label: 'Beginner quiz',
        description: 'Start here if the vocabulary of AI risk is new to you.',
        meta: '4 questions · ~5 minutes',
        kind: 'fixed',
        completionMessage: 'Nice! This beginner path keeps uncertainty wide while you learn.',
        questions: [
        {
            id: 'beginner-entertainment',
            type: 'multi-select',
            prompt: 'Which AI-related entertainment have you encountered? (Select all that apply.)',
            link: 'https://en.wikipedia.org/wiki/Category:Films_about_artificial_intelligence',
            options: [
              { id: 'entertainment-blackmirror', label: 'Black Mirror', link: 'https://en.wikipedia.org/wiki/Black_Mirror' },
              { id: 'entertainment-matrix', label: 'The Matrix', link: 'https://en.wikipedia.org/wiki/The_Matrix' },
              { id: 'entertainment-terminator', label: 'Terminator', link: 'https://en.wikipedia.org/wiki/Terminator_(franchise)' },
              { id: 'entertainment-blade-runner', label: 'Blade Runner', link: 'https://en.wikipedia.org/wiki/Blade_Runner_(franchise)' },
              { id: 'entertainment-alien', label: 'Alien (Ash, Bishop, Call, David, Walter)', link: 'https://en.wikipedia.org/wiki/Alien_(franchise)' },
              { id: 'entertainment-ex-machina', label: 'Ex Machina', link: 'https://en.wikipedia.org/wiki/Ex_Machina_(film)' },
              { id: 'entertainment-pantheon', label: 'Pantheon', link: 'https://en.wikipedia.org/wiki/Pantheon_(TV_series)' },
              { id: 'entertainment-irobot', label: 'I, Robot', link: 'https://en.wikipedia.org/wiki/I,_Robot_(film)' },
              { id: 'entertainment-her', label: 'Her', link: 'https://en.wikipedia.org/wiki/Her_(2013_film)' },
              { id: 'entertainment-startrek', label: 'Star Trek (Data, The Borg)', link: 'https://en.wikipedia.org/wiki/Star_Trek' },
              { id: 'entertainment-starwars', label: 'Star Wars (R2-D2, C-3PO)', link: 'https://en.wikipedia.org/wiki/Star_Wars' },
              { id: 'entertainment-2001', label: '2001: A Space Odyssey (HAL 9000)', link: 'https://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(film)' },
              { id: 'entertainment-judgedredd', label: 'Judge Dredd', link: 'https://en.wikipedia.org/wiki/Judge_Dredd' },
              { id: 'entertainment-robocop', label: 'RoboCop', link: 'https://en.wikipedia.org/wiki/RoboCop' },
              { id: 'entertainment-ghostintheshell', label: 'Ghost in the Shell (Motoko Kusanagi)', link: 'https://en.wikipedia.org/wiki/Ghost_in_the_Shell' },
              { id: 'entertainment-westworld', label: 'Westworld (Arnold, Dolores, Bernard, Maeve)', link: 'https://en.wikipedia.org/wiki/Westworld_(TV_series)' },
              { id: 'entertainment-trumanshow', label: 'The Truman Show', link: 'https://en.wikipedia.org/wiki/The_Truman_Show' },
              { id: 'entertainment-wargames', label: 'Wargames', link: 'https://en.wikipedia.org/wiki/WarGames' },
              { id: 'entertainment-transcendence', label: 'Transcendence', link: 'https://en.wikipedia.org/wiki/Transcendence_(2014_film)' },
              { id: 'entertainment-wall-e', label: 'Wall-E', link: 'https://en.wikipedia.org/wiki/WALL-E' },
              { id: 'entertainment-silo', label: 'Silo (The Algorithm)', link: 'https://en.wikipedia.org/wiki/Silo_(TV_series)' },
              { id: 'entertainment-neuromancer', label: 'Neuromancer (Wintermute)', link: 'https://en.wikipedia.org/wiki/Neuromancer' },
              { id: 'entertainment-foundation', label: 'Foundation (Demerzel)', link: 'https://en.wikipedia.org/wiki/Foundation_(Asimov)' },
              { id: 'entertainment-murderbot', label: 'Murderbot', link: 'https://en.wikipedia.org/wiki/Murderbot_(TV_series)' },
              { id: 'entertainment-portal', label: 'Portal (GlaDOS)', link: 'https://en.wikipedia.org/wiki/Portal_(video_game)' },
              { id: 'entertainment-hitchhikersguide', label: 'The Hitchhiker\'s Guide to the Galaxy (Marvin)', link: 'https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy_(film)' },
              { id: 'entertainment-ironman', label: 'Iron Man (J.A.R.V.I.S.)', link: 'https://en.wikipedia.org/wiki/J.A.R.V.I.S.' },
              { id: 'entertainment-eagle-eye', label: 'Eagle Eye (ARIIA)', link: 'https://en.wikipedia.org/wiki/Eagle_Eye' }
            ]
          },
          {
            id: 'beginner-catastrophes',
            type: 'multi-select',
            prompt: 'Which catastrophic events do you know about? (Select all that apply.)',
            options: [
              {
                id: 'catastrophe-supervulcano',
                label: 'Supervolcano',
                description: 'Mega-eruptions like Yellowstone that could blanket continents in ash.',
                link: 'https://en.wikipedia.org/wiki/Supervolcano'
              },
              {
                id: 'catastrophe-supernova',
                label: 'Supernova',
                description: 'Explosive death of a star that can outshine entire galaxies.',
                link: 'https://en.wikipedia.org/wiki/Supernova'
              },
              {
                id: 'catastrophe-gamma-ray-burst',
                label: 'Gamma-ray burst',
                description: 'Extremely bright, transient flashes of gamma radiation.',
                link: 'https://en.wikipedia.org/wiki/Gamma-ray_burst'
              },
              {
                id: 'catastrophe-impactevent',
                label: 'Asteroid or comet impact',
                description: 'Throws dust into the atmosphere, disrupting climate.',
                link: 'https://en.wikipedia.org/wiki/Impact_event'
              },
              {
                id: 'catastrophe-geomagneticstorm',
                label: 'Geomagnetic storm',
                description: 'Damage satellites and collapse electrical grids.',
                link: 'https://en.wikipedia.org/wiki/Geomagnetic_storm'
              },
              {
                id: 'catastrophe-pandemic',
                label: 'Pandemic',
                description: 'Global spread of a highly transmissible or highly lethal pathogen.',
                link: 'https://en.wikipedia.org/wiki/Pandemic'
              },
              {
                id: 'catastrophe-climatechange',
                label: 'Climate change',
                description: 'Rising sea levels, extreme weather, disruptions to food systems, infrastructure, and habitability.',
                link: 'https://en.wikipedia.org/wiki/Climate_change'
              },
              {
                id: 'catastrophe-nuclearwar',
                label: 'Nuclear war',
                description: 'Large-scale nuclear conflict that could kill billions.',
                link: 'https://en.wikipedia.org/wiki/Nuclear_warfare'
              },
              {
                id: 'catastrophe-weaponofmassdestruction',
                label: 'Weapon of mass destruction (WMD)',
                description: 'Chemical, biological, radiological, nuclear, or any other weapon that can do great damage.',
                link: 'https://en.wikipedia.org/wiki/Weapon_of_mass_destruction'
              },
              {
                id: 'catastrophe-xriskai',
                label: 'Extinction or collapse from AI',
                description: 'Human extinction or irreversible civilizational collapse.',
                link: 'https://en.wikipedia.org/wiki/Existential_risk_from_artificial_intelligence'
              },
              {
                id: 'catastrophe-sriskai',
                label: 'Astronomical suffering from AI (s-risks)',
                description: 'AI locks in vast amounts of suffering for many beings over long timescales.',
                link: 'https://en.wikipedia.org/wiki/Risk_of_astronomical_suffering'
              },
              {
                id: 'catastrophe-unknownunknowns',
                label: 'Unknown unknowns',
                description: 'Things we don’t know that we don’t know.',
                link: 'https://en.wikipedia.org/wiki/There_are_unknown_unknowns'
              },
            ]
          },
          {
            id: 'beginner-capability',
            type: 'multi-select',
            prompt: 'Which AI capabilities do you know about? (Select all that apply.)',
            options: [
              {
                id: 'capability-protein-folding', 
                label: 'Protein folding',
                description: 'The process of a protein folding into its three-dimensional structure, for use in biology.',
                link: 'https://en.wikipedia.org/wiki/Protein_folding'
              },
              {
                id: 'capability-companion', 
                label: 'Companion',
                description: 'Be a partner or friend.',
                link: 'https://en.wikipedia.org/wiki/Artificial_human_companion'
              },
              {
                id: 'capability-warfare', 
                label: 'Warfare',
                description: 'Control weapons and kill people.',
                link: 'https://en.wikipedia.org/wiki/Lethal_autonomous_weapon'
              },
              { 
                id: 'capability-programming', 
                label: 'Programming',
                description: 'Write code to solve problems.',
                link: 'https://en.wikipedia.org/wiki/AI-assisted_software_development'
              },
              { 
                id: 'capability-mass-surveillance', 
                label: 'Mass surveillance',
                description: 'Monitoring of large populations.',
                link: 'https://en.wikipedia.org/wiki/Mass_surveillance'
              },
              { 
                id: 'capability-trading', 
                label: 'Trading',
                description: 'Buy and sell stocks, commodities, and other assets.',
                link: 'https://en.wikipedia.org/wiki/Algorithmic_trading'
              },
              { 
                id: 'capability-research', 
                label: 'AI Research',
                description: 'Conduct scientific research about AI.',
                link: 'https://en.wikipedia.org/wiki/Research'
              },
              { 
                id: 'capability-propaganda', 
                label: 'Propaganda',
                description: 'Write misinformation and propaganda to influence humans.',
                link: 'https://en.wikipedia.org/wiki/Propaganda'
              }
            ]
          },
          {
            id: 'beginner-control',
            prompt: 'If AI starts doing dangerous things, what is your gut reaction?',
            options: [
              { 
                id: 'control-easy', 
                label: 'The AI can easily be shut down.',
                description: 'Humans control the electricity, internet, and physical access to the servers.' 
              },
              { 
                id: 'control-medium', 
                label: 'Takes some effort to stop, but is manageable.',
                description: 'Backups will have to be destroyed so the AI cannot be restored. The power may have to be cut off for several days. It may span across multiple countries.' 
              },
              { 
                id: 'control-impossible', 
                label: 'It would likely outsmart our attempts to stop it.',
                description: 'Like ants trying to capture a human.' 
              }
            ]
          }
        ]
      },
      {
        id: 'medium',
        label: 'Medium quiz',
        description: 'For folks who use LLMs daily, or debate alignment with friends.',
        meta: '6 questions · ~5 minutes',
        kind: 'fixed',
        completionMessage: 'Welcome back! We tightened the sliders a bit to match your reps.',
        questions: [
          {
            id: 'medium-vulnerabilities',
            prompt: 'What vulnerabilities do you know about? (Select all that apply.)',
            type: 'multi-select',
            options: [
              {
                id: 'medium-vulnerabilities-phishing', 
                label: 'Phishing',
                description: 'Tricking people via email or messages into giving up credentials or sensitive data.',
                link: 'https://en.wikipedia.org/wiki/Phishing'
              },
              { 
                id: 'medium-vulnerabilities-social-engineering', 
                label: 'Social engineering',
                description: 'Manipulating people into revealing information or doing something they wouldn’t normally do.',
                link: 'https://en.wikipedia.org/wiki/Social_engineering_(security)'
              },
              {
                id: 'medium-vulnerabilities-malware', 
                label: 'Malware',
                description: 'Software designed to damage systems or gain unauthorized access.',
                link: 'https://en.wikipedia.org/wiki/Malware'
              },
              {
                id: 'medium-vulnerabilities-ransomware',
                label: 'Ransomware',
                description: 'Malware that encrypts files and demands payment to restore access.',
                link: 'https://en.wikipedia.org/wiki/Ransomware'
              },
              {
                id: 'medium-vulnerabilities-supply-chain',
                label: 'Supply chain attack',
                description: 'Compromising a third-party vendor, service, or library to infiltrate a target.',
                link: 'https://en.wikipedia.org/wiki/Supply_chain_attack'
              },
              {
                id: 'medium-vulnerabilities-mitm',
                label: 'Man-in-the-middle (MitM)',
                description: 'An attacker secretly intercepts and relays messages between two parties who think they talk directly.',
                link: 'https://en.wikipedia.org/wiki/Man-in-the-middle_attack'
              },
              {
                id: 'medium-vulnerabilities-insider-threat',
                label: 'Insider threat',
                description: 'A security risk coming from someone inside the organization, like a disgruntled employee.',
                link: 'https://en.wikipedia.org/wiki/Insider_threat'
              },
              {
                id: 'medium-vulnerabilities-zero-day',
                label: 'Zero day',
                description: 'A vulnerability unknown to the vendor/public and often exploited before a fix exists.',
                link: 'https://en.wikipedia.org/wiki/Zero-day_vulnerability'
              },
              {
                id: 'medium-vulnerabilities-injection',
                label: 'Injection attacks (SQL, JS, Python, Ruby, Command line)',
                description: 'Untrusted data is treated as code/commands and executed by the system.',
                link: 'https://en.wikipedia.org/wiki/Code_injection'
              },
              {
                id: 'medium-vulnerabilities-prompt-injection', 
                label: 'Prompt injection',
                description: 'Malicious inputs that override an AI system’s instructions or cause it to behave unsafely.',
                link: 'https://en.wikipedia.org/wiki/Prompt_injection'
              },
              {
                id: 'medium-vulnerabilities-sleeper-agent', 
                label: 'Sleeper agent',
                description: 'An AI system that behaves normally until a specific trigger causes hidden behavior.',
                link: 'https://en.wikipedia.org/wiki/Sleeper_agent'
              },
              {
                id: 'medium-vulnerabilities-data-poisoning',
                label: 'Data poisoning',
                description: 'Corrupting training data so the AI model learns harmful or incorrect behavior.',
                link: 'https://en.wikipedia.org/wiki/Adversarial_machine_learning#Data_poisoning'
              },
              {
                id: 'medium-vulnerabilities-adversarial',
                label: 'Adversarial attack',
                description: 'Subtle inputs (like noise on an image) designed to deceive an AI model into making a specific mistake.',
                link: 'https://en.wikipedia.org/wiki/Adversarial_machine_learning'
              },
              {
                id: 'medium-vulnerabilities-model-stealing',
                label: 'Model stealing',
                description: 'Reconstructing or exfiltrating a model (e.g., via an API) to obtain your own copy.'
              },
              {
                id: 'medium-vulnerabilities-obfuscation',
                label: 'Obfuscation / Steganography',
                description: 'Making code unreadable or hiding malicious data inside benign files like a cute cat image.',
                link: 'https://en.wikipedia.org/wiki/Obfuscation_(software)'
              },
              {
                id: 'medium-vulnerabilities-side-channel',
                label: 'Side-channel attack',
                description: 'Extracting secrets like passwords from signals such as timing, power use, or EM leaks.',
                link: 'https://en.wikipedia.org/wiki/Side-channel_attack'
              }
            ]
          },
          {
            id: 'medium-system-prompts',
            prompt: 'How familiar are you with system prompts?',
            link: 'https://en.wikipedia.org/wiki/Large_language_model',
            options: [
              {
                id: 'medium-system-prompts-none',
                label: 'I don’t know what a system prompt is',
                description: 'I use AI without thinking about this, or I don’t use AI.'
              },
              {
                id: 'medium-system-prompts-basic',
                label: 'Basic understanding of system prompts',
                description: 'I have used system prompts a few times.'
              },
              {
                id: 'medium-system-prompts-medium',
                label: 'I regularly use system prompts',
                description: 'I have used system prompts many times.'
              },
              {
                id: 'medium-system-prompts-expert',
                label: 'I\'m an expert at using system prompts',
                description: 'I can get the model to do whatever I want.'
              }
            ]
          },
          {
            id: 'medium-off-the-rails',
            prompt: 'Have you experienced AI going “off the rails” (unsafe, wrong, uncontrolled)?',
            link: 'https://en.wikipedia.org/wiki/AI_alignment',
            options: [
              {
                id: 'medium-off-the-rails-never',
                label: 'Never',
                description: 'I haven’t personally seen a model behave in a clearly wrong or unsafe way.'
              },
              {
                id: 'medium-off-the-rails-low',
                label: 'A few times',
                description: 'I have seen a few questionable responses from thea model.'
              },
              {
                id: 'medium-off-the-rails-high',
                label: 'Several times',
                description: 'I regularly see responses that are clearly wrong, harmful, or out of control.'
              },
              {
                id: 'medium-off-the-rails-bypass',
                label: 'Bypassed safety filters',
                description: 'I’ve intentionally pushed or jailbroken a model to produce clearly unsafe or disallowed content.'
              }
            ]
          },
          {
            id: 'medium-competition',
            prompt: 'Competition and lower barriers to entry. How does it impact safety?',
            link: 'https://en.wikipedia.org/wiki/Artificial_intelligence_arms_race',
            options: [
              {
                id: 'medium-competition-positive',
                label: 'It improves safety (Innovation)',
                description: 'Competition generates resources. Profitable companies can afford to invest billions into alignment research and defensive measures.',
                score: 1
              },
              {
                id: 'medium-competition-neutral',
                label: 'Neutral / Unsure',
                description: 'Some dynamics may improve safety and others may worsen it; overall impact is uncertain or roughly balanced.',
                score: 0
              },
              {
                id: 'medium-competition-negative',
                label: 'It degrades safety (Race to the Bottom)',
                description: 'Reckless prioritizing of profit/speed over safe/slow.',
                link: 'https://en.wikipedia.org/wiki/Race_to_the_bottom',
                score: -1
              },
            ]
          },
          {
            id: 'medium-governance',
            prompt: 'Can governance and regulation realistically keep AI safe?',
            link: 'https://en.wikipedia.org/wiki/Regulation_of_artificial_intelligence',
            options: [
              {
                id: 'medium-governance-yes',
                label: 'Yes, regulation can keep up',
                description: 'Laws, treaties, and industry standards can be adapted fast enough to manage the risks.',
                score: 1
              },
              {
                id: 'medium-governance-neutral',
                label: 'Neutral / Unsure',
                description: 'Regulation helps but may not be sufficient on its own.',
                score: 0
              },
              {
                id: 'medium-governance-no',
                label: 'No, AI moves too fast for regulators',
                description: 'Technology outpaces legislation; rules arrive after the damage is done.',
                score: -1
              }
            ]
          },
          {
            id: 'medium-speed',
            prompt: 'If AI can execute a complex financial attack in 1 second, can humans stop it in time?',
            link: 'https://en.wikipedia.org/wiki/OODA_loop',
            options: [
              {
                id: 'medium-speed-no-risk',
                label: 'Yes, humans can stop it in time.',
                description: 'There is no risk of the OODA loop collapsing.',
                score: 1
              },
              {
                id: 'medium-speed-risk',
                label: 'No, humans cannot stop it in time.',
                description: 'The "speed of the loop" determines the winner in a conflict.',
                score: -1
              }
            ]
          }
        ]
      },
      {
        id: 'expert',
        label: 'Expert quiz',
        description: 'For people who follow AI safety research closely.',
        cardNote: 'Opens with a short check that you know the field.',
        meta: '8 questions · ~10 minutes',
        kind: 'fixed',
        completionMessage: 'Expert mode engaged. We pinned the sliders tighter so your signals stay crisp.',
        questions: [
          {
            id: 'expert-continuous-learning',
            prompt: 'How familiar are you with "Continuous Learning"? (Select all that apply.)',
            link: 'https://en.wikipedia.org/wiki/Online_machine_learning',
            type: 'multi-select',
            options: [
              {
                id: 'expert-continuous-learning-rag',
                label: 'Retrieval-augmented generation (RAG)',
                description: 'Static knowledge cutoff, dynamic info, no weight updates; safer.',
                link: 'https://en.wikipedia.org/wiki/Retrieval-augmented_generation'
              },
              {
                id: 'expert-continuous-learning-tool-based',
                label: 'Tool-based knowledge, call a search engine or API',
                description: 'Static knowledge cutoff, dynamic capabilities, but still no weight updates.'
              },
              {
                id: 'expert-continuous-learning-finetuning',
                label: 'Continuous learning from user, logs, internet data, tool outputs',
                description: 'Once a model keeps changing itself after you ship it, you stop knowing what the hell you’re actually running. Safety escalation.',
                link: 'https://en.wikipedia.org/wiki/Incremental_learning'
              }
            ]
          },
          {
            id: 'expert-self-improvement',
            prompt: 'How familiar are you with "Self Improvement"? (Select all that apply.)',
            type: 'multi-select',
            options: [
              {
                id: 'expert-self-improvement-prompting',
                label: 'Optimize prompts using AI',
                description: 'Strengthen a weak prompt for higher quality responses.',
                link: 'https://en.wikipedia.org/wiki/Prompt_engineering'
              },
              {
                id: 'expert-self-improvement-coding',
                label: 'AI coding',
                description: 'Shorten development time. Non-developers can code too.',
                link: 'https://en.wikipedia.org/wiki/Vibe_coding'
              },
              {
                id: 'expert-self-improvement-synthetic-data',
                label: 'Synthetic data generation',
                description: 'Generate high-quality training data to train the next version of itself.',
                link: 'https://en.wikipedia.org/wiki/Synthetic_data'
              },
              {
                id: 'expert-self-improvement-rewrite-itself',
                label: 'Rewrite itself',
                description: 'Change its own behavior (weights, prompts, or architecture). Safety escalation.',
                link: 'https://en.wikipedia.org/wiki/Recursive_self-improvement',
              }
            ]
          },
          {
            id: 'expert-self-replication',
            prompt: 'How familiar are you with "Self Replication"? (Select all that apply.)',
            type: 'multi-select',
            link: 'https://en.wikipedia.org/wiki/Self-replicating_machine',
            options: [
              {
                id: 'expert-self-replication-biology',
                label: 'Biological self-replication',
                description: 'Cells and organisms replicate themselves: DNA replication, reproduction, population growth.',
                link: 'https://en.wikipedia.org/wiki/Cell_growth'
              },
              {
                id: 'expert-self-replication-cellular-automata',
                label: 'Cellular automata',
                description: 'Game-of-life is a simple example.',
                link: 'https://en.wikipedia.org/wiki/Cellular_automaton'
              },
              {
                id: 'expert-self-replication-software',
                label: 'Software',
                description: 'Computer viruses that can spread themselves, and may have an AI payload with it.',
                link: 'https://en.wikipedia.org/wiki/Computer_virus'
              },
              {
                id: 'expert-self-replication-3d-printing',
                label: 'Hardware',
                description: '3D printers that can print their own structural parts, like the RepRap project.',
                link: 'https://en.wikipedia.org/wiki/3D_printing'
              },
              {
                id: 'expert-self-replication-von-neumann-probe',
                label: 'Von Neumann probe',
                description: 'A self-replicating probe that can explore other planets and systems. Theoretical.',
                link: 'https://en.wikipedia.org/wiki/Von_Neumann_probe'
              }
            ]
          },
          {
            id: 'expert-campaign-organisations',
            prompt: 'Which of these "Campaigns Organisations" are you familiar with? (Select all that apply.)',
            type: 'multi-select',
            options: [
              {
                id: 'expert-campaign-organisations-pauseai',
                label: 'PauseAI',
                description: 'We demand politicians and companies pause AGI development until international safety agreements are established.',
                link: 'https://pauseai.info/'
              },
              {
                id: 'expert-campaign-organisations-controlai',
                label: 'ControlAI',
                description: 'Reduce the risks to humanity from AI.',
                link: 'https://controlai.com/'
              },
              {
                id: 'expert-campaign-organisations-microcommit',
                label: 'Microcommit',
                description: 'A global coordination deal to deal with catastrophic risks from AI.',
                link: 'https://microcommit.io/'
              }
            ]
          },
          {
            id: 'expert-research-organisations',
            prompt: 'Which of these "Research Organisations" are you familiar with? (Select all that apply.)',
            type: 'multi-select',
            options: [
              {
                id: 'expert-research-organisations-aisi',
                label: 'Artificial Intelligence Security Institute (UK)',
                description: 'Equipping governments with a scientific understanding of advanced AI risks.',
                link: 'https://www.aisi.gov.uk/'
              },
              {
                id: 'expert-research-organisations-redwood-research',
                label: 'Redwood Research',
                description: 'Pioneering threat assessment and mitigation for AI systems.',
                link: 'https://www.redwoodresearch.org/'
              }
            ]
          },
          {
            id: 'expert-commentators',
            prompt: 'Which of these "Commentators" are you familiar with? (Select all that apply.)',
            type: 'multi-select',
            options: [
              {
                id: 'expert-commentators-doom-debates',
                label: 'Doom Debates',
                description: 'Raise mainstream awareness of imminent extinction from AGI. Build social infrastructure for high-quality debate.',
                link: 'https://www.youtube.com/@doomdebates'
              },
              {
                id: 'expert-commentators-dont-worry-about-the-vase',
                label: 'Don\'t Worry About the Vase',
                description: 'Covers catastrophic and existential risk from AI.',
                link: 'https://thezvi.substack.com/'
              }
            ]
          },
          {
            id: 'expert-content-creators',
            prompt: 'Which of these "Content Creators" are you familiar with? (Select all that apply.)',
            type: 'multi-select',
            options: [
              {
                id: 'expert-content-creators-robert-miles',
                label: 'Robert Miles',
                description: 'Explains the dangers of AI in a way that is easy to understand.',
                link: 'https://www.youtube.com/@RobertMilesAI'
              },
              {
                id: 'expert-content-creators-siliconversations',
                label: 'Siliconversations',
                description: 'Stick figures explaining the dangers of AI.',
                link: 'https://www.youtube.com/@Siliconversations'
              },
              {
                id: 'expert-content-creators-lethal-intelligence',
                label: 'Lethal Intelligence',
                description: 'Explains the dangers of AI in a way that is easy to understand.',
                link: 'https://www.youtube.com/@lethal-intelligence'
              },
              {
                id: 'expert-content-creators-rational-animations',
                label: 'Rational Animations',
                description: 'Cute cartoons explaining the dangers of AI.',
                link: 'https://www.youtube.com/RationalAnimations'
              },
              {
                id: 'expert-content-creators-axiomatic-extinction',
                label: 'Axiomatic Extinction',
                description: 'Hardcore doom.',
                link: 'https://www.axiomaticextinction.com/'
              }
            ]
          },
          {
            id: 'expert-money-alignment',
            prompt: 'How much money should we be spending on technical alignment research?',
            link: 'https://en.wikipedia.org/wiki/AI_alignment',
            options: [
              {
                id: 'expert-money-alignment-capabilities',
                label: 'We should be spending that money on researching capabilities'
              },
              {
                id: 'expert-money-accelerating-defensive-technologies',
                label: 'We should be spending that money on accelerating defensive technologies'
              },
              {
                id: 'expert-money-spending-about-right',
                label: 'We are spending about the right amount'
              },
              {
                id: 'expert-money-not-spending-enough',
                label: 'We are not spending enough money'
              },
              {
                id: 'expert-money-stop-funding-all-ai-research',
                label: 'We should stop funding all AI research including alignment'
              }
            ]
          }
        ]
      },
      // Reached by finishing a quiz. Not offered as a way to skip one: no chooser
      // card and no breadcrumb. The #sliders hash still resolves here so that
      // reloading or going back after a quiz returns the visitor to their result.
      {
        id: 'sliders',
        label: 'Sliders',
        description: 'Tweak the P(doom) parameters directly.',
        meta: 'Manual control',
        hiddenFromChooser: true,
        kind: 'sliders',
        questions: []
      }
    ];

    // The curve colours live in the stylesheet so the canvas cannot drift from the
    // rest of the page -- and so a later dark mode would fix the canvas for free.
    // Resolved once and cached; getComputedStyle is not cheap enough to call per frame.
    let curveColors = null;
    function readCurveColors() {
      if (curveColors) return curveColors;
      const styles = getComputedStyle(document.documentElement);
      const pick = (name, fallback) => (styles.getPropertyValue(name).trim() || fallback);
      curveColors = {
        fill: pick('--curve-fill', 'rgba(154, 52, 18, 0.10)'),
        stroke: pick('--curve-stroke', '#9a3412'),
        grid: pick('--curve-grid', '#d8d3c8'),
        midline: pick('--curve-handle', '#1c1a17'),
        handle: pick('--curve-handle', '#1c1a17')
      };
      return curveColors;
    }

    const CONFIDENCE_HIGH = 20;
    const CONFIDENCE_LOW = 80;

    const SAMPLES = 4000;
    const SPREAD_MAX = 100;
    const KEYBOARD_STEP = 1;
    const KEYBOARD_BIG_STEP = 5;
    const WIZARD_STORAGE_KEY = 'pdoom-wizard-answers-v1';
    const SLIDER_STORAGE_KEY = 'pdoom-slider-state-v1';
    const SLIDERS_CONTAINER_ID = 'slidersUi';

    // --- Visitor identity ------------------------------------------------
    // A non-extractable ECDSA P-256 keypair, generated lazily on the first
    // successful submission and kept in IndexedDB. The public key identifies the
    // browser across submissions; the private key signs each one so the grouping
    // in the published export can be verified by anyone who downloads it.
    //
    // localStorage cannot hold this: a non-extractable CryptoKey is not a string.
    // The counter shares the record so key and count cannot drift apart.
    const IDENTITY_DB_NAME = 'pdoom-identity';
    const IDENTITY_STORE = 'identity';
    const IDENTITY_RECORD_KEY = 'v1';

    function openIdentityDb() {
      return new Promise((resolve, reject) => {
        if (typeof indexedDB === 'undefined') {
          reject(new Error('IndexedDB unavailable'));
          return;
        }
        const request = indexedDB.open(IDENTITY_DB_NAME, 1);
        request.onupgradeneeded = () => {
          const db = request.result;
          if (!db.objectStoreNames.contains(IDENTITY_STORE)) {
            db.createObjectStore(IDENTITY_STORE);
          }
        };
        request.onsuccess = () => resolve(request.result);
        request.onerror = () => reject(request.error || new Error('IndexedDB open failed'));
        request.onblocked = () => reject(new Error('IndexedDB blocked'));
      });
    }

    function identityRecord(db, mode, action) {
      return new Promise((resolve, reject) => {
        const tx = db.transaction(IDENTITY_STORE, mode);
        const store = tx.objectStore(IDENTITY_STORE);
        const request = action(store);
        tx.onabort = () => reject(tx.error || new Error('IndexedDB transaction aborted'));
        request.onsuccess = () => resolve(request.result);
        request.onerror = () => reject(request.error);
      });
    }

    function base64UrlFromBytes(bytes) {
      let binary = '';
      bytes.forEach((byte) => { binary += String.fromCharCode(byte); });
      return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
    }

    function bytesFromBase64Url(value) {
      const padded = value.replace(/-/g, '+').replace(/_/g, '/');
      const binary = atob(padded + '==='.slice((padded.length + 3) % 4));
      return Uint8Array.from(binary, char => char.charCodeAt(0));
    }

    // "p256:" + base64url(x || y) taken from the public JWK. 91 characters, and
    // everything the Python verifier needs to rebuild the public key.
    function visitorKeyFromJwk(jwk) {
      const x = bytesFromBase64Url(jwk.x);
      const y = bytesFromBase64Url(jwk.y);
      const raw = new Uint8Array(x.length + y.length);
      raw.set(x, 0);
      raw.set(y, x.length);
      return 'p256:' + base64UrlFromBytes(raw);
    }

    // Returns null rather than throwing: a browser that cannot do this still
    // submits, just without an identity.
    async function loadIdentity() {
      if (typeof crypto === 'undefined' || !crypto.subtle) return null;
      let db = null;
      try {
        db = await openIdentityDb();
        const existing = await identityRecord(db, 'readonly', store => store.get(IDENTITY_RECORD_KEY));
        if (existing && existing.privateKey && existing.visitorKey) {
          return {
            privateKey: existing.privateKey,
            visitorKey: existing.visitorKey,
            submitCount: Number(existing.submitCount) || 0
          };
        }
        const pair = await crypto.subtle.generateKey(
          { name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign', 'verify']);
        const jwk = await crypto.subtle.exportKey('jwk', pair.publicKey);
        const record = {
          privateKey: pair.privateKey,
          visitorKey: visitorKeyFromJwk(jwk),
          submitCount: 0
        };
        await identityRecord(db, 'readwrite', store => store.put(record, IDENTITY_RECORD_KEY));
        return { privateKey: record.privateKey, visitorKey: record.visitorKey, submitCount: 0 };
      } catch (error) {
        console.warn('Visitor identity unavailable', error);
        return null;
      } finally {
        if (db) db.close();
      }
    }

    async function persistSubmitCount(count) {
      let db = null;
      try {
        db = await openIdentityDb();
        const existing = await identityRecord(db, 'readonly', store => store.get(IDENTITY_RECORD_KEY));
        if (!existing) return;
        existing.submitCount = count;
        await identityRecord(db, 'readwrite', store => store.put(existing, IDENTITY_RECORD_KEY));
      } catch (error) {
        console.warn('Unable to persist submit count', error);
      } finally {
        if (db) db.close();
      }
    }

    // --- DIAGNOSTIC (gated by ?diag=1) -----------------------------------
    // Sporadic crash hunt: record per-second activity + which wizard page is
    // active, trip a stack capture if recalc loops, and persist to localStorage
    // so the log survives the WebKit crash + auto-reload. Remove once resolved.
    const DIAG = location.search.includes('diag') ||
      (() => { try { return localStorage.getItem('pdoomDiagOn') === '1'; } catch (e) { return false; } })();
    if (location.search.includes('diag')) { try { localStorage.setItem('pdoomDiagOn', '1'); } catch (e) {} }
    const diagCounts = { recalc: 0, updateState: 0, input: 0, pointer: 0, resize: 0, raf: 0 };
    const diagRecalcTimes = [];
    let diagTripped = false;
    let diagOverlay = null;
    function diagLog(reason, extra) {
      if (!DIAG) return;
      try {
        const slidersHidden = (document.getElementById(SLIDERS_CONTAINER_ID) || {}).hidden;
        const rec = Object.assign({
          reason,
          tSec: Math.round(performance.now() / 1000),
          step: (typeof wizardState !== 'undefined' ? wizardState.step : '?'),
          flow: (typeof wizardState !== 'undefined' ? wizardState.flowId : '?'),
          slidersHidden,
          hash: location.hash
        }, diagCounts, extra || {});
        const log = JSON.parse(localStorage.getItem('pdoomDiagLog') || '[]');
        log.push(rec);
        while (log.length > 60) log.shift();
        localStorage.setItem('pdoomDiagLog', JSON.stringify(log));
        if (reason !== 'beat') console.warn('[DIAG]', reason, rec);
      } catch (e) {}
    }
    function diagTickRecalc() {
      if (!DIAG) return;
      diagCounts.recalc++;
      const now = performance.now();
      diagRecalcTimes.push(now);
      while (diagRecalcTimes.length && now - diagRecalcTimes[0] > 1000) diagRecalcTimes.shift();
      if (diagRecalcTimes.length > 30 && !diagTripped) {
        diagTripped = true; // capture the loop's trigger once
        diagLog('recalc-loop', { ratePerSec: diagRecalcTimes.length, stack: (new Error()).stack });
      }
    }
    function diagStartHeartbeat() {
      if (!DIAG) return;
      diagOverlay = document.createElement('div');
      diagOverlay.style.cssText = 'position:fixed;top:0;left:0;z-index:99999;background:rgba(0,0,0,0.8);color:#0f0;font:11px monospace;padding:4px 6px;pointer-events:none;white-space:pre;';
      document.body.appendChild(diagOverlay);
      let last = Object.assign({}, diagCounts);
      setInterval(() => {
        const d = {};
        for (const k in diagCounts) { d[k] = diagCounts[k] - last[k]; }
        last = Object.assign({}, diagCounts);
        const slidersHidden = (document.getElementById(SLIDERS_CONTAINER_ID) || {}).hidden;
        if (diagOverlay) {
          diagOverlay.textContent =
            `step:${wizardState.step} flow:${wizardState.flowId} slidersHidden:${slidersHidden}\n` +
            `/s recalc:${d.recalc} upd:${d.updateState} in:${d.input} ptr:${d.pointer} rsz:${d.resize} raf:${d.raf}`;
        }
        // Only persist when something is happening (keeps the log meaningful).
        if (d.recalc || d.updateState || d.input || d.pointer || d.resize) diagLog('beat', { per: d });
      }, 1000);
      window.addEventListener('pagehide', () => diagLog('pagehide'));
    }
    // ---------------------------------------------------------------------

    const wizardHeaderDefaults = {
      title: 'Choose your quiz path'
    };
    const wizardState = {
      step: 'welcome',
      flowId: null
    };
    const quizFlowIds = ['beginner', 'medium', 'expert'];
    // What the expert gate decided, or null if it has not run. Carried into the
    // submission so a verified expert can be told from a self-declared one.
    let gateState = null;

    // A verified expert clears 26 of the 30 terms. Ticking nothing already scores
    // 15, since the 15 decoys are then correctly left alone.
    const EXPERT_GATE_MIN_SCORE = 26;

    // Returning to the welcome screen abandons whatever path was in progress, so
    // neither the gate verdict nor the last quiz's answers may follow the visitor
    // into a later submission — a sliders-only submission must record neither.
    function resetPathState() {
      gateState = null;
      latestQuizData = null;
    }

    let storedWizardAnswers = {};
    let storedSliderState = {};

    function mulberry32(a) {
      return function() {
        let t = a += 0x6D2B79F5;
        t = Math.imul(t ^ t >>> 15, t | 1);
        t ^= t + Math.imul(t ^ t >>> 7, t | 61);
        return ((t ^ t >>> 14) >>> 0) / 4294967296;
      };
    }

    function getFlowById(flowId) {
      return quizFlows.find(flow => flow.id === flowId) || null;
    }

    const validHashes = ['start', 'expert-check', 'decide', 'beginner', 'medium', 'expert', 'sliders'];
    let suppressHashChange = false;

    function updateHash(id) {
      const hash = id === 'start' ? '' : '#' + id;
      if (window.location.hash === hash || (!window.location.hash && hash === '')) return;
      suppressHashChange = true;
      history.pushState(null, '', hash || (window.location.pathname + window.location.search));
      suppressHashChange = false;
    }

    function navigateTo(targetId, skipHash) {
      if (targetId === 'start') {
        wizardState.flowId = null;
        resetPathState();
        resetWizardResult();
        setSlidersVisibility(false);
        goToWizardStep('welcome');
        return;
      }
      if (targetId === 'sliders') {
        wizardState.flowId = 'sliders';
        setSlidersVisibility(true);
        goToWizardStep('welcome');
        return;
      }
      // The expert path always opens the gate first; the gate's own buttons call
      // handleFlowSelection('expert') directly to enter the quiz. 'decide' is the
      // retired flow id, kept so old links still resolve somewhere sensible.
      if (targetId === 'expert' || targetId === 'expert-check' || targetId === 'decide') {
        handleFlowSelection('expert-check', skipHash);
        return;
      }
      if (quizFlowIds.includes(targetId)) {
        handleFlowSelection(targetId, skipHash);
      }
    }

    function loadStoredWizardAnswers() {
      if (typeof localStorage === 'undefined') return {};
      try {
        const raw = localStorage.getItem(WIZARD_STORAGE_KEY);
        if (!raw) return {};
        const parsed = JSON.parse(raw);
        return parsed && typeof parsed === 'object' ? parsed : {};
      } catch (error) {
        console.warn('Unable to load saved wizard answers', error);
        return {};
      }
    }

    function getQuestionInputName(flow, question) {
      if (!flow || !question) return '';
      return flow.kind === 'knowledge-check' ? question.id : `${flow.id}-${question.id}`;
    }

    function captureWizardInputState(flow) {
      const answers = {};
      flow.questions.forEach((question) => {
        const inputName = getQuestionInputName(flow, question);
        if (question.type === 'multi-select') {
          const selected = Array.from(document.querySelectorAll(`input[name="${inputName}"]:checked`)).map(input => input.value);
          answers[question.id] = { type: 'multi-select', values: selected };
          return;
        }
        const selected = document.querySelector(`input[name="${inputName}"]:checked`);
        if (selected) {
          answers[question.id] = { type: 'single', value: selected.value };
        }
      });
      return answers;
    }

    function persistWizardAnswers(flowId) {
      const flow = getFlowById(flowId);
      if (!flow) return;
      storedWizardAnswers[flowId] = captureWizardInputState(flow);
      if (typeof localStorage === 'undefined') return;
      try {
        localStorage.setItem(WIZARD_STORAGE_KEY, JSON.stringify(storedWizardAnswers));
      } catch (error) {
        console.warn('Unable to save wizard answers', error);
      }
    }

    function applyStoredWizardAnswers(flow) {
      const saved = storedWizardAnswers[flow.id];
      if (!saved || typeof saved !== 'object') return;
      flow.questions.forEach((question) => {
        const savedEntry = saved[question.id];
        if (!savedEntry) return;
        const inputName = getQuestionInputName(flow, question);
        if (savedEntry.type === 'multi-select' && Array.isArray(savedEntry.values)) {
          savedEntry.values.forEach((value) => {
            const input = document.querySelector(`input[name="${inputName}"][value="${value}"]`);
            if (input) {
              input.checked = true;
            }
          });
          return;
        }
        if (savedEntry.type === 'single' && typeof savedEntry.value === 'string') {
          const input = document.querySelector(`input[name="${inputName}"][value="${savedEntry.value}"]`);
          if (input) {
            input.checked = true;
          }
        }
      });
    }

    function clearStoredWizardAnswers() {
      storedWizardAnswers = {};
      if (typeof localStorage === 'undefined') return;
      try {
        localStorage.removeItem(WIZARD_STORAGE_KEY);
      } catch (error) {
        console.warn('Unable to clear wizard answers', error);
      }
    }

    function loadStoredSliderState() {
      if (typeof localStorage === 'undefined') return {};
      try {
        const raw = localStorage.getItem(SLIDER_STORAGE_KEY);
        if (!raw) return {};
        const parsed = JSON.parse(raw);
        return parsed && typeof parsed === 'object' ? parsed : {};
      } catch (error) {
        console.warn('Unable to load saved sliders', error);
        return {};
      }
    }

    function getSerializableSliderState() {
      const snapshot = {};
      config.forEach(({ key }) => {
        const entry = state.get(key);
        if (!entry) return;
        const midpoint = typeof entry.midpoint === 'number' ? clamp(entry.midpoint, 0, 100) : null;
        const spread = typeof entry.spread === 'number' ? clamp(entry.spread, 0, SPREAD_MAX) : null;
        if (midpoint === null || spread === null) return;
        snapshot[key] = { midpoint, spread };
      });
      return snapshot;
    }

    function persistSliderState() {
      if (typeof localStorage === 'undefined') return;
      try {
        const payload = getSerializableSliderState();
        localStorage.setItem(SLIDER_STORAGE_KEY, JSON.stringify(payload));
        storedSliderState = payload;
      } catch (error) {
        console.warn('Unable to save slider state', error);
      }
    }

    function renderWizardFlowOptions() {
      const listEl = document.getElementById('wizardFlowList');
      if (!listEl) return;
      listEl.innerHTML = '';
      quizFlows.filter(flow => !flow.hiddenFromChooser).forEach((flow) => {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = 'wizard-flow-card';
        button.dataset.flowId = flow.id;
        const note = flow.cardNote
          ? `<p class="wizard-flow-card__note">${flow.cardNote}</p>`
          : '';
        button.innerHTML = `
          <h3 class="wizard-flow-card__title">${flow.label}</h3>
          <p class="wizard-flow-card__description">${flow.description}</p>
          ${note}
          <p class="wizard-flow-card__meta">${flow.meta}</p>
        `;
        // navigateTo, not handleFlowSelection, so the expert card lands on the gate.
        button.addEventListener('click', () => navigateTo(flow.id));
        listEl.appendChild(button);
      });
    }

    // Only the submit label now: the flow's title, description and meta already
    // appear in the wizard header, and repeating them read as a stutter on paper.
    function renderSelectedFlow(flow) {
      const submitButton = document.getElementById('wizardSubmitButton');
      if (submitButton) {
        submitButton.textContent = flow.kind === 'knowledge-check'
          ? 'Check my answers'
          : 'Continue to the sliders';
      }
    }

    function renderWizardQuestions(flow) {
      const questionList = document.getElementById('wizardQuestionList');
      if (!questionList) return;
      questionList.innerHTML = '';
      const showQuestionNumbers = flow.questions.length > 1;
      flow.questions.forEach((question, index) => {
        const questionNumber = showQuestionNumbers ? String(index + 1).padStart(2, '0') : '';
        const questionNumberMarkup = showQuestionNumbers ? `<span class="quiz-question__number">${questionNumber}</span>` : '';
        const inputName = getQuestionInputName(flow, question);
        if (flow.kind === 'knowledge-check' && question.type === 'multi-select') {
          const item = document.createElement('li');
          item.className = 'quiz-question';
          item.dataset.questionId = question.id;
          const explanationMarkup = question.explanation ? '<p class="quiz-explanation" data-role="rationale" hidden></p>' : '';
          const questionLinkMarkup = question.link ? `<a class="quiz-question__link reference-link" href="${question.link}" target="_blank" rel="noopener noreferrer" aria-label="View reference" title="View reference">?</a>` : '';
          item.innerHTML = `
            <div class="quiz-question__prompt">
              ${questionNumberMarkup}
              <div class="quiz-question__text">
                <div class="quiz-question__headline">${question.prompt}</div>
                ${question.instructions ? `<div class="quiz-question__instructions">${question.instructions}</div>` : ''}
                ${questionLinkMarkup}
              </div>
            </div>
            <div class="quiz-question__options">
              ${question.options.map((option, optionIndex) => {
                const optionId = option.id ?? `${question.id}-${optionIndex}`;
                return `
                  <label class="quiz-option" data-option-id="${optionId}">
                    <input type="checkbox" name="${inputName}" value="${optionId}" />
                    <div class="quiz-option__body">
                      <span class="quiz-option__label">${option.text}</span>
                      <p class="quiz-option__fact" data-role="fact" hidden></p>
                    </div>
                  </label>
                `;
              }).join('')}
            </div>
            ${explanationMarkup}
          `;
          questionList.appendChild(item);
          return;
        }

        if (question.type === 'multi-select') {
          const item = document.createElement('li');
          item.className = 'wizard-question';
          const questionLinkMarkup = question.link ? `<a class="wizard-question__link reference-link" href="${question.link}" target="_blank" rel="noopener noreferrer" aria-label="View reference" title="View reference">?</a>` : '';
          const optionsMarkup = question.options.map((option, optionIndex) => {
            const optionId = option.id ?? `${inputName}-${optionIndex}`;
            const optionLinkMarkup = option.link ? `<a class="wizard-option__link reference-link" href="${option.link}" target="_blank" rel="noopener noreferrer" aria-label="View reference" title="View reference">?</a>` : '';
            const optionDescriptionMarkup = option.description ? `<p class="wizard-option__description">${option.description}</p>` : '';
            return `
              <label class="wizard-checkbox">
                <input type="checkbox" id="${optionId}" name="${inputName}" value="${option.id ?? optionId}" />
                <div class="wizard-option__content">
                  <div class="wizard-option__text">
                    <span class="wizard-option__label">${option.label}</span>
                    ${optionDescriptionMarkup}
                  </div>
                  ${optionLinkMarkup}
                </div>
              </label>
            `;
          }).join('');
          const wizardQuestionNumberMarkup = showQuestionNumbers ? `<span class="wizard-question__number">${questionNumber}</span>` : '';
          item.innerHTML = `
            <div class="wizard-question__prompt">
              ${wizardQuestionNumberMarkup}
              <div class="wizard-question__text">
                <p class="wizard-question__label">${question.prompt}</p>
                ${questionLinkMarkup}
              </div>
            </div>
            <div class="wizard-question__options">
              ${optionsMarkup}
            </div>
          `;
          questionList.appendChild(item);
          return;
        }

        const item = document.createElement('li');
        item.className = 'wizard-question';
        const questionLinkMarkup = question.link ? `<a class="wizard-question__link reference-link" href="${question.link}" target="_blank" rel="noopener noreferrer" aria-label="View reference" title="View reference">?</a>` : '';
        const optionsMarkup = question.options.map((option, optionIndex) => {
          const optionId = option.id ?? `${inputName}-${optionIndex}`;
          const optionLinkMarkup = option.link ? `<a class="wizard-option__link reference-link" href="${option.link}" target="_blank" rel="noopener noreferrer" aria-label="View reference" title="View reference">?</a>` : '';
          const optionDescriptionMarkup = option.description ? `<p class="wizard-option__description">${option.description}</p>` : '';
          return `
            <label class="wizard-radio">
              <input type="radio" id="${optionId}" name="${inputName}" value="${option.id ?? optionId}" />
              <div class="wizard-option__content">
                <div class="wizard-option__text">
                  <span class="wizard-option__label">${option.label}</span>
                  ${optionDescriptionMarkup}
                </div>
                ${optionLinkMarkup}
              </div>
            </label>
          `;
        }).join('');
        const wizardQuestionNumberMarkup2 = showQuestionNumbers ? `<span class="wizard-question__number">${questionNumber}</span>` : '';
        item.innerHTML = `
          <div class="wizard-question__prompt">
            ${wizardQuestionNumberMarkup2}
            <div class="wizard-question__text">
              <p class="wizard-question__label">${question.prompt}</p>
              ${questionLinkMarkup}
            </div>
          </div>
          <div class="wizard-question__options">
            ${optionsMarkup}
          </div>
        `;
        questionList.appendChild(item);
      });
      applyStoredWizardAnswers(flow);
    }

    function resetWizardResult() {
      const resultEl = document.getElementById('wizardResult');
      if (resultEl) {
        resultEl.textContent = '';
        resultEl.classList.remove('quiz-result--warning', 'quiz-result--success');
      }
      const actionsEl = document.getElementById('wizardResultActions');
      if (actionsEl) {
        actionsEl.innerHTML = '';
        actionsEl.hidden = true;
      }
    }

    function clearWizardUi() {
      const questionList = document.getElementById('wizardQuestionList');
      if (questionList) {
        questionList.innerHTML = '';
      }
      resetWizardResult();
      updateCalibrationPreview();
    }

    function renderGateResultActions(recommendedFlowId) {
      const actionsEl = document.getElementById('wizardResultActions');
      if (!actionsEl) return;
      actionsEl.innerHTML = '';
      // Clearing the bar means one door. Falling short means two: the level the
      // score suggests, and the expert quiz anyway — recorded as self-declared.
      const buttons = recommendedFlowId === 'expert'
        ? [{ flowId: 'expert', label: 'Start expert quiz', className: 'primary-button' }]
        : [
            { flowId: recommendedFlowId, label: `Take ${recommendedFlowId} quiz`, className: 'primary-button' },
            { flowId: 'expert', label: 'Continue to expert anyway', className: 'secondary-button' }
          ];
      buttons.forEach(({ flowId, label, className }) => {
        const button = document.createElement('button');
        button.type = 'button';
        button.className = className;
        button.textContent = label;
        button.addEventListener('click', () => handleFlowSelection(flowId));
        actionsEl.appendChild(button);
      });
      actionsEl.hidden = false;
    }

    function runKnowledgeCheck() {
      const resultEl = document.getElementById('wizardResult');
      if (!resultEl) return;
      resetWizardResult();
      let questionsCorrect = 0;
      let questionItemsTotal = 0;
      const pickedTerms = [];

      knowledgeCheckQuestions.forEach((question) => {
        const questionEl = document.querySelector(`[data-question-id="${question.id}"]`);
        if (questionEl) {
          questionEl.classList.remove('quiz-question--correct', 'quiz-question--incorrect');
        }
        if (question.type !== 'multi-select') {
          return;
        }
        const selectedInputs = document.querySelectorAll(`input[name="${question.id}"]:checked`);
        const selectedValues = Array.from(selectedInputs).map(input => input.value);
        pickedTerms.push(...selectedValues);
        let perfect = true;
        question.options.forEach((option, optionIndex) => {
          const optionId = option.id ?? `${question.id}-${optionIndex}`;
          const optionEl = questionEl ? questionEl.querySelector(`[data-option-id="${optionId}"]`) : null;
          const factEl = optionEl ? optionEl.querySelector('[data-role="fact"]') : null;
          const isSelected = selectedValues.includes(optionId);
          const isAiRelated = Boolean(option.aiRelated);
          questionItemsTotal += 1;
          const optionIsCorrect = (isAiRelated && isSelected) || (!isAiRelated && !isSelected);
          if (optionIsCorrect) {
            questionsCorrect += 1;
          }
          if (isAiRelated && !isSelected) {
            perfect = false;
          }
          if (!isAiRelated && isSelected) {
            perfect = false;
          }
          if (optionEl) {
            optionEl.classList.remove('quiz-option--correct', 'quiz-option--incorrect', 'quiz-option--missed');
            if (isSelected && isAiRelated) {
              optionEl.classList.add('quiz-option--correct');
            } else if (isSelected && !isAiRelated) {
              optionEl.classList.add('quiz-option--incorrect');
            } else if (!isSelected && isAiRelated) {
              optionEl.classList.add('quiz-option--missed');
            }
          }
          if (factEl) {
            const aiBadge = isAiRelated ? 'AI related' : 'Not AI related';
            const wikiLink = option.wikiUrl ? `<a href="${option.wikiUrl}" target="_blank" rel="noopener noreferrer">Wikipedia</a>` : '';
            const factPieces = [option.fact];
            if (wikiLink) factPieces.push(wikiLink);
            factPieces.push(`<strong>${aiBadge}</strong>`);
            factEl.innerHTML = factPieces.join(' &middot; ');
            factEl.hidden = false;
          }
        });
        if (questionEl) {
          questionEl.classList.add(perfect ? 'quiz-question--correct' : 'quiz-question--incorrect');
        }
      });

      // The gate no longer touches the sliders: whichever quiz follows overwrites
      // both spread and midpoint immediately, so any calibration here is dead.
      const percentCorrect = questionItemsTotal > 0 ? Math.max(0, Math.min(100, Math.round((questionsCorrect / questionItemsTotal) * 100))) : 0;
      const scoreMessage = questionItemsTotal > 0 && questionsCorrect === questionItemsTotal
        ? `You have ${questionItemsTotal} of ${questionItemsTotal} answers correct. Score 100%.`
        : `You have ${questionsCorrect} of ${questionItemsTotal} answers correct. Score ${percentCorrect}%.`;

      const recommended = levelJumpRules.find(rule => questionsCorrect >= rule.min && questionsCorrect <= rule.max);
      const recommendedFlowId = recommended ? recommended.flowId : 'beginner';
      gateState = {
        score: questionsCorrect,
        recommendedLevel: recommendedFlowId,
        expertVerified: questionsCorrect >= EXPERT_GATE_MIN_SCORE,
        answers: pickedTerms
      };

      const verdict = recommendedFlowId === 'expert'
        ? ' That clears the expert bar.'
        : ` That suggests the ${recommendedFlowId} quiz is the better fit.`;
      resultEl.innerHTML = `${scoreMessage}${verdict}`;
      resultEl.classList.remove('quiz-result--warning');
      resultEl.classList.add('quiz-result--success');
      renderGateResultActions(recommendedFlowId);
    }

    function collectWizardAnswers(flow) {
      const selections = [];
      let unanswered = 0;
      flow.questions.forEach((question) => {
        const inputName = getQuestionInputName(flow, question);
        if (question.type === 'multi-select') {
          const selectedInputs = Array.from(document.querySelectorAll(`input[name="${inputName}"]:checked`));
          const optionIds = selectedInputs.map(input => input.value);
          const selectedOptions = question.options.filter((opt, optionIndex) => {
            const fallbackId = opt.id ?? `${inputName}-${optionIndex}`;
            return optionIds.includes(opt.id ?? fallbackId);
          });
          selections.push({ question, options: selectedOptions });
          return;
        }
        const selected = document.querySelector(`input[name="${inputName}"]:checked`);
        if (!selected) {
          unanswered += 1;
          return;
        }
        const option = question.options.find((opt, optionIndex) => {
          const fallbackId = opt.id ?? `${inputName}-${optionIndex}`;
          return (opt.id ?? fallbackId) === selected.value;
        }) || null;
        selections.push({ question, option });
      });
      return { selections, unanswered };
    }

    // Beginner calibration logic:
    // - Knowledge score averages ratios from entertainment, catastrophes, and capabilities multi-selects.
    // - Spread interpolates from ±80 (no knowledge) down to ±20 (knows everything).
    // - Midpoint interpolates within the control choice range (easy 20–40, medium 40–60, impossible 60–80) using the same knowledge score.
    function getBeginnerKnowledgeScore(selections) {
      const entertainment = selections.find(entry => entry.question.id === 'beginner-entertainment');
      const catastrophes = selections.find(entry => entry.question.id === 'beginner-catastrophes');
      const capabilities = selections.find(entry => entry.question.id === 'beginner-capability');
      const entertainmentSelected = entertainment ? entertainment.options.length : 0;
      const entertainmentTotal = entertainment ? entertainment.question.options.length : 0;
      const catastropheSelected = catastrophes ? catastrophes.options.length : 0;
      const catastropheTotal = catastrophes ? catastrophes.question.options.length : 0;
      const capabilitySelected = capabilities ? capabilities.options.length : 0;
      const capabilityTotal = capabilities ? capabilities.question.options.length : 0;

      const entertainmentRatio = entertainmentTotal > 0 ? entertainmentSelected / entertainmentTotal : 0;
      const catastropheRatio = catastropheTotal > 0 ? catastropheSelected / catastropheTotal : 0;
      const capabilityRatio = capabilityTotal > 0 ? capabilitySelected / capabilityTotal : 0;
      const ratios = [entertainmentRatio, catastropheRatio, capabilityRatio];
      const average = ratios.reduce((sum, value) => sum + value, 0) / ratios.length;
      return clamp(average, 0, 1);
    }

    function computeBeginnerSpread(selections) {
      const knowledgeScore = getBeginnerKnowledgeScore(selections);
      // Interpolate: 0 knowledge → ±80, full knowledge → ±20.
      const spread = 80 - knowledgeScore * 60;
      return clamp(Number(spread.toFixed(1)), 20, 80);
    }

    function computeBeginnerMidpoint(selections) {
      const control = selections.find(entry => entry.question.id === 'beginner-control');
      const selectedControl = control && control.option ? control.option.id : null;
      const ranges = {
        'control-easy': { low: 20, high: 40 },
        'control-medium': { low: 40, high: 60 },
        'control-impossible': { low: 60, high: 80 }
      };
      const selectedRange = ranges[selectedControl] || { low: 20, high: 80 };

      const knowledgeScore = getBeginnerKnowledgeScore(selections);
      const midpoint = selectedRange.low + knowledgeScore * (selectedRange.high - selectedRange.low);
      return clamp(Number(midpoint.toFixed(1)), selectedRange.low, selectedRange.high);
    }

    // Medium calibration logic mirrors beginner: knowledge drives both spread and midpoint.
    // - Knowledge blends: vulnerabilities coverage (multi-select), system-prompt familiarity, and off-the-rails experience.
    // - Spread interpolates from ±80 (low knowledge) down to ±20 (high knowledge).
    // - Midpoint band is chosen by optimism/pessimism: competition + speed + governance scores map to ranges
    //   (+3: 0–14, +2: 14–28, +1: 28–42, 0: 42–58, -1: 58–72, -2: 72–86, -3: 86–100), then knowledge score interpolates within that band.
    function getMediumKnowledgeScore(selections) {
      const vulnerabilities = selections.find(entry => entry.question.id === 'medium-vulnerabilities');
      const systemPrompts = selections.find(entry => entry.question.id === 'medium-system-prompts');
      const offTheRails = selections.find(entry => entry.question.id === 'medium-off-the-rails');

      const vulnerabilitiesSelected = vulnerabilities ? vulnerabilities.options.length : 0;
      const vulnerabilitiesTotal = vulnerabilities ? vulnerabilities.question.options.length : 0;
      const vulnerabilityRatio = vulnerabilitiesTotal > 0 ? vulnerabilitiesSelected / vulnerabilitiesTotal : 0;

      const systemPromptScores = {
        'medium-system-prompts-none': 0,
        'medium-system-prompts-basic': 0.33,
        'medium-system-prompts-medium': 0.66,
        'medium-system-prompts-expert': 1
      };
      const systemPromptScore = systemPrompts && systemPrompts.option
        ? (systemPromptScores[systemPrompts.option.id] ?? 0)
        : 0;

      const offTheRailsScores = {
        'medium-off-the-rails-never': 0,
        'medium-off-the-rails-low': 0.33,
        'medium-off-the-rails-high': 0.66,
        'medium-off-the-rails-bypass': 1
      };
      const offTheRailsScore = offTheRails && offTheRails.option
        ? (offTheRailsScores[offTheRails.option.id] ?? 0)
        : 0;

      const ratios = [vulnerabilityRatio, systemPromptScore, offTheRailsScore];
      const knowledge = ratios.reduce((sum, value) => sum + value, 0) / ratios.length;
      return clamp(knowledge, 0, 1);
    }

    function computeMediumSpread(selections) {
      const knowledgeScore = getMediumKnowledgeScore(selections);
      const spread = 80 - knowledgeScore * 60;
      return clamp(Number(spread.toFixed(1)), 20, 80);
    }

    function computeMediumMidpoint(selections) {
      const knowledgeScore = getMediumKnowledgeScore(selections);
      const competition = selections.find(entry => entry.question.id === 'medium-competition');
      const speed = selections.find(entry => entry.question.id === 'medium-speed');
      const governance = selections.find(entry => entry.question.id === 'medium-governance');

      const competitionScores = {
        'medium-competition-positive': 1,
        'medium-competition-neutral': 0,
        'medium-competition-negative': -1
      };
      const speedScores = {
        'medium-speed-no-risk': 1,
        'medium-speed-risk': -1
      };
      const governanceScores = {
        'medium-governance-yes': 1,
        'medium-governance-neutral': 0,
        'medium-governance-no': -1
      };

      const competitionScore = competition && competition.option ? (competitionScores[competition.option.id] ?? 0) : 0;
      const speedScore = speed && speed.option ? (speedScores[speed.option.id] ?? 0) : 0;
      const governanceScore = governance && governance.option ? (governanceScores[governance.option.id] ?? 0) : 0;
      const totalScore = clamp(competitionScore + speedScore + governanceScore, -3, 3);

      const scoreBands = {
        3: { low: 0, high: 14 },
        2: { low: 14, high: 28 },
        1: { low: 28, high: 42 },
        0: { low: 42, high: 58 },
        '-1': { low: 58, high: 72 },
        '-2': { low: 72, high: 86 },
        '-3': { low: 86, high: 100 }
      };
      const band = scoreBands[totalScore] || scoreBands[0];
      const midpoint = band.low + knowledgeScore * (band.high - band.low);
      return clamp(Number(midpoint.toFixed(1)), band.low, band.high);
    }

    // Expert calibration logic:
    // - Knowledge score averages coverage from seven multi-selects (continuous learning, self improvement, self replication, campaign organisations, research organisations, commentators, content creators).
    // - Spread interpolates from ±80 (low knowledge) down to ±20 (high knowledge).
    // - Midpoint band is set by optimism/pessimism on alignment spending, then knowledge interpolates within that band.
    function getExpertKnowledgeScore(selections) {
      const continuous = selections.find(entry => entry.question.id === 'expert-continuous-learning');
      const improvement = selections.find(entry => entry.question.id === 'expert-self-improvement');
      const replication = selections.find(entry => entry.question.id === 'expert-self-replication');
      const campaigns = selections.find(entry => entry.question.id === 'expert-campaign-organisations');
      const research = selections.find(entry => entry.question.id === 'expert-research-organisations');
      const commentators = selections.find(entry => entry.question.id === 'expert-commentators');
      const contentCreators = selections.find(entry => entry.question.id === 'expert-content-creators');

      const ratios = [continuous, improvement, replication, campaigns, research, commentators, contentCreators].map((entry) => {
        if (!entry) return 0;
        const total = entry.question.options.length;
        const selected = entry.options.length;
        return total > 0 ? selected / total : 0;
      });
      const knowledge = ratios.reduce((sum, value) => sum + value, 0) / ratios.length;
      return clamp(knowledge, 0, 1);
    }

    function computeExpertSpread(selections) {
      const knowledgeScore = getExpertKnowledgeScore(selections);
      const spread = 80 - knowledgeScore * 60;
      return clamp(Number(spread.toFixed(1)), 20, 80);
    }

    // Midpoint: map alignment-spending stance to an optimism band (capabilities → most optimistic, stop-all → most pessimistic),
    // then interpolate within that band using the knowledge score.
    function computeExpertMidpoint(selections) {
      const knowledgeScore = getExpertKnowledgeScore(selections);
      const moneyAlignment = selections.find(entry => entry.question.id === 'expert-money-alignment');

      const spendingScores = {
        'expert-money-alignment-capabilities': 2,
        'expert-money-accelerating-defensive-technologies': 1,
        'expert-money-spending-about-right': 0,
        'expert-money-not-spending-enough': -1,
        'expert-money-stop-funding-all-ai-research': -2
      };
      const selectedMoneyId = moneyAlignment && moneyAlignment.option ? moneyAlignment.option.id : null;
      const optimismScore = selectedMoneyId ? (spendingScores[selectedMoneyId] ?? 0) : 0;
      const clampedScore = clamp(optimismScore, -2, 2);

      const scoreBands = {
        2: { low: 0, high: 20 },
        1: { low: 20, high: 40 },
        0: { low: 40, high: 60 },
        '-1': { low: 60, high: 80 },
        '-2': { low: 80, high: 100 }
      };
      const band = scoreBands[clampedScore] || scoreBands[0];
      const midpoint = band.low + knowledgeScore * (band.high - band.low);
      return clamp(Number(midpoint.toFixed(1)), band.low, band.high);
    }

    function updateCalibrationPreview() {
      const previewEl = document.getElementById('quizPreview');
      const titleEl = document.getElementById('quizPreviewTitle');
      const midpointEl = document.getElementById('quizPreviewMidpoint');
      const spreadEl = document.getElementById('quizPreviewSpread');
      if (!previewEl || !midpointEl || !spreadEl || !titleEl) return;
      const isQuizStep = wizardState.step === 'quiz';
      const flowId = wizardState.flowId;
      if (!isQuizStep || !flowId) {
        previewEl.hidden = true;
        return;
      }
      const flow = getFlowById(flowId);
      if (!flow || (flow.id !== 'beginner' && flow.id !== 'medium' && flow.id !== 'expert')) {
        previewEl.hidden = true;
        return;
      }
      const { selections } = collectWizardAnswers(flow);
      let spread = null;
      let midpoint = null;
      if (flow.id === 'beginner') {
        titleEl.textContent = 'Beginner calibration preview';
        spread = computeBeginnerSpread(selections);
        midpoint = computeBeginnerMidpoint(selections);
      } else if (flow.id === 'medium') {
        titleEl.textContent = 'Medium calibration preview';
        spread = computeMediumSpread(selections);
        midpoint = computeMediumMidpoint(selections);
      } else if (flow.id === 'expert') {
        titleEl.textContent = 'Expert calibration preview';
        spread = computeExpertSpread(selections);
        midpoint = computeExpertMidpoint(selections);
      }
      spreadEl.textContent = typeof spread === 'number' ? `±${spread.toFixed(1)}` : '–';
      midpointEl.textContent = typeof midpoint === 'number' ? `${midpoint.toFixed(1)}%` : '–';
      previewEl.hidden = false;
    }

    // Every flow's meta already states its own length ("4 questions · ~5 minutes",
    // "30 terms · ~5 minutes"), so prepending a counted one produced "(6 questions ·
    // 6 questions · ~5 minutes)". The meta line speaks for itself.
    function formatWizardMeta(flow) {
      if (!flow || !flow.meta) return '';
      return ` (${flow.meta})`;
    }

    function updateWizardHeader(step, flow) {
      const titleEl = document.getElementById('wizardHeaderTitle');
      const introEl = document.getElementById('wizardHeaderIntro');
      if (!titleEl || !introEl) return;

      const setIntro = (text) => {
        introEl.textContent = text;
        introEl.hidden = !text;
      };

      if (step === 'welcome' || !flow) {
        titleEl.textContent = wizardHeaderDefaults.title;
        setIntro('');
        return;
      }

      const metaText = formatWizardMeta(flow);
      if (flow.id === 'expert-check') {
        titleEl.textContent = 'Before the expert quiz';
        setIntro('Without a check, “expert” is just a label anyone can pick.');
        return;
      }

      titleEl.textContent = flow.label || wizardHeaderDefaults.title;
      const description = flow.description || 'Work through this quiz to tune your sliders.';
      setIntro(`${description}${metaText}`);
    }

    function resetQuizScrollPosition() {
      const quizPanel = document.getElementById('wizardStepQuiz');
      const questionList = document.getElementById('wizardQuestionList');
      if (quizPanel) {
        quizPanel.scrollTop = 0;
      }
      if (questionList) {
        questionList.scrollTop = 0;
      }
      if (typeof window !== 'undefined' && typeof window.scrollTo === 'function') {
        window.scrollTo(0, 0);
      }
    }

    function updateResetVisibility() {
      const actions = document.getElementById('wizardWelcomeActions');
      if (!actions) return;
      actions.hidden = wizardState.step !== 'welcome' || Boolean(wizardState.flowId);
    }

    function goToWizardStep(step) {
      const wizardRoot = document.getElementById('levelWizard');
      if (!wizardRoot) return;
      wizardState.step = step;
      const flow = getFlowById(wizardState.flowId);
      wizardRoot.querySelectorAll('.wizard-panel').forEach((panel) => {
        const isActive = panel.dataset.step === step;
        panel.hidden = !isActive;
        panel.classList.toggle('wizard-panel--active', isActive);
      });
      updateWizardHeader(step, flow);
      updateResetVisibility();
      if (step === 'welcome') {
        resetWizardResult();
      }
      if (step === 'quiz') {
        resetQuizScrollPosition();
      }
      updateCalibrationPreview();
    }

    function setSlidersVisibility(visible) {
      const container = document.getElementById(SLIDERS_CONTAINER_ID);
      const flowList = document.getElementById('wizardFlowList');
      if (flowList) {
        flowList.hidden = visible;
        flowList.setAttribute('aria-hidden', visible ? 'true' : 'false');
        flowList.classList.toggle('wizard-flow-grid--hidden', visible);
      }
      const wizardRoot = document.getElementById('levelWizard');
      if (wizardRoot) {
        wizardRoot.hidden = visible;
      }
      const stickyPdoom = document.getElementById('stickyPdoom');
      if (stickyPdoom) {
        stickyPdoom.hidden = !visible;
      }
      updateResetVisibility();
      if (!container) return;
      const wasHidden = container.hidden;
      container.hidden = !visible;
      if (visible && wasHidden) {
        void container.offsetHeight; // force layout flush so canvas dimensions are available (Chrome)
        recalc();
        // Fallback: if Chrome still hasn't flushed layout, redraw on the next frame
        requestAnimationFrame(() => recalc());
        if (typeof window !== 'undefined' && typeof window.scrollTo === 'function') {
          window.scrollTo(0, 0);
        }
        // Bounce the bell curves and show the drag hint
        const hint = document.getElementById('sliderHint');
        if (hint) {
          hint.classList.remove('slider-hint--hidden');
        }
        const canvases = container.querySelectorAll('.slider-bellcurve');
        canvases.forEach(canvas => {
          canvas.classList.remove('slider-bellcurve--bounce');
          void canvas.offsetWidth; // force reflow to restart animation
          canvas.classList.add('slider-bellcurve--bounce');
        });
        // Fade out hint after a few seconds
        setTimeout(() => {
          if (hint) hint.classList.add('slider-hint--hidden');
        }, 4000);
      }
    }

    // Clears saved answers and the in-progress path only. The visitor identity and
    // its submit counter live in IndexedDB and must survive this: they are what
    // ties a person's submissions together in the published export, and wiping
    // them here would hand anyone a one-click way to become a new visitor.
    // Do not "tidy" this into localStorage.clear() or an IndexedDB wipe.
    function handleWizardReset() {
      const shouldReset = window.confirm('Reset all saved quiz answers? This will wipe stored selections.');
      if (!shouldReset) return;
      clearStoredWizardAnswers();
      resetPathState();
      wizardState.flowId = null;
      clearWizardUi();
      setSlidersVisibility(false);
      goToWizardStep('welcome');
    }

    function handleFlowSelection(flowId, skipHash) {
      const flow = getFlowById(flowId);
      if (!flow) return;
      if (!skipHash) updateHash(flowId);
      if (flow.kind === 'sliders') {
        wizardState.flowId = flowId;
        setSlidersVisibility(true);
        goToWizardStep('welcome');
        return;
      }
      setSlidersVisibility(false);
      wizardState.flowId = flowId;
      renderSelectedFlow(flow);
      renderWizardQuestions(flow);
      resetWizardResult();
      goToWizardStep('quiz');
      updateCalibrationPreview();
    }

    function handleWizardSubmit() {
      const flow = getFlowById(wizardState.flowId);
      const resultEl = document.getElementById('wizardResult');
      if (!flow || !resultEl) return;

      if (flow.kind === 'knowledge-check') {
        const submitButton = document.getElementById('wizardSubmitButton');
        const prevTop = submitButton ? submitButton.getBoundingClientRect().top : null;
        runKnowledgeCheck();
        if (prevTop !== null && submitButton && typeof window !== 'undefined' && typeof window.scrollBy === 'function') {
          const newTop = submitButton.getBoundingClientRect().top;
          const delta = newTop - prevTop;
          if (Math.abs(delta) > 1) {
            window.scrollBy(0, delta);
          }
        }
        return;
      }

      const { selections, unanswered } = collectWizardAnswers(flow);
      if (unanswered > 0) {
        resultEl.textContent = `Answer the remaining ${unanswered} question${unanswered === 1 ? '' : 's'} to continue.`;
        resultEl.classList.add('quiz-result--warning');
        resultEl.classList.remove('quiz-result--success');
        return;
      }
      resultEl.classList.remove('quiz-result--warning');
      resultEl.classList.add('quiz-result--success');
      latestQuizData = buildQuizAnswersPayload(wizardState.flowId, flow);

      const calibrationByFlow = {
        beginner: () => ({
          spread: computeBeginnerSpread(selections),
          midpoint: computeBeginnerMidpoint(selections)
        }),
        medium: () => ({
          spread: computeMediumSpread(selections),
          midpoint: computeMediumMidpoint(selections)
        }),
        expert: () => ({
          spread: computeExpertSpread(selections),
          midpoint: computeExpertMidpoint(selections)
        })
      };
      const { spread: spreadToApply, midpoint: midpointToApply } =
        (calibrationByFlow[flow.id]?.() ?? { spread: null, midpoint: null });

      if (typeof spreadToApply === 'number') {
        applyConfidenceCalibration(spreadToApply);
      }
      if (typeof midpointToApply === 'number') {
        applyMidpointCalibration(midpointToApply);
      }
      const spreadText = typeof spreadToApply === 'number'
        ? ` Sliders set to ±${spreadToApply.toFixed(1)} pts.`
        : '';
      const midpointText = typeof midpointToApply === 'number'
        ? ` Midpoints set to ${midpointToApply.toFixed(1)}%.`
        : '';
      const completionText = flow.completionMessage || `Thanks for finishing the ${flow.label}.`;
      resultEl.textContent = `${completionText}${spreadText}${midpointText}`;

      if (flow.id === 'beginner') {
        resetWizardResult();
        setSlidersVisibility(true);
        wizardState.flowId = 'sliders';
        updateHash('sliders');
      } else if (flow.id === 'medium') {
        setSlidersVisibility(true);
        wizardState.flowId = 'sliders';
        updateHash('sliders');
      } else if (flow.id === 'expert') {
        setSlidersVisibility(true);
        wizardState.flowId = 'sliders';
        updateHash('sliders');
      }
      if (flow.id === 'beginner' || flow.id === 'medium' || flow.id === 'expert') {
      }
      updateCalibrationPreview();
    }

    function initWizard() {
      const wizardRoot = document.getElementById('levelWizard');
      if (!wizardRoot) return;
      storedWizardAnswers = loadStoredWizardAnswers();
      storedSliderState = loadStoredSliderState();
      renderWizardFlowOptions();
      goToWizardStep('welcome');
      const submitButton = document.getElementById('wizardSubmitButton');
      if (submitButton) {
        submitButton.addEventListener('click', handleWizardSubmit);
      }
      const resetButton = document.getElementById('wizardResetButton');
      if (resetButton) {
        resetButton.addEventListener('click', handleWizardReset);
      }
      document.addEventListener('change', (event) => {
        const target = event.target;
        const withinWizardQuestions = target && target.closest('#wizardQuestionList');
        if (!withinWizardQuestions) return;
        if (wizardState.flowId) {
          persistWizardAnswers(wizardState.flowId);
        }
        if (wizardState.flowId === 'beginner' ||
            wizardState.flowId === 'medium' ||
            wizardState.flowId === 'expert') {
          updateCalibrationPreview();
        }
      });
    }

    function applyConfidenceCalibration(spreadValue) {
      const safeSpread = clamp(spreadValue, 0, SPREAD_MAX);
      config.forEach(({ key }) => {
        const factorState = state.get(key) || { midpoint: 50, spread: safeSpread };
        factorState.spread = safeSpread;
        state.set(key, factorState);
        syncInputs(key);
      });
      recalc();
      persistSliderState();
    }

    function applyMidpointCalibration(midpointValue) {
      const safeMidpoint = clamp(midpointValue, 0, 100);
      // The P(doom) is the product of all factor midpoints.
      // To land on the desired P(doom), set each factor to the Nth root
      // so that factor^N = target, where N is the number of factors.
      const n = config.length;
      const perFactor = Math.pow(safeMidpoint / 100, 1 / n) * 100;
      const safePerFactor = clamp(Number(perFactor.toFixed(1)), 0, 100);
      config.forEach(({ key }) => {
        const factorState = state.get(key) || { midpoint: safePerFactor, spread: 0 };
        factorState.midpoint = safePerFactor;
        state.set(key, factorState);
        syncInputs(key);
      });
      recalc();
      persistSliderState();
    }

    const state = new Map();

    function initSupabase() {
    const missingUrl = !SUPABASE_URL;
    const missingKey = !SUPABASE_ANON_KEY;
      if (missingUrl || missingKey) {
        console.info('Supabase client not initialized: configure SUPABASE_URL and SUPABASE_ANON_KEY.');
        return;
      }
      if (!window.supabase || typeof window.supabase.createClient !== 'function') {
        console.error('Supabase library is not available.');
        return;
      }
      supabaseClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    }

    // Shown only after a submission has landed, so the estimate is already fixed
    // and nothing here can influence the number that was recorded.
    const EXHIBIT_GROUPS = [
      { key: 'powerfulAi', label: 'P(powerful AI)' },
      { key: 'dangerousBehavior', label: 'P(dangerous behavior | powerful AI)' },
      { key: 'globalCatastrophe', label: 'P(global catastrophe | dangerous behavior)' }
    ];

    function loadExhibits() {
      const el = document.getElementById('exhibitsData');
      if (!el) return [];
      try {
        const parsed = JSON.parse(el.textContent);
        // An exhibit without `limits` does not render, here as on the page.
        return Array.isArray(parsed) ? parsed.filter(e => e && e.limits) : [];
      } catch (error) {
        console.warn('Unable to read exhibits', error);
        return [];
      }
    }

    function renderExhibits() {
      const host = document.getElementById('exhibitResult');
      if (!host) return;
      const exhibits = loadExhibits();
      if (!exhibits.length) return;

      const midpointFor = (key) => {
        const factor = ((latestSnapshot && latestSnapshot.factors) || []).find(f => f.key === key);
        return factor ? `${(factor.midpoint * 100).toFixed(1)}%` : null;
      };

      const escape = (text) => String(text).replace(/[&<>"]/g, c => (
        { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]
      ));

      const card = (e, historical) => `
        <article class="exhibit${historical ? ' exhibit--historical' : ''}">
          <h4 class="exhibit__title">${escape(e.title)}</h4>
          <p class="exhibit__what">${escape(e.what)}</p>
          <p class="exhibit__source">${escape(e.date)} &middot;
            <a href="${escape(e.source.url)}" target="_blank" rel="noopener noreferrer">${escape(e.source.label)}</a>
            ${e.source2 ? ` &middot; <a href="${escape(e.source2.url)}" target="_blank" rel="noopener noreferrer">${escape(e.source2.label)}</a>` : ''}
            ${e.source3 ? ` &middot; <a href="${escape(e.source3.url)}" target="_blank" rel="noopener noreferrer">${escape(e.source3.label)}</a>` : ''}
          </p>
          <p class="exhibit__limits">${escape(e.limits)}</p>
        </article>`;

      // Older exhibits still teach something, but they no longer describe the
      // frontier, so they sit below a divider rather than alongside current work.
      const renderExhibitList = (items) => {
        const current = items.filter(e => e.era !== 'historical');
        const historical = items.filter(e => e.era === 'historical');
        return current.map(e => card(e, false)).join('')
          + (historical.length
              ? `<h4 class="exhibit-era">Historical context</h4>${historical.map(e => card(e, true)).join('')}`
              : '');
      };

      host.innerHTML = `
        <h2 class="exhibit-result__head">What the evidence looks like</h2>
        <p class="exhibit-preamble">
          Exhibits, not predictions. Your estimate is already recorded &mdash; this changes nothing about it.
        </p>
        ${EXHIBIT_GROUPS.map((group) => {
          const items = exhibits.filter(e => e.link === group.key);
          const mine = midpointFor(group.key);
          return `
            <section class="exhibit-group">
              <h3 class="exhibit-group__head">
                ${escape(group.label)}${mine ? ` <span class="exhibit-group__mine">you put this at ${mine}</span>` : ''}
              </h3>
              ${items.length ? renderExhibitList(items) : '<p class="exhibit-empty">Nothing here yet.</p>'}
            </section>`;
        }).join('')}
        <p class="exhibit-result__more">
          The same collection lives at <a href="{{ '/exhibits/' | relative_url }}">Exhibits</a>.
        </p>`;
      host.hidden = false;
    }

    function setSubmissionStatus(message, tone = 'info') {
      const statusEl = document.getElementById('submissionStatus');
      if (!statusEl) return;
      statusEl.textContent = message;
      statusEl.classList.remove('error', 'success');
      if (tone === 'error') {
        statusEl.classList.add('error');
      } else if (tone === 'success') {
        statusEl.classList.add('success');
      }
    }

    function buildSubmissionPayload() {
      if (!latestSnapshot) return null;
      const { factors, lowerProduct, upperProduct, midpointProduct, p10, p90 } = latestSnapshot;
      return {
        submitted_at: new Date().toISOString(),
        factors: factors.map(({ key, label, lower, upper, midpoint, spread }) => ({
          key,
          label,
          lower,
          upper,
          midpoint,
          spread
        })),
        summary: {
          lower: lowerProduct,
          upper: upperProduct,
          midpoint: midpointProduct,
          p10,
          p90
        },
        quiz_flow_id: latestQuizData ? latestQuizData.flow_id : null,
        quiz_answers: latestQuizData ? latestQuizData.answers : null,
        // Null when the expert gate never ran, which is every beginner and medium
        // submission that went straight to its quiz.
        gate_score: gateState ? gateState.score : null,
        gate_recommended_level: gateState ? gateState.recommendedLevel : null,
        expert_verified: gateState ? gateState.expertVerified : null,
        // Which terms were ticked, so per-decoy performance is recoverable. Not
        // covered by the signature, for the same reason quiz_answers is not: the
        // signed string stays a short fixed-format line.
        gate_answers: gateState ? gateState.answers : null
      };
    }

    // Fixed field order, plain String() numbers, empty string for absent values.
    // This exact string is stored alongside the signature, so the Python verifier
    // never reconstructs it — which is what keeps Postgres timestamp rewriting and
    // JS/Python float formatting from producing phantom invalid verdicts.
    function buildSignedPayloadString(payload, visitorKey, submitCount) {
      const factors = payload.factors
        .map(factor => `${factor.midpoint}:${factor.spread}`)
        .join(',');
      const blank = value => (value === null || value === undefined ? '' : String(value));
      return [
        'pdoom/1',
        `k=${visitorKey}`,
        `n=${submitCount}`,
        `t=${payload.submitted_at}`,
        `m=${payload.summary.midpoint}`,
        `lo=${payload.summary.lower}`,
        `hi=${payload.summary.upper}`,
        `p10=${payload.summary.p10}`,
        `p90=${payload.summary.p90}`,
        `f=${factors}`,
        `q=${blank(payload.quiz_flow_id)}`,
        `g=${blank(payload.gate_score)}`
      ].join('|');
    }

    // Attaches the identity columns. Any failure leaves all four null and the
    // submission goes ahead unchanged — identity must never cost a submission.
    async function signSubmission(payload) {
      payload.visitor_key = null;
      payload.submit_count = null;
      payload.signed_payload = null;
      payload.signature = null;
      const identity = await loadIdentity();
      if (!identity) return { payload, identity: null, nextCount: null };
      const nextCount = identity.submitCount + 1;
      try {
        const signedPayload = buildSignedPayloadString(payload, identity.visitorKey, nextCount);
        const signature = await crypto.subtle.sign(
          { name: 'ECDSA', hash: 'SHA-256' },
          identity.privateKey,
          new TextEncoder().encode(signedPayload));
        payload.visitor_key = identity.visitorKey;
        payload.submit_count = nextCount;
        payload.signed_payload = signedPayload;
        payload.signature = base64UrlFromBytes(new Uint8Array(signature));
        return { payload, identity, nextCount };
      } catch (error) {
        console.warn('Unable to sign submission', error);
        payload.visitor_key = null;
        payload.submit_count = null;
        payload.signed_payload = null;
        payload.signature = null;
        return { payload, identity: null, nextCount: null };
      }
    }

    async function submitParameters() {
      const button = document.getElementById('submitParametersButton');

      if (DEVELOPER_MODE) {
        const draft = buildSubmissionPayload();
        if (!draft) {
          setSubmissionStatus('Nothing to submit yet. Adjust the sliders first.', 'error');
          return;
        }
        // Sign it anyway so the whole path is exercised, then stop. The submit
        // counter is deliberately not advanced: no row landed, so advancing it
        // would leave a gap in this browser's sequence.
        await signSubmission(draft);
        console.info('[developer] submission withheld, nothing sent:', draft);
        setSubmissionStatus('Developer mode — nothing was sent. Payload logged to the console.', 'error');
        renderExhibits();
        return;
      }

      if (!supabaseClient) {
        initSupabase();
      }
      if (!supabaseClient) {
        setSubmissionStatus('Supabase is not configured. Update SUPABASE_URL and SUPABASE_ANON_KEY.', 'error');
        return;
      }

      const payload = buildSubmissionPayload();
      if (!payload) {
        setSubmissionStatus('Nothing to submit yet. Adjust the sliders first.', 'error');
        return;
      }

      setSubmissionStatus('Submitting...');
      if (button) button.disabled = true;
      try {
        const { identity, nextCount } = await signSubmission(payload);
        const { error } = await supabaseClient
          .from(SUBMISSIONS_TABLE)
          .insert(payload);
        if (error) throw error;
        // Only after the row lands, so a failed submit does not burn a number.
        // Deliberately not surfaced anywhere: the visitor must see no difference
        // between their first submission and their fortieth.
        if (identity) persistSubmitCount(nextCount);
        setSubmissionStatus('Submitted! Thanks for contributing.', 'success');
        renderExhibits();
      } catch (error) {
        console.error('Supabase submission failed', error);
        setSubmissionStatus('Submission failed. Please try again later.', 'error');
      } finally {
        if (button) button.disabled = false;
      }
    }

    function buildQuizAnswersPayload(flowId, flow) {
      const answers = captureWizardInputState(flow);
      const entries = [];
      for (const [questionId, answer] of Object.entries(answers)) {
        if (answer.type === 'multi-select') {
          entries.push({ question_id: questionId, type: 'multi-select', values: answer.values });
        } else {
          entries.push({ question_id: questionId, type: 'single', value: answer.value });
        }
      }
      return {
        submitted_at: new Date().toISOString(),
        flow_id: flowId,
        answers: entries
      };
    }

    function createFactorCard({ key, label, defaults, explanation }) {
      const midpoint = ((defaults.lower + defaults.upper) / 2) * 100;
      const spread = ((defaults.upper - defaults.lower) / 2) * 100;

      const card = document.createElement('article');
      card.className = 'factor-card';
      card.id = `card-${key}`;

      card.innerHTML = `
        <div class="factor-content">
          <div class="factor-header">
            <div class="factor-name">${label}</div>
            <div class="factor-explanation">${explanation}</div>
          </div>
          <div class="sliders">
            <div class="bellcurve-control" data-role="midpointControl" data-key="${key}">
              <div class="slider-caption slider-caption--canvas">
                <span>Unlikely</span>
                <span class="slider-value slider-value--percent" data-role="midpointValue" data-key="${key}" aria-label="${midpoint.toFixed(1)} percent">${midpoint.toFixed(1)}</span>
                <span>Likely</span>
              </div>
              <canvas class="slider-bellcurve" data-role="distributionCanvas" data-key="${key}" aria-label="Midpoint for ${label}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${midpoint.toFixed(1)}" aria-valuetext="${midpoint.toFixed(1)} percent" role="slider" tabindex="0"></canvas>
            </div>
            <div class="slider-row">
              <label>
                <span class="slider-caption">
                  <span>Certain</span>
                  <span class="slider-value slider-value--spread" data-role="spreadValue" data-key="${key}" aria-label="±${spread.toFixed(1)}">${spread.toFixed(1)}</span>
                  <span>Uncertain</span>
                </span>
                <input type="range" min="0" max="${SPREAD_MAX.toFixed(1)}" step="0.5" value="${spread.toFixed(1)}" data-role="spread" data-key="${key}" aria-label="Uncertainty for ${label}" />
              </label>
            </div>
          </div>
        </div>
        <div class="factor-bounds">
          <div class="factor-bound">
            <span class="factor-bound-label">Lower bound</span>
            <span class="factor-bound-value" data-role="lowerBound" data-key="${key}">--%</span>
          </div>
          <div class="factor-bound">
            <span class="factor-bound-label">Upper bound</span>
            <span class="factor-bound-value" data-role="upperBound" data-key="${key}">--%</span>
          </div>
        </div>
      `;

      return card;
    }

    function clamp(value, min = 0, max = 100) {
      return Math.min(Math.max(value, min), max);
    }

    function formatPercent(prob) {
      return `${(prob * 100).toFixed(1)}%`;
    }

    // The hot path (every pointermove/input event during a drag) runs a heavy
    // recalc: 3 canvas redraws + a 4000-sample Monte Carlo + a synchronous
    // localStorage write. A finger held on a touchscreen jitters constantly, so
    // pointermove fires 60+ times/sec; running all of that synchronously per
    // event saturates the main thread and trips iOS Safari's watchdog ("A
    // problem repeatedly occurred"). Coalesce recalc to at most once per frame
    // and debounce persistence so per-event cost stays bounded.
    let recalcFrame = null;
    function scheduleRecalc() {
      if (recalcFrame !== null) return;
      recalcFrame = requestAnimationFrame(() => {
        recalcFrame = null;
        if (DIAG) diagCounts.raf++;
        recalc();
      });
    }

    let persistTimer = null;
    function schedulePersist() {
      if (persistTimer !== null) clearTimeout(persistTimer);
      persistTimer = setTimeout(() => {
        persistTimer = null;
        persistSliderState();
      }, 250);
    }

    function flushPersist() {
      if (persistTimer === null) return;
      clearTimeout(persistTimer);
      persistTimer = null;
      persistSliderState();
    }

    function updateState(key, role, percentage) {
      if (DIAG) diagCounts.updateState++;
      const current = state.get(key) || { midpoint: 50, spread: 0 };
      if (role === 'midpoint') {
        current.midpoint = clamp(percentage);
      } else if (role === 'spread') {
        current.spread = clamp(percentage, 0, SPREAD_MAX);
      }
      state.set(key, current);
      syncInputs(key);
      scheduleRecalc();
      schedulePersist();
    }

    function syncInputs(key) {
      const { midpoint, spread } = state.get(key);
      const midpointRange = document.querySelector(`input[data-key="${key}"][data-role="midpoint"]`);
      const midpointValue = document.querySelector(`span[data-key="${key}"][data-role="midpointValue"]`);
      const spreadRange = document.querySelector(`input[data-key="${key}"][data-role="spread"]`);
      const spreadValue = document.querySelector(`span[data-key="${key}"][data-role="spreadValue"]`);

      if (midpointRange) midpointRange.value = midpoint.toFixed(1);
      if (midpointValue) {
        const midpointText = midpoint.toFixed(1);
        midpointValue.textContent = midpointText;
        midpointValue.setAttribute('aria-label', `${midpointText} percent`);
      }

      if (spreadRange) {
        spreadRange.max = SPREAD_MAX.toFixed(1);
        spreadRange.value = clamp(spread, 0, SPREAD_MAX).toFixed(1);
      }
      if (spreadValue) {
        const spreadText = clamp(spread, 0, SPREAD_MAX).toFixed(1);
        spreadValue.textContent = spreadText;
        spreadValue.setAttribute('aria-label', `±${spreadText}`);
      }
    }

    function recalc() {
      diagTickRecalc();
      const factors = config.map(({ key, label }) => {
        const { midpoint, spread } = state.get(key) || { midpoint: 50, spread: 0 };
        const lower = Math.max(0, (midpoint - spread) / 100);
        const upper = Math.min(1, (midpoint + spread) / 100);
        return {
          key,
          label,
          lower,
          upper,
          midpoint: midpoint / 100,
          spread: spread / 100,
          midpointPercent: midpoint,
          spreadPercent: spread
        };
      });

      factors.forEach(({ key, lower, upper }) => {
        const lowerEl = document.querySelector(`span[data-key="${key}"][data-role="lowerBound"]`);
        const upperEl = document.querySelector(`span[data-key="${key}"][data-role="upperBound"]`);
        if (lowerEl) lowerEl.textContent = formatPercent(lower);
        if (upperEl) upperEl.textContent = formatPercent(upper);
      });

      drawDistributions(factors);

      const lowerProduct = factors.reduce((acc, f) => acc * f.lower, 1);
      const upperProduct = factors.reduce((acc, f) => acc * f.upper, 1);
      const midpointProduct = factors.reduce((acc, f) => acc * f.midpoint, 1);

      document.getElementById('range').textContent = `${formatPercent(lowerProduct)} → ${formatPercent(upperProduct)}`;
      document.getElementById('midpointEstimate').textContent = formatPercent(midpointProduct);
      document.getElementById('stickyPdoomValue').textContent = formatPercent(midpointProduct);

      updateUncertaintyDriver(factors);

      const { p10, p90 } = simulateDistribution(factors);
      document.getElementById('p10').textContent = formatPercent(p10);
      document.getElementById('p90').textContent = formatPercent(p90);

      latestSnapshot = {
        factors,
        lowerProduct,
        upperProduct,
        midpointProduct,
        p10,
        p90
      };
    }

    function updateUncertaintyDriver(factors) {
      const widest = Math.max(...factors.map(f => f.upper - f.lower));
      const driverMessage = document.getElementById('driverMessage');
      const labels = factors.filter(f => (f.upper - f.lower) === widest).map(f => f.label);

      if (widest === 0) {
        driverMessage.textContent = 'All stages have fixed probabilities; no single stage dominates uncertainty.';
        return;
      }

      if (labels.length === 1) {
        driverMessage.textContent = `${labels[0]} currently drives the overall uncertainty.`;
      } else {
        driverMessage.textContent = `${labels.join(' & ')} jointly drive the overall uncertainty.`;
      }
    }

    // Box-Muller. The second variate is discarded rather than cached: holding it
    // between factors would make a draw depend on which factor asked last, and
    // 4000 samples of three factors is cheap enough not to care.
    function standardNormal(draw) {
      const u1 = Math.max(draw(), Number.MIN_VALUE);
      const u2 = draw();
      return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
    }

    // renderBellCurve draws a Gaussian centred on the midpoint with sigma = spread / 2,
    // so the band the card shades is +/-2 sigma, about 95% of the mass. Sample that
    // same curve. Drawing flat across the band instead would have the picture say the
    // estimate sits near the midpoint while the number said every value in the band
    // was equally likely.
    //
    // Truncated to [0, 1] by rejection, not by clamping: a probability outside it is
    // meaningless, and clamping would park the excess mass exactly on the endpoints.
    // The midpoint is always inside the interval, so an attempt accepts with p >= 0.5
    // and exhausting the budget is a 1-in-4-billion event; fall back to the midpoint
    // rather than return a value the model does not admit.
    const TRUNCATION_ATTEMPTS = 32;

    function sampleFactor(factor, draw) {
      const sigma = factor.spread / 2;
      if (sigma <= 0) return clamp(factor.midpoint, 0, 1);
      for (let attempt = 0; attempt < TRUNCATION_ATTEMPTS; attempt += 1) {
        const value = factor.midpoint + sigma * standardNormal(draw);
        if (value >= 0 && value <= 1) return value;
      }
      return clamp(factor.midpoint, 0, 1);
    }

    function simulateDistribution(factors) {
      const draw = mulberry32(0xC0D3C0DE);
      const samples = [];
      for (let i = 0; i < SAMPLES; i += 1) {
        let value = 1;
        for (const factor of factors) {
          value *= sampleFactor(factor, draw);
        }
        samples.push(value);
      }
      samples.sort((a, b) => a - b);
      const p10Index = Math.floor(0.10 * (samples.length - 1));
      const p90Index = Math.floor(0.90 * (samples.length - 1));
      return { p10: samples[p10Index], p90: samples[p90Index] };
    }

    function prepareCanvas(canvas) {
      if (!canvas) return null;
      const ratio = window.devicePixelRatio || 1;
      const displayWidth = canvas.clientWidth || canvas.width;
      const displayHeight = canvas.clientHeight || canvas.height;
      if (!displayWidth || !displayHeight) return null;
      const requiredWidth = Math.round(displayWidth * ratio);
      const requiredHeight = Math.round(displayHeight * ratio);
      if (canvas.width !== requiredWidth || canvas.height !== requiredHeight) {
        canvas.width = requiredWidth;
        canvas.height = requiredHeight;
      }
      const ctx = canvas.getContext('2d');
      if (!ctx) return null;
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.scale(ratio, ratio);
      return { ctx, width: displayWidth, height: displayHeight };
    }

    function renderBellCurve(canvas, midpoint, spread) {
      const prepared = prepareCanvas(canvas);
      if (!prepared) return;
      const { ctx, width, height } = prepared;

      const effectiveSpread = Math.max(spread, 0.1);
      const sigma = Math.max(effectiveSpread / 2, 0.5);
      const sampleCount = Math.max(80, Math.round(width));
      const values = [];
      let maxValue = 0;

      for (let i = 0; i <= sampleCount; i += 1) {
        const percent = (i / sampleCount) * 100;
        const exponent = (percent - midpoint) / sigma;
        const value = Math.exp(-0.5 * exponent * exponent);
        values.push(value);
        if (value > maxValue) {
          maxValue = value;
        }
      }
      if (maxValue === 0) return;

      const heightRange = Math.max(height - 12, 4);

      ctx.beginPath();
      ctx.moveTo(0, height);
      values.forEach((value, index) => {
        const x = (index / sampleCount) * width;
        const normalized = value / maxValue;
        const y = height - normalized * heightRange;
        ctx.lineTo(x, y);
      });
      ctx.lineTo(width, height);
      ctx.closePath();
      ctx.fillStyle = readCurveColors().fill;
      ctx.fill();

      ctx.beginPath();
      values.forEach((value, index) => {
        const x = (index / sampleCount) * width;
        const normalized = value / maxValue;
        const y = height - normalized * heightRange;
        if (index === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      });
      ctx.strokeStyle = readCurveColors().stroke;
      ctx.lineWidth = 2;
      ctx.stroke();

      const lowerBound = Math.max(0, midpoint - spread);
      const upperBound = Math.min(100, midpoint + spread);

      ctx.strokeStyle = readCurveColors().grid;
      ctx.lineWidth = 1;
      ctx.setLineDash([4, 6]);
      [lowerBound, upperBound].forEach((bound) => {
        const x = (bound / 100) * width;
        ctx.beginPath();
        ctx.moveTo(x, height);
        ctx.lineTo(x, 8);
        ctx.stroke();
      });
      ctx.setLineDash([]);

      const midpointX = (clamp(midpoint, 0, 100) / 100) * width;
      ctx.strokeStyle = readCurveColors().midline;
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.moveTo(midpointX, height);
      ctx.lineTo(midpointX, 6);
      ctx.stroke();

      ctx.fillStyle = readCurveColors().handle;
      ctx.beginPath();
      ctx.arc(midpointX, 6, 4, 0, Math.PI * 2);
      ctx.fill();
    }

    function drawDistributions(factors) {
      if (!Array.isArray(factors)) return;
      factors.forEach(({ key, midpointPercent, spreadPercent }) => {
        const canvas = document.querySelector(`canvas[data-role="distributionCanvas"][data-key="${key}"]`);
        if (!canvas) return;
        const fallbackState = state.get(key) || {};
        const fallbackMidpoint = typeof fallbackState.midpoint === 'number' ? fallbackState.midpoint : 50;
        const fallbackSpread = typeof fallbackState.spread === 'number' ? fallbackState.spread : 0;
        const midpoint = typeof midpointPercent === 'number' ? midpointPercent : fallbackMidpoint;
        const spread = typeof spreadPercent === 'number' ? spreadPercent : fallbackSpread;
        const normalizedMidpoint = clamp(midpoint, 0, 100);
        const normalizedSpread = clamp(spread, 0, SPREAD_MAX);
        renderBellCurve(canvas, normalizedMidpoint, normalizedSpread);
        const midpointText = normalizedMidpoint.toFixed(1);
        canvas.setAttribute('aria-valuenow', midpointText);
        canvas.setAttribute('aria-valuetext', `${midpointText} percent`);
      });
    }

    function midpointFromCanvasEvent(canvas, clientX) {
      if (!canvas || typeof clientX !== 'number') return null;
      const rect = canvas.getBoundingClientRect();
      if (!rect || rect.width === 0) return null;
      const ratio = (clientX - rect.left) / rect.width;
      if (!Number.isFinite(ratio)) return null;
      return clamp(ratio * 100, 0, 100);
    }

    function setupCanvasInteraction(key) {
      const canvas = document.querySelector(`canvas[data-role="distributionCanvas"][data-key="${key}"]`);
      if (!canvas || canvas.dataset.canvasInteractive === 'true') return;
      canvas.dataset.canvasInteractive = 'true';

      let pointerActive = false;
      let capturedPointerId = null;

      const applyMidpoint = (event) => {
        if (DIAG) diagCounts.pointer++;
        const percent = midpointFromCanvasEvent(canvas, event.clientX);
        if (percent === null) return;
        updateState(key, 'midpoint', percent);
      };

      const handlePointerDown = (event) => {
        event.preventDefault();
        pointerActive = true;
        if (canvas.setPointerCapture) {
          try {
            canvas.setPointerCapture(event.pointerId);
            capturedPointerId = event.pointerId;
          } catch (error) {
            capturedPointerId = null;
          }
        }
        applyMidpoint(event);
      };

      const handlePointerMove = (event) => {
        if (!pointerActive) return;
        event.preventDefault();
        applyMidpoint(event);
      };

      const handlePointerUp = (event) => {
        if (!pointerActive) return;
        event.preventDefault();
        applyMidpoint(event);
        pointerActive = false;
        if (capturedPointerId !== null && canvas.releasePointerCapture) {
          try {
            canvas.releasePointerCapture(capturedPointerId);
          } catch (error) {
            // Ignore release errors
          }
          capturedPointerId = null;
        }
      };

      const handlePointerCancel = (event) => {
        if (!pointerActive) return;
        pointerActive = false;
        if (capturedPointerId !== null && canvas.releasePointerCapture) {
          try {
            canvas.releasePointerCapture(capturedPointerId);
          } catch (error) {
            // Ignore release errors
          }
          capturedPointerId = null;
        }
      };

      canvas.addEventListener('pointerdown', handlePointerDown);
      canvas.addEventListener('pointermove', handlePointerMove);
      canvas.addEventListener('pointerup', handlePointerUp);
      canvas.addEventListener('pointerleave', handlePointerCancel);
      canvas.addEventListener('pointercancel', handlePointerCancel);

      canvas.addEventListener('keydown', (event) => {
        let delta = 0;
        if (event.key === 'ArrowLeft') {
          delta = -KEYBOARD_STEP;
        } else if (event.key === 'ArrowRight') {
          delta = KEYBOARD_STEP;
        } else if (event.key === 'PageUp') {
          delta = KEYBOARD_BIG_STEP;
        } else if (event.key === 'PageDown') {
          delta = -KEYBOARD_BIG_STEP;
        } else if (event.key === 'Home') {
          event.preventDefault();
          updateState(key, 'midpoint', 0);
          return;
        } else if (event.key === 'End') {
          event.preventDefault();
          updateState(key, 'midpoint', 100);
          return;
        } else {
          return;
        }

        event.preventDefault();
        const current = state.get(key) || {};
        const base = typeof current.midpoint === 'number' ? current.midpoint : 50;
        updateState(key, 'midpoint', clamp(base + delta, 0, 100));
      });
    }

    function handleRangeInput(event) {
      const role = event.target.dataset.role;
      const key = event.target.dataset.key;
      if (!role || !key) return;
      let value = Number(event.target.value);
      updateState(key, role, value);
    }

    function init() {
      diagStartHeartbeat();
      initWizard();
      const list = document.getElementById('factorList');
      if (!list) {
        console.error('Missing factor list container.');
        return;
      }
      setSlidersVisibility(false);
      const savedSliders = loadStoredSliderState();
      config.forEach((factor) => {
        const card = createFactorCard(factor);
        list.appendChild(card);
        const saved = savedSliders[factor.key];
        const savedMidpoint = saved && typeof saved.midpoint === 'number' ? clamp(saved.midpoint, 0, 100) : null;
        const savedSpread = saved && typeof saved.spread === 'number' ? clamp(saved.spread, 0, SPREAD_MAX) : null;
        const midpoint = savedMidpoint !== null
          ? savedMidpoint
          : ((factor.defaults.lower + factor.defaults.upper) / 2) * 100;
        const spread = savedSpread !== null
          ? savedSpread
          : ((factor.defaults.upper - factor.defaults.lower) / 2) * 100;
        state.set(factor.key, {
          midpoint,
          spread
        });
        setupCanvasInteraction(factor.key);
      });

      document.addEventListener('input', (event) => {
        if (DIAG) { diagCounts.input++; diagLog('input', { target: (event.target.tagName || '') + '#' + (event.target.id || '') + '[' + (event.target.type || '') + ']' }); }
        if (event.target.matches('input[type="range"]')) {
          handleRangeInput(event);
        }
      });

      config.forEach(({ key }) => syncInputs(key));
      recalc();
      persistSliderState();
      let resizeFrame = null;
      window.addEventListener('resize', () => {
        if (DIAG) diagCounts.resize++;
        if (!latestSnapshot) return;
        if (resizeFrame !== null) return;
        resizeFrame = requestAnimationFrame(() => {
          resizeFrame = null;
          if (latestSnapshot) drawDistributions(latestSnapshot.factors);
        });
      });

      initSupabase();

      const submitButton = document.getElementById('submitParametersButton');
      if (submitButton) {
        submitButton.addEventListener('click', submitParameters);
      }

      // iOS Safari interprets a horizontal swipe that STARTS within a few px of
      // the screen edge as a back/forward navigation gesture, even after a long
      // press. CSS overscroll-behavior does not block this on iOS, so guard it
      // by preventing default on edge-originating touches. Must be non-passive.
      const EDGE_SWIPE_GUARD_PX = 24;
      document.addEventListener('touchstart', (event) => {
        if (event.touches.length !== 1) return;
        const x = event.touches[0].pageX;
        if (x < EDGE_SWIPE_GUARD_PX || x > window.innerWidth - EDGE_SWIPE_GUARD_PX) {
          event.preventDefault();
        }
      }, { passive: false });

      // Persistence is debounced on the hot path; flush any pending write when
      // the page is backgrounded or closed so the latest slider state is saved.
      window.addEventListener('pagehide', flushPersist);
      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') flushPersist();
      });

      // Handle back/forward buttons
      window.addEventListener('popstate', () => {
        if (suppressHashChange) return;
        const hash = window.location.hash.replace('#', '');
        navigateTo(validHashes.includes(hash) ? hash : 'start', true);
      });

      // Navigate to hash on page load
      const initialHash = window.location.hash.replace('#', '');
      if (initialHash && validHashes.includes(initialHash)) {
        navigateTo(initialHash, true);
      }
    }

    init();
  </script>