<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Certain Probability Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      overflow: hidden;
    }

    /* Top Section */
    .header {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .banner-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .event-tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #334155;
      text-transform: uppercase;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .formula-tag {
      font-size: 13px;
      font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      padding: 2px 8px;
      border-radius: 6px;
    }

    /* Stage / Center Jar */
    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 220px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    /* Glass Jar */
    .jar-container {
      position: relative;
      width: 170px;
      height: 150px;
      background: rgba(224, 242, 254, 0.22);
      border: 3px solid rgba(56, 189, 248, 0.65);
      border-top: none;
      border-radius: 12px 12px 28px 28px;
      box-shadow: inset 0 -6px 12px rgba(186, 230, 253, 0.4), 0 4px 10px rgba(15, 23, 42, 0.05);
      display: flex;
      flex-wrap: wrap;
      align-content: flex-end;
      justify-content: center;
      padding: 12px 10px;
      gap: 8px 10px;
    }

    .jar-neck {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 130px;
      height: 12px;
      border: 3px solid rgba(56, 189, 248, 0.65);
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      background: rgba(224, 242, 254, 0.35);
    }

    .jar-rim {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 144px;
      height: 6px;
      background: rgba(56, 189, 248, 0.7);
      border-radius: 4px;
    }

    /* Marble */
    .marble {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #93c5fd 0%, #2563eb 50%, #1e40af 90%, #172554 100%);
      box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.3), inset 2px 2px 4px rgba(255, 255, 255, 0.6), 0 3px 5px rgba(30, 64, 175, 0.3);
      position: relative;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .marble::after {
      content: '';
      position: absolute;
      top: 5px;
      left: 7px;
      width: 8px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      transform: rotate(-30deg);
    }

    /* Animated Hand & Drawn Marble */
    .picker-actor {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
      z-index: 10;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }

    .hand-icon {
      font-size: 38px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    }

    .drawn-marble-slot {
      width: 38px;
      height: 38px;
      margin-top: -8px;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .drawn-marble-slot.visible {
      opacity: 1;
      transform: scale(1.1);
    }

    /* Result Floating Tag */
    .pick-result-pill {
      position: absolute;
      top: 10px;
      right: 12px;
      background: #2563eb;
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    }

    .pick-result-pill.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .mini-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #93c5fd;
      border: 1px solid #ffffff;
    }

    /* Bottom Controls & Counter */
    .bottom-section {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .tally-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 8px;
      width: 100%;
      max-width: 320px;
    }

    .tally-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .tally-val {
      font-weight: 800;
      color: #2563eb;
    }

    .tally-rate {
      font-weight: 800;
      color: #16a34a;
    }

    .btn-draw {
      background: #2563eb;
      color: #ffffff;
      border: none;
      outline: none;
      padding: 10px 22px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    }

    .btn-draw:hover {
      background: #1d4ed8;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
    }

    .btn-draw:active {
      transform: scale(0.97);
    }

    .btn-draw:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="banner-row">
      <span class="event-tag">Draw a Marble</span>
      <span class="status-badge">✓ CERTAIN (100%)</span>
    </div>
    <div class="formula-tag">6 / 6 Blue Marbles = 100%</div>
  </div>

  
  <div class="stage">
    
    <div class="pick-result-pill" id="resultPill">
      <span class="mini-dot"></span> Blue Drawn!
    </div>

    
    <div class="picker-actor" id="pickerActor">
      <div class="hand-icon" id="handIcon">🫳</div>
      <div class="drawn-marble-slot marble" id="drawnMarble"></div>
    </div>

    
    <div class="jar-container">
      <div class="jar-neck"></div>
      <div class="jar-rim"></div>
      <div class="marble" id="m1"></div>
      <div class="marble" id="m2"></div>
      <div class="marble" id="m3"></div>
      <div class="marble" id="m4"></div>
      <div class="marble" id="m5"></div>
      <div class="marble" id="m6"></div>
    </div>
  </div>

  
  <div class="bottom-section">
    <div class="tally-panel">
      <span class="tally-item">Picks: <span class="tally-val" id="totalPicks">0</span></span>
      <span>•</span>
      <span class="tally-item">Blue: <span class="tally-val" id="bluePicks">0</span></span>
      <span>•</span>
      <span class="tally-rate" id="blueRate">100%</span>
    </div>

    <button class="btn-draw" id="drawBtn">
      <span>✋</span> Reach In & Draw
    </button>
  </div>

  <script>
    let picks = 0;
    let blueCount = 0;
    let isAnimating = false;

    const drawBtn = document.getElementById('drawBtn');
    const picker = document.getElementById('pickerActor');
    const handIcon = document.getElementById('handIcon');
    const drawnMarble = document.getElementById('drawnMarble');
    const resultPill = document.getElementById('resultPill');
    const totalPicksEl = document.getElementById('totalPicks');
    const bluePicksEl = document.getElementById('bluePicks');
    const blueRateEl = document.getElementById('blueRate');
    const jarMarbles = [
      document.getElementById('m1'),
      document.getElementById('m2'),
      document.getElementById('m3'),
      document.getElementById('m4'),
      document.getElementById('m5'),
      document.getElementById('m6')
    ];

    function playSoftTone() {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(440, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.18);
        gain.gain.setValueAtTime(0.12, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.18);
      } catch (e) {}
    }

    function performDraw() {
      if (isAnimating) return;
      isAnimating = true;
      drawBtn.disabled = true;

      // Random target marble inside jar
      const targetIdx = Math.floor(Math.random() * jarMarbles.length);
      const targetMarble = jarMarbles[targetIdx];

      // Reset drawn slots
      drawnMarble.classList.remove('visible');
      resultPill.classList.remove('visible');
      handIcon.textContent = '🫳';

      // 1. Hand reaches down into jar
      picker.style.transform = 'translateX(-50%) translateY(85px)';

      setTimeout(() => {
        // 2. Grabs marble
        targetMarble.style.opacity = '0.3';
        targetMarble.style.transform = 'scale(0.8)';
        handIcon.textContent = '✊';
        drawnMarble.classList.add('visible');
        playSoftTone();

        setTimeout(() => {
          // 3. Hand lifts marble up into view
          picker.style.transform = 'translateX(-50%) translateY(-10px)';
          handIcon.textContent = '🫴';
          resultPill.classList.add('visible');

          // Update tally
          picks++;
          blueCount++;
          totalPicksEl.textContent = picks;
          bluePicksEl.textContent = blueCount;
          blueRateEl.textContent = '100%';

          setTimeout(() => {
            // 4. Return marble to jar neatly
            targetMarble.style.opacity = '1';
            targetMarble.style.transform = 'scale(1)';

            setTimeout(() => {
              // Reset hand position
              drawnMarble.classList.remove('visible');
              picker.style.transform = 'translateX(-50%) translateY(0)';
              handIcon.textContent = '🫳';
              isAnimating = false;
              drawBtn.disabled = false;
            }, 600);

          }, 900);

        }, 350);

      }, 400);
    }

    drawBtn.addEventListener('click', performDraw);
  </script>
</body>
</html>

Describing Events as Certain, Impossible, or Possible

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Possible Event — Coin Flip</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Top Banner */
    .banner {
      background: #fef08a;
      border: 2px solid #eab308;
      color: #854d0e;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.2px;
      padding: 8px 16px;
      border-radius: 999px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(234, 179, 8, 0.2);
      max-width: 100%;
    }

    .banner span {
      color: #713f12;
    }

    /* Main Diagram Area */
    .diagram-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 250px;
      margin: 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* SVG Connecting Lines */
    .branch-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .branch-path {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-dasharray: 6 6;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .branch-path.active {
      stroke: #eab308;
      stroke-width: 4;
      stroke-dasharray: none;
    }

    /* Central Spinning Coin */
    .center-coin-wrapper {
      position: absolute;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;
    }

    .coin-3d {
      width: 60px;
      height: 60px;
      perspective: 800px;
    }

    .coin-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      position: relative;
      transform-style: preserve-3d;
      animation: spinY 3.5s linear infinite;
      box-shadow: 0 4px 12px rgba(202, 138, 4, 0.3);
    }

    .coin-inner.flipping {
      animation: flipFast 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    }

    .coin-face {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden;
      background: radial-gradient(circle at 35% 35%, #fef08a, #eab308, #ca8a04);
      border: 3px solid #fef9c3;
      font-size: 28px;
    }

    .coin-face.back {
      transform: rotateY(180deg);
    }

    @keyframes spinY {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }

    @keyframes flipFast {
      0% { transform: rotateY(0deg) scale(1); }
      50% { transform: rotateY(720deg) scale(1.25); }
      100% { transform: rotateY(1440deg) scale(1); }
    }

    /* Outcome Cards */
    .cards-row {
      position: absolute;
      bottom: 8px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      z-index: 5;
    }

    .outcome-card {
      background: #fefce8;
      border: 2px solid #fef08a;
      border-radius: 16px;
      padding: 12px 16px;
      width: 44%;
      max-width: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .outcome-card.active {
      border-color: #ca8a04;
      background: #fef9c3;
      box-shadow: 0 4px 16px rgba(202, 138, 4, 0.25);
    }

    .card-coin {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fef08a, #eab308 65%, #ca8a04);
      border: 2px solid #fef9c3;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      box-shadow: 0 2px 6px rgba(161, 98, 7, 0.2);
    }

    .card-title {
      font-size: 15px;
      font-weight: 800;
      color: #854d0e;
    }

    /* Flip Action Button */
    .action-btn {
      background: #eab308;
      color: #422006;
      border: none;
      padding: 10px 24px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(234, 179, 8, 0.35);
      transition: background-color 0.15s ease, transform 0.15s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .action-btn:active {
      transform: translateY(1px);
      background: #ca8a04;
    }
  </style>
</head>
<body>

  
  <div class="banner">
    POSSIBLE <span>— Could be Heads, Could be Tails!</span>
  </div>

  
  <div class="diagram-stage">
    
    <svg class="branch-lines" viewBox="0 0 400 250" preserveAspectRatio="none">
      <path id="pathLeft" class="branch-path" d="M 200,60 C 200,120 100,120 100,165" />
      <path id="pathRight" class="branch-path" d="M 200,60 C 200,120 300,120 300,165" />
    </svg>

    
    <div class="center-coin-wrapper">
      <div class="coin-3d">
        <div class="coin-inner" id="spinningCoin">
          <div class="coin-face">😊</div>
          <div class="coin-face back">🛡️</div>
        </div>
      </div>
    </div>

    
    <div class="cards-row">
      
      <div class="outcome-card" id="cardHeads" onclick="selectOutcome('heads')">
        <div class="card-coin">😊</div>
        <div class="card-title">Heads</div>
      </div>

      
      <div class="outcome-card" id="cardTails" onclick="selectOutcome('tails')">
        <div class="card-coin">🛡️</div>
        <div class="card-title">Tails</div>
      </div>
    </div>
  </div>

  
  <button class="action-btn" id="flipBtn" onclick="flipCoin()">
    <span>🪙</span> Flip Coin
  </button>

  <script>
    const coinInner = document.getElementById('spinningCoin');
    const cardHeads = document.getElementById('cardHeads');
    const cardTails = document.getElementById('cardTails');
    const pathLeft = document.getElementById('pathLeft');
    const pathRight = document.getElementById('pathRight');
    const flipBtn = document.getElementById('flipBtn');

    let isFlipping = false;

    function selectOutcome(side) {
      if (isFlipping) return;
      
      cardHeads.classList.remove('active');
      cardTails.classList.remove('active');
      pathLeft.classList.remove('active');
      pathRight.classList.remove('active');

      if (side === 'heads') {
        cardHeads.classList.add('active');
        pathLeft.classList.add('active');
      } else if (side === 'tails') {
        cardTails.classList.add('active');
        pathRight.classList.add('active');
      }
    }

    function flipCoin() {
      if (isFlipping) return;
      isFlipping = true;
      flipBtn.disabled = true;

      // Clear highlights
      cardHeads.classList.remove('active');
      cardTails.classList.remove('active');
      pathLeft.classList.remove('active');
      pathRight.classList.remove('active');

      // Random outcome
      const outcome = Math.random() < 0.5 ? 'heads' : 'tails';

      // Animate Flip
      coinInner.style.animation = 'none';
      void coinInner.offsetWidth; // Trigger reflow
      coinInner.className = 'coin-inner flipping';

      setTimeout(() => {
        coinInner.className = 'coin-inner';
        coinInner.style.animation = 'spinY 3.5s linear infinite';
        selectOutcome(outcome);
        isFlipping = false;
        flipBtn.disabled = false;
      }, 800);
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      user-select: none;
    }

    .continuum-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* Number line axis */
    .axis-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ticks-row {
      display: flex;
      justify-content: space-between;
      padding: 0 6px;
      font-weight: 800;
      font-size: 18px;
      color: #475569;
    }

    /* The multi-colored likelihood bar */
    .bar-track {
      position: relative;
      width: 100%;
      height: 24px;
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .zone-seg {
      height: 100%;
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    .seg-impossible {
      width: 25%;
      background: #ef4444;
    }

    .seg-possible {
      width: 50%;
      background: #fbbf24;
    }

    .seg-certain {
      width: 25%;
      background: #22c55e;
    }

    /* Interactive cards */
    .cards-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 8px;
    }

    .zone-card {
      border: 2px solid transparent;
      border-radius: 14px;
      padding: 14px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      background: #f8fafc;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      text-align: center;
    }

    .icon-badge {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 900;
    }

    .zone-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    /* Card States */
    .card-impossible {
      background: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }
    .card-impossible .icon-badge {
      background: #ef4444;
      color: #ffffff;
    }

    .card-possible {
      background: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
    }
    .card-possible .icon-badge {
      background: #f59e0b;
      color: #ffffff;
    }

    .card-certain {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
    }
    .card-certain .icon-badge {
      background: #22c55e;
      color: #ffffff;
    }

    .zone-card.active {
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }

    /* Focus visual presentation */
    .visual-stage {
      width: 100%;
      height: 64px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 28px;
      transition: all 0.3s ease;
    }

    .stage-text {
      font-size: 15px;
      font-weight: 600;
      color: #334155;
    }

    @media (max-width: 380px) {
      .zone-title {
        font-size: 12px;
      }
      .icon-badge {
        width: 32px;
        height: 32px;
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <div class="continuum-wrap">
    
    <div class="axis-container">
      <div class="ticks-row">
        <span>0</span>
        <span>1</span>
      </div>
      <div class="bar-track">
        <div class="zone-seg seg-impossible" id="seg0"></div>
        <div class="zone-seg seg-possible" id="seg1"></div>
        <div class="zone-seg seg-certain" id="seg2"></div>
      </div>
    </div>

    
    <div class="cards-row">
      <div class="zone-card card-impossible active" id="btn0" onclick="selectZone(0)">
        <div class="icon-badge">✕</div>
        <div class="zone-title">Impossible<br>(0)</div>
      </div>

      <div class="zone-card card-possible" id="btn1" onclick="selectZone(1)">
        <div class="icon-badge">?</div>
        <div class="zone-title">Possible</div>
      </div>

      <div class="zone-card card-certain" id="btn2" onclick="selectZone(2)">
        <div class="icon-badge">✓</div>
        <div class="zone-title">Certain<br>(1)</div>
      </div>
    </div>

    
    <div class="visual-stage" id="stage">
      <span id="stageIcon">🦖</span>
      <span class="stage-text" id="stageText">0% Chance</span>
    </div>
  </div>

  <script>
    const data = [
      { icon: '🦖', text: '0% Chance', border: '#fecaca', bg: '#fef2f2' },
      { icon: '🎲', text: 'Between 0 and 1', border: '#fde68a', bg: '#fffbeb' },
      { icon: '🌅', text: '100% Chance', border: '#bbf7d0', bg: '#f0fdf4' }
    ];

    function selectZone(idx) {
      for (let i = 0; i < 3; i++) {
        const card = document.getElementById('btn' + i);
        const seg = document.getElementById('seg' + i);
        if (i === idx) {
          card.classList.add('active');
          seg.style.opacity = '1';
          seg.style.filter = 'brightness(1.05)';
        } else {
          card.classList.remove('active');
          seg.style.opacity = '0.4';
          seg.style.filter = 'none';
        }
      }

      const stage = document.getElementById('stage');
      const stageIcon = document.getElementById('stageIcon');
      const stageText = document.getElementById('stageText');

      stage.style.backgroundColor = data[idx].bg;
      stage.style.borderColor = data[idx].border;
      stageIcon.textContent = data[idx].icon;
      stageText.textContent = data[idx].text;
    }

    // Set initial impossible state
    selectZone(0);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      padding: 10px;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Likelihood Bar / Spectrum */
    .spectrum-container {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0 4px;
    }

    .spectrum-track {
      position: relative;
      height: 10px;
      background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
      border-radius: 6px;
    }

    .spectrum-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 18px;
      height: 18px;
      background: #ffffff;
      border: 3px solid #1e2945;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.25);
      transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .spectrum-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* 3-Column Sorting Board */
    .board-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-radius: 10px;
      padding: 6px;
      background: #f8fafc;
      border: 2px solid transparent;
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .column.active {
      background: #ffffff;
    }

    /* Column Headers */
    .col-header {
      padding: 6px 4px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
      letter-spacing: 0.3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .col-header .chance-tag {
      font-size: 10px;
      font-weight: 600;
      opacity: 0.9;
    }

    /* Column Themes */
    .col-impossible .col-header {
      background: #fee2e2;
      color: #991b1b;
    }
    .col-impossible.active {
      border-color: #ef4444;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    }

    .col-possible .col-header {
      background: #fef3c7;
      color: #92400e;
    }
    .col-possible.active {
      border-color: #f59e0b;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    }

    .col-certain .col-header {
      background: #d1fae5;
      color: #065f46;
    }
    .col-certain.active {
      border-color: #10b981;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    /* Cards */
    .cards-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .event-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      min-height: 86px;
      justify-content: center;
    }

    .card-icon {
      font-size: 24px;
      line-height: 1;
    }

    .card-text {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      color: #334155;
    }

    /* Bottom Info Status */
    .info-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px 12px;
      background: #f1f5f9;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      min-height: 38px;
    }

    .info-bar span.highlight {
      font-weight: 800;
    }

    @media (min-width: 500px) {
      body {
        padding: 16px;
        gap: 16px;
      }
      .col-header {
        font-size: 15px;
        padding: 8px 6px;
      }
      .col-header .chance-tag {
        font-size: 11px;
      }
      .card-icon {
        font-size: 28px;
      }
      .card-text {
        font-size: 13px;
      }
      .event-card {
        padding: 12px 8px;
        min-height: 98px;
      }
      .info-bar {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  
  <div class="spectrum-container">
    <div class="spectrum-labels">
      <span style="color:#dc2626;">0% Chance</span>
      <span style="color:#d97706;">May or May Not</span>
      <span style="color:#059669;">100% Chance</span>
    </div>
    <div class="spectrum-track">
      <div id="indicator" class="spectrum-indicator" style="left: 50%;"></div>
    </div>
  </div>

  
  <div class="board-grid">
    
    
    <div id="col-impossible" class="column col-impossible" onclick="selectType('impossible')">
      <div class="col-header">
        <span>🚫 Impossible</span>
        <span class="chance-tag">0% (Never)</span>
      </div>
      <div class="cards-stack">
        <div class="event-card">
          <span class="card-icon">🐕 💬</span>
          <span class="card-text">Dog speaks<br>fluent English</span>
        </div>
        <div class="event-card">
          <span class="card-icon">📅 ⏪</span>
          <span class="card-text">Saturday after<br>Sunday</span>
        </div>
      </div>
    </div>

    
    <div id="col-possible" class="column col-possible active" onclick="selectType('possible')">
      <div class="col-header">
        <span>🎲 Possible</span>
        <span class="chance-tag">Might happen</span>
      </div>
      <div class="cards-stack">
        <div class="event-card">
          <span class="card-icon">🌧️ ☂️</span>
          <span class="card-text">Rains tomorrow<br>afternoon</span>
        </div>
        <div class="event-card">
          <span class="card-icon">🖍️ 🎨</span>
          <span class="card-text">Draw red crayon<br>from mixed box</span>
        </div>
      </div>
    </div>

    
    <div id="col-certain" class="column col-certain" onclick="selectType('certain')">
      <div class="col-header">
        <span>✅ Certain</span>
        <span class="chance-tag">100% (Always)</span>
      </div>
      <div class="cards-stack">
        <div class="event-card">
          <span class="card-icon">⏰ ☀️</span>
          <span class="card-text">Tomorrow has<br>24 hours</span>
        </div>
        <div class="event-card">
          <span class="card-icon">🧊 🔥</span>
          <span class="card-text">Ice melts on a<br>hot frying pan</span>
        </div>
      </div>
    </div>

  </div>

  
  <div id="infoBar" class="info-bar">
    <span>Tap a column to explore likelihood</span>
  </div>

  <script>
    const states = {
      impossible: {
        pos: '8%',
        text: '🚫 <span class="highlight" style="color:#dc2626;">Impossible:</span> Cannot happen under any circumstance (0% chance).'
      },
      possible: {
        pos: '50%',
        text: '🎲 <span class="highlight" style="color:#d97706;">Possible:</span> Could happen, but not guaranteed (between 0% & 100%).'
      },
      certain: {
        pos: '92%',
        text: '✅ <span class="highlight" style="color:#059669;">Certain:</span> Guaranteed to happen every single time (100% chance).'
      }
    };

    function selectType(type) {
      document.querySelectorAll('.column').forEach(col => col.classList.remove('active'));
      const activeCol = document.getElementById('col-' + type);
      if (activeCol) {
        activeCol.classList.add('active');
      }

      const indicator = document.getElementById('indicator');
      const infoBar = document.getElementById('infoBar');

      if (states[type]) {
        indicator.style.left = states[type].pos;
        infoBar.innerHTML = states[type].text;
      }
    }

    // Default selection
    selectType('possible');
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 12px;
      overflow-x: hidden;
    }

    .spectrum-container {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Track line indicating probability scale */
    .scale-bar {
      position: relative;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(to right, #ef4444 0%, #f59e0b 50%, #10b981 100%);
      margin: 0 12px;
    }

    .scale-labels {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      margin-top: -8px;
      padding: 0 4px;
    }

    /* 3-card layout */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

    .chance-card {
      background: #ffffff;
      border-radius: 16px;
      border: 2px solid #e2e8f0;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    }

    .chance-card:focus-visible {
      outline: none;
    }

    /* Impossible Card (Red) */
    .card-impossible {
      border-color: #fecaca;
      background: #fffafa;
    }
    .card-impossible.active,
    .card-impossible:hover {
      border-color: #ef4444;
      box-shadow: 0 6px 16px rgba(239, 68, 68, 0.18);
      background: #fef2f2;
    }

    /* Possible Card (Yellow/Amber) */
    .card-possible {
      border-color: #fde68a;
      background: #fffdf5;
    }
    .card-possible.active,
    .card-possible:hover {
      border-color: #f59e0b;
      box-shadow: 0 6px 16px rgba(245, 158, 11, 0.18);
      background: #fffbeb;
    }

    /* Certain Card (Green) */
    .card-certain {
      border-color: #bbf7d0;
      background: #f8fdfa;
    }
    .card-certain.active,
    .card-certain:hover {
      border-color: #10b981;
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.18);
      background: #f0fdf4;
    }

    /* Icon circles */
    .icon-badge {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .card-impossible .icon-badge {
      background: #fee2e2;
      color: #dc2626;
    }
    .card-possible .icon-badge {
      background: #fef3c7;
      color: #d97706;
    }
    .card-certain .icon-badge {
      background: #dcfce7;
      color: #16a34a;
    }

    .card-title {
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 6px;
      letter-spacing: -0.2px;
    }

    .card-impossible .card-title { color: #b91c1c; }
    .card-possible .card-title { color: #b45309; }
    .card-certain .card-title { color: #15803d; }

    .card-pct {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .card-impossible .card-pct { background: #fee2e2; color: #991b1b; }
    .card-possible .card-pct { background: #fef3c7; color: #92400e; }
    .card-certain .card-pct { background: #dcfce7; color: #166534; }

    .card-subtext {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      color: #475569;
    }

    /* Example Callout */
    .example-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      min-height: 44px;
    }

    .example-emoji {
      font-size: 18px;
      line-height: 1;
    }

    @media (max-width: 440px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .chance-card {
        flex-direction: row;
        text-align: left;
        padding: 10px 12px;
        gap: 12px;
      }
      .icon-badge {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-bottom: 0;
        flex-shrink: 0;
      }
      .card-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .scale-bar, .scale-labels {
        display: none;
      }
    }
  </style>
</head>
<body>

  <div class="spectrum-container">
    
    <div class="scale-bar"></div>
    <div class="scale-labels">
      <span>0%</span>
      <span>50%</span>
      <span>100%</span>
    </div>

    
    <div class="cards-grid">
      
      <div class="chance-card card-impossible active" onclick="selectCard(0)" tabindex="0">
        <div class="icon-badge">✕</div>
        <div class="card-info">
          <div class="card-title">Impossible</div>
          <div class="card-pct">0% Chance</div>
          <div class="card-subtext">Can NEVER<br>happen</div>
        </div>
      </div>

      
      <div class="chance-card card-possible" onclick="selectCard(1)" tabindex="0">
        <div class="icon-badge">?</div>
        <div class="card-info">
          <div class="card-title">Possible</div>
          <div class="card-pct">Might happen</div>
          <div class="card-subtext">Could yes,<br>could no</div>
        </div>
      </div>

      
      <div class="chance-card card-certain" onclick="selectCard(2)" tabindex="0">
        <div class="icon-badge">✓</div>
        <div class="card-info">
          <div class="card-title">Certain</div>
          <div class="card-pct">100% Chance</div>
          <div class="card-subtext">WILL DEFINITELY<br>happen</div>
        </div>
      </div>
    </div>

    
    <div class="example-box" id="exampleCue">
      <span class="example-emoji" id="exEmoji">🦖</span>
      <span id="exText">A live dinosaur visits school today</span>
    </div>
  </div>

  <script>
    const examples = [
      { emoji: '🦖', text: 'A live dinosaur visits school today' },
      { emoji: '🎲', text: 'Rolling a 6 on a number cube' },
      { emoji: '🌅', text: 'The sun will rise tomorrow' }
    ];

    const cards = document.querySelectorAll('.chance-card');
    const exEmoji = document.getElementById('exEmoji');
    const exText = document.getElementById('exText');

    function selectCard(index) {
      cards.forEach((card, i) => {
        if (i === index) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });
      exEmoji.textContent = examples[index].emoji;
      exText.textContent = examples[index].text;
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .main-layout {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* Section: Available Outcomes */
    .section-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #64748b;
      margin-bottom: 8px;
    }

    .dice-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .die-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .die {
      width: 46px;
      height: 46px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
      display: grid;
      padding: 5px;
      position: relative;
    }

    .die-1 { grid-template: 1fr / 1fr; place-items: center; }
    .die-2 { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
    .die-3 { grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
    .die-4 { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
    .die-5 { grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
    .die-6 { grid-template: repeat(3, 1fr) / repeat(2, 1fr); }

    .pip {
      width: 8px;
      height: 8px;
      background: #1e2945;
      border-radius: 50%;
      place-self: center;
    }

    /* Die pip positions */
    .die-2 .pip:nth-child(2) { grid-column: 2; grid-row: 2; }
    .die-3 .pip:nth-child(1) { grid-column: 1; grid-row: 1; }
    .die-3 .pip:nth-child(2) { grid-column: 2; grid-row: 2; }
    .die-3 .pip:nth-child(3) { grid-column: 3; grid-row: 3; }
    .die-5 .pip:nth-child(1) { grid-column: 1; grid-row: 1; }
    .die-5 .pip:nth-child(2) { grid-column: 3; grid-row: 1; }
    .die-5 .pip:nth-child(3) { grid-column: 2; grid-row: 2; }
    .die-5 .pip:nth-child(4) { grid-column: 1; grid-row: 3; }
    .die-5 .pip:nth-child(5) { grid-column: 3; grid-row: 3; }

    .num-label {
      font-size: 13px;
      font-weight: 700;
      color: #059669;
    }

    /* Section: The Question & Stamp */
    .event-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
      margin-top: 4px;
    }

    .speech-bubble {
      position: relative;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 9px 8px 0;
      border-style: solid;
      border-color: #f1f5f9 transparent transparent;
      display: block;
      width: 0;
    }

    .speech-bubble::before {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 11px 9px 0;
      border-style: solid;
      border-color: #cbd5e1 transparent transparent;
      display: block;
      width: 0;
    }

    .result-display {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 120px;
    }

    /* Target Die (8) with No-Symbol */
    .target-die-wrap {
      position: relative;
      width: 76px;
      height: 76px;
    }

    .target-die {
      width: 76px;
      height: 76px;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      border-radius: 14px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      font-weight: 800;
      color: #94a3b8;
    }

    /* Red Prohibited Circle-Slash */
    .prohibition-icon {
      position: absolute;
      inset: -6px;
      width: calc(100% + 12px);
      height: calc(100% + 12px);
      pointer-events: none;
    }

    /* Stamp */
    .stamp {
      position: absolute;
      transform: rotate(-10deg);
      border: 4px solid #dc2626;
      color: #dc2626;
      font-size: 20px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      padding: 6px 14px;
      border-radius: 8px;
      background: rgba(254, 242, 242, 0.94);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
      z-index: 2;
    }
  </style>
</head>
<body>
  <div class="main-layout">
    
    <div style="text-align: center; width: 100%;">
      <div class="section-title">Standard Die Outcomes</div>
      <div class="dice-row">
        <div class="die-card">
          <div class="die die-1"><div class="pip"></div></div>
          <div class="num-label">1</div>
        </div>
        <div class="die-card">
          <div class="die die-2"><div class="pip"></div><div class="pip"></div></div>
          <div class="num-label">2</div>
        </div>
        <div class="die-card">
          <div class="die die-3"><div class="pip"></div><div class="pip"></div><div class="pip"></div></div>
          <div class="num-label">3</div>
        </div>
        <div class="die-card">
          <div class="die die-4">
            <div class="pip"></div><div class="pip"></div>
            <div class="pip"></div><div class="pip"></div>
          </div>
          <div class="num-label">4</div>
        </div>
        <div class="die-card">
          <div class="die die-5">
            <div class="pip"></div><div class="pip"></div><div class="pip"></div>
            <div class="pip"></div><div class="pip"></div>
          </div>
          <div class="num-label">5</div>
        </div>
        <div class="die-card">
          <div class="die die-6">
            <div class="pip"></div><div class="pip"></div>
            <div class="pip"></div><div class="pip"></div>
            <div class="pip"></div><div class="pip"></div>
          </div>
          <div class="num-label">6</div>
        </div>
      </div>
    </div>

    
    <div class="event-container">
      <div class="speech-bubble">Can you roll an 8?</div>

      <div class="result-display">
        <div class="target-die-wrap">
          <div class="target-die">8</div>
          <svg class="prohibition-icon" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="44" fill="none" stroke="#dc2626" stroke-width="8" opacity="0.9" />
            <line x1="19" y1="19" x2="81" y2="81" stroke="#dc2626" stroke-width="8" stroke-linecap="round" opacity="0.9" />
          </svg>
        </div>
        <div class="stamp">IMPOSSIBLE!</div>
      </div>
    </div>
  </div>
</body>
</html>

OGM.3.MD.7

Aligned learning resources

Related diagrams