<!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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

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

    @media (max-width: 580px) {
      .columns-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .col-card {
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
    }

    /* Column 1 - Negative */
    .col-neg {
      background: #FFF7ED;
      border: 1.5px solid #FDBA74;
    }
    .badge-neg {
      background: #EA580C;
      color: #FFFFFF;
    }
    .col-neg .equation {
      color: #C2410C;
    }

    /* Column 2 - Zero */
    .col-zero {
      background: #F1F5F9;
      border: 1.5px solid #CBD5E1;
    }
    .badge-zero {
      background: #475569;
      color: #FFFFFF;
    }
    .col-zero .equation {
      color: #334155;
    }

    /* Column 3 - Positive */
    .col-pos {
      background: #F0FDF4;
      border: 1.5px solid #86EFAC;
    }
    .badge-pos {
      background: #16A34A;
      color: #FFFFFF;
    }
    .col-pos .equation {
      color: #15803D;
    }

    .pill-badge {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 999px;
      display: inline-block;
    }

    .equation {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .svg-container {
      width: 100%;
      max-width: 200px;
      height: 70px;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .col-desc {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
    }

    .col-neg .col-desc { color: #9A3412; }
    .col-zero .col-desc { color: #475569; }
    .col-pos .col-desc { color: #166534; }

    .takeaway-banner {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 10px;
      padding: 10px 14px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .takeaway-banner span {
      color: #0284C7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="columns-grid">
    
    <div class="col-card col-neg">
      <div class="pill-badge badge-neg">Negative Integer</div>
      <div class="equation">|-9| = 9</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 70">
          
          <path d="M 160 38 C 160 10, 40 10, 40 38" fill="none" stroke="#EA580C" stroke-width="2.5" stroke-dasharray="4 3" />
          <polygon points="40,38 35,29 46,31" fill="#EA580C" />
          
          <rect x="75" y="3" width="50" height="18" rx="4" fill="#EA580C" />
          <text x="100" y="16" fill="#FFFFFF" font-size="11" font-weight="700" text-anchor="middle">9 units</text>
          
          
          <line x1="15" y1="52" x2="185" y2="52" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" />
          <polygon points="15,49 8,52 15,55" fill="#94A3B8" />
          <polygon points="185,49 192,52 185,55" fill="#94A3B8" />
          
          
          <line x1="40" y1="46" x2="40" y2="58" stroke="#EA580C" stroke-width="2" />
          <circle cx="40" cy="52" r="4.5" fill="#EA580C" />
          <text x="40" y="68" fill="#EA580C" font-size="12" font-weight="700" text-anchor="middle">-9</text>

          <line x1="160" y1="47" x2="160" y2="57" stroke="#64748B" stroke-width="2" />
          <text x="160" y="68" fill="#64748B" font-size="12" font-weight="600" text-anchor="middle">0</text>
        </svg>
      </div>
      <div class="col-desc">9 steps to the left of 0</div>
    </div>

    
    <div class="col-card col-zero">
      <div class="pill-badge badge-zero">Zero</div>
      <div class="equation">|0| = 0</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 70">
          
          <rect x="75" y="3" width="50" height="18" rx="4" fill="#475569" />
          <text x="100" y="16" fill="#FFFFFF" font-size="11" font-weight="700" text-anchor="middle">0 units</text>
          
          
          <line x1="15" y1="52" x2="185" y2="52" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" />
          <polygon points="15,49 8,52 15,55" fill="#94A3B8" />
          <polygon points="185,49 192,52 185,55" fill="#94A3B8" />
          
          
          <line x1="100" y1="46" x2="100" y2="58" stroke="#334155" stroke-width="2" />
          <circle cx="100" cy="52" r="5" fill="#334155" />
          <circle cx="100" cy="52" r="9" fill="none" stroke="#475569" stroke-width="1.5" opacity="0.5" />
          <text x="100" y="68" fill="#334155" font-size="12" font-weight="700" text-anchor="middle">0</text>
        </svg>
      </div>
      <div class="col-desc">At 0 (no movement)</div>
    </div>

    
    <div class="col-card col-pos">
      <div class="pill-badge badge-pos">Positive Integer</div>
      <div class="equation">|15| = 15</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 70">
          
          <path d="M 40 38 C 40 10, 160 10, 160 38" fill="none" stroke="#16A34A" stroke-width="2.5" stroke-dasharray="4 3" />
          <polygon points="160,38 165,29 154,31" fill="#16A34A" />
          
          <rect x="73" y="3" width="54" height="18" rx="4" fill="#16A34A" />
          <text x="100" y="16" fill="#FFFFFF" font-size="11" font-weight="700" text-anchor="middle">15 units</text>
          
          
          <line x1="15" y1="52" x2="185" y2="52" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" />
          <polygon points="15,49 8,52 15,55" fill="#94A3B8" />
          <polygon points="185,49 192,52 185,55" fill="#94A3B8" />
          
          
          <line x1="40" y1="47" x2="40" y2="57" stroke="#64748B" stroke-width="2" />
          <text x="40" y="68" fill="#64748B" font-size="12" font-weight="600" text-anchor="middle">0</text>

          <line x1="160" y1="46" x2="160" y2="58" stroke="#16A34A" stroke-width="2" />
          <circle cx="160" cy="52" r="4.5" fill="#16A34A" />
          <text x="160" y="68" fill="#16A34A" font-size="12" font-weight="700" text-anchor="middle">15</text>
        </svg>
      </div>
      <div class="col-desc">15 steps to the right of 0</div>
    </div>
  </div>

  
  <div class="takeaway-banner">
    <span>✦ Key Rule:</span> Distance is always positive or zero — absolute value measures magnitude, not direction.
  </div>

</body>
</html>

Understanding Absolute Value as Distance from Zero

<!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;
    }

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

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }

    .btn-tab {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn-tab.active-all {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }

    .btn-tab.active-left {
      background: #0d9488;
      border-color: #0d9488;
      color: #ffffff;
    }

    .btn-tab.active-right {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .svg-wrap {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .arc-path {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }

    .arc-left {
      stroke: #0d9488;
    }

    .arc-right {
      stroke: #2563eb;
    }

    .jump-label {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      transition: opacity 0.3s ease;
    }

    .jump-label-left {
      fill: #0d9488;
    }

    .jump-label-right {
      fill: #2563eb;
    }

    .tick-num {
      font-size: 14px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    .tick-num.origin {
      font-size: 16px;
      font-weight: 800;
      fill: #1e2945;
    }

    .tick-num.target-left {
      font-weight: 800;
      fill: #0d9488;
    }

    .tick-num.target-right {
      font-weight: 800;
      fill: #2563eb;
    }

    .dimmed {
      opacity: 0.15 !important;
    }

    .cards-row {
      display: flex;
      width: 100%;
      max-width: 540px;
      gap: 16px;
      margin-top: 14px;
    }

    .val-card {
      flex: 1;
      padding: 12px 14px;
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .val-card-left {
      background: #f0fdfa;
      border: 2px solid #99f6e4;
    }

    .val-card-left.active {
      border-color: #0d9488;
      box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2);
    }

    .val-card-right {
      background: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .val-card-right.active {
      border-color: #2563eb;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

    .expr {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .expr-left {
      color: #0d9488;
    }

    .expr-right {
      color: #2563eb;
    }

    .dist-sub {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-tab active-all" id="btnBoth" onclick="setFocus('both')">Show Both</button>
    <button class="btn-tab" id="btnLeft" onclick="setFocus('left')">|-4| = 4</button>
    <button class="btn-tab" id="btnRight" onclick="setFocus('right')">|4| = 4</button>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 600 190" aria-label="Absolute value number line">
      <defs>
        
        <marker id="arrow-teal" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 2 L 8 5 L 0 8 z" fill="#0d9488" />
        </marker>
        
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 2 L 8 5 L 0 8 z" fill="#2563eb" />
        </marker>
        
        <marker id="axis-arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#64748b" />
        </marker>
      </defs>

      
      <g id="groupLeft">
        <path class="arc-path arc-left" d="M 300 120 Q 200 28 102 120" marker-end="url(#arrow-teal)" />
        <rect x="160" y="32" width="80" height="24" rx="12" fill="#ffffff" stroke="#99f6e4" stroke-width="1.5" />
        <text x="200" y="48" class="jump-label jump-label-left">4 units</text>
        <text x="90" y="108" font-size="18" text-anchor="middle">👣</text>
      </g>

      
      <g id="groupRight">
        <path class="arc-path arc-right" d="M 300 120 Q 400 28 498 120" marker-end="url(#arrow-blue)" />
        <rect x="360" y="32" width="80" height="24" rx="12" fill="#ffffff" stroke="#bfdbfe" stroke-width="1.5" />
        <text x="400" y="48" class="jump-label jump-label-right">4 units</text>
        <text x="510" y="108" font-size="18" text-anchor="middle">👣</text>
      </g>

      
      <line x1="30" y1="130" x2="570" y2="130" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 32 130 L 40 125 M 32 130 L 40 135" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 568 130 L 560 125 M 568 130 L 560 135" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />

      
      
      <line x1="50" y1="124" x2="50" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="50" y="154" class="tick-num">-5</text>

      
      <line x1="100" y1="122" x2="100" y2="138" stroke="#0d9488" stroke-width="2.5" />
      <circle cx="100" cy="130" r="5" fill="#0d9488" />
      <text x="100" y="154" class="tick-num target-left" id="numLeft">-4</text>

      
      <line x1="150" y1="124" x2="150" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="150" y="154" class="tick-num">-3</text>

      
      <line x1="200" y1="124" x2="200" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="200" y="154" class="tick-num">-2</text>

      
      <line x1="250" y1="124" x2="250" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="250" y="154" class="tick-num">-1</text>

      
      <line x1="300" y1="120" x2="300" y2="140" stroke="#1e2945" stroke-width="3" />
      <circle cx="300" cy="130" r="5.5" fill="#1e2945" />
      <text x="300" y="155" class="tick-num origin">0</text>

      
      <line x1="350" y1="124" x2="350" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="350" y="154" class="tick-num">1</text>

      
      <line x1="400" y1="124" x2="400" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="400" y="154" class="tick-num">2</text>

      
      <line x1="450" y1="124" x2="450" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="450" y="154" class="tick-num">3</text>

      
      <line x1="500" y1="122" x2="500" y2="138" stroke="#2563eb" stroke-width="2.5" />
      <circle cx="500" cy="130" r="5" fill="#2563eb" />
      <text x="500" y="154" class="tick-num target-right" id="numRight">4</text>

      
      <line x1="550" y1="124" x2="550" y2="136" stroke="#94a3b8" stroke-width="2" />
      <text x="550" y="154" class="tick-num">5</text>
    </svg>
  </div>

  <div class="cards-row">
    <div class="val-card val-card-left active" id="cardLeft" onclick="setFocus('left')">
      <div class="expr expr-left">|-4| = 4</div>
      <div class="dist-sub">Distance: 4 units</div>
    </div>
    <div class="val-card val-card-right active" id="cardRight" onclick="setFocus('right')">
      <div class="expr expr-right">|4| = 4</div>
      <div class="dist-sub">Distance: 4 units</div>
    </div>
  </div>

  <script>
    let currentMode = 'both';

    function setFocus(mode) {
      if (currentMode === mode && mode !== 'both') {
        mode = 'both';
      }
      currentMode = mode;

      const groupLeft = document.getElementById('groupLeft');
      const groupRight = document.getElementById('groupRight');
      const cardLeft = document.getElementById('cardLeft');
      const cardRight = document.getElementById('cardRight');
      const btnBoth = document.getElementById('btnBoth');
      const btnLeft = document.getElementById('btnLeft');
      const btnRight = document.getElementById('btnRight');
      const numLeft = document.getElementById('numLeft');
      const numRight = document.getElementById('numRight');

      // Reset classes
      btnBoth.className = 'btn-tab';
      btnLeft.className = 'btn-tab';
      btnRight.className = 'btn-tab';

      if (mode === 'left') {
        btnLeft.classList.add('active-left');
        groupLeft.classList.remove('dimmed');
        groupRight.classList.add('dimmed');
        cardLeft.classList.add('active');
        cardRight.classList.remove('active');
        cardLeft.style.opacity = '1';
        cardRight.style.opacity = '0.35';
        numLeft.style.opacity = '1';
        numRight.style.opacity = '0.35';
      } else if (mode === 'right') {
        btnRight.classList.add('active-right');
        groupLeft.classList.add('dimmed');
        groupRight.classList.remove('dimmed');
        cardLeft.classList.remove('active');
        cardRight.classList.add('active');
        cardLeft.style.opacity = '0.35';
        cardRight.style.opacity = '1';
        numLeft.style.opacity = '0.35';
        numRight.style.opacity = '1';
      } else {
        btnBoth.classList.add('active-all');
        groupLeft.classList.remove('dimmed');
        groupRight.classList.remove('dimmed');
        cardLeft.classList.add('active');
        cardRight.classList.add('active');
        cardLeft.style.opacity = '1';
        cardRight.style.opacity = '1';
        numLeft.style.opacity = '1';
        numRight.style.opacity = '1';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thermometer Drop Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 8px 4px;
      user-select: none;
      overflow-x: hidden;
    }
    .diagram-wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .svg-container {
      width: 100%;
      height: auto;
      display: block;
    }
    .controls {
      display: flex;
      gap: 5px;
      margin-top: 8px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 16px;
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .step-btn:focus-visible {
      outline: 2px solid #38bdf8;
      outline-offset: 2px;
    }
    .nav-btn {
      background: #e2e8f0;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      color: #1e293b;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .nav-btn:hover {
      background: #cbd5e1;
    }
    .nav-btn:focus-visible {
      outline: 2px solid #38bdf8;
      outline-offset: 2px;
    }

    @media (max-width: 380px) {
      .step-btn {
        padding: 4px 8px;
        font-size: 11px;
      }
      .nav-btn {
        width: 26px;
        height: 26px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram-wrapper">
    <svg class="svg-container" viewBox="0 0 460 355" aria-label="Thermometer showing temperature drop from +4 degrees to -3 degrees">
      <defs>
        
        <marker id="arrow1" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7"/>
        </marker>
        <marker id="arrow2" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb"/>
        </marker>
        
        <linearGradient id="freezeZone" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.7"/>
          <stop offset="100%" stop-color="#bae6fd" stop-opacity="0.85"/>
        </linearGradient>
      </defs>

      
      <rect x="10" y="175" width="98" height="155" fill="url(#freezeZone)" rx="6" />
      
      
      <rect x="14" y="188" width="18" height="128" rx="4" fill="#0284c7" fill-opacity="0.12" stroke="#38bdf8" stroke-width="0.8" />
      <text x="23" y="252" font-size="10" font-weight="800" fill="#0369a1" letter-spacing="1.2" transform="rotate(-90 23 252)" text-anchor="middle">BELOW 0°</text>

      
      <line x1="75" y1="175" x2="445" y2="175" stroke="#94a3b8" stroke-dasharray="3 3" stroke-width="1.5"/>

      
      <rect x="78" y="20" width="14" height="308" rx="7" fill="#e2e8f0" />
      
      
      <rect id="mercury" x="80" y="75" width="10" height="251" rx="5" fill="#f59e0b" style="transition: y 0.45s ease, height 0.45s ease, fill 0.45s ease;" />
      
      
      <circle cx="85" cy="330" r="14" fill="#0284c7" />

      
      
      <text x="68" y="29" font-size="13" font-weight="600" text-anchor="end" fill="#64748b">+6°</text>
      <line x1="72" y1="25" x2="78" y2="25" stroke="#64748b" stroke-width="1.5"/>

      
      <line x1="74" y1="50" x2="78" y2="50" stroke="#94a3b8" stroke-width="1"/>

      
      <text x="68" y="79" font-size="14" font-weight="800" text-anchor="end" fill="#d97706">+4°</text>
      <line x1="70" y1="75" x2="78" y2="75" stroke="#d97706" stroke-width="2.5"/>

      
      <line x1="74" y1="100" x2="78" y2="100" stroke="#94a3b8" stroke-width="1"/>
      <line x1="74" y1="125" x2="78" y2="125" stroke="#94a3b8" stroke-width="1"/>
      <line x1="74" y1="150" x2="78" y2="150" stroke="#94a3b8" stroke-width="1"/>

      
      <text x="68" y="179" font-size="14" font-weight="800" text-anchor="end" fill="#0f172a">0°</text>
      <line x1="66" y1="175" x2="78" y2="175" stroke="#0f172a" stroke-width="3"/>

      
      <line x1="74" y1="200" x2="78" y2="200" stroke="#94a3b8" stroke-width="1"/>
      <line x1="74" y1="225" x2="78" y2="225" stroke="#94a3b8" stroke-width="1"/>

      
      <text x="68" y="254" font-size="14" font-weight="800" text-anchor="end" fill="#2563eb">−3°</text>
      <line x1="70" y1="250" x2="78" y2="250" stroke="#2563eb" stroke-width="2.5"/>

      
      <line x1="74" y1="275" x2="78" y2="275" stroke="#94a3b8" stroke-width="1"/>
      <line x1="74" y1="300" x2="78" y2="300" stroke="#94a3b8" stroke-width="1"/>

      
      <text x="68" y="329" font-size="13" font-weight="600" text-anchor="end" fill="#64748b">−6°</text>
      <line x1="72" y1="325" x2="78" y2="325" stroke="#64748b" stroke-width="1.5"/>

      
      <circle id="startDot" cx="104" cy="75" r="5" fill="#d97706" />
      <text id="startLabel" x="115" y="79" font-size="13" font-weight="700" fill="#d97706">Start: +4°</text>

      
      <g id="step1Group" opacity="0" style="transition: opacity 0.35s ease;">
        <path d="M 104 80 C 146 105, 146 150, 107 172" fill="none" stroke="#0284c7" stroke-width="3" marker-end="url(#arrow1)" stroke-linecap="round"/>
        <rect x="145" y="115" width="138" height="25" rx="6" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1"/>
        <text x="152" y="132" font-size="12" font-weight="700" fill="#0369a1">Drop 4° to reach 0°</text>
      </g>

      
      <g id="step2Group" opacity="0" style="transition: opacity 0.35s ease;">
        <path d="M 104 180 C 142 198, 142 230, 107 247" fill="none" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow2)" stroke-linecap="round"/>
        <rect x="145" y="202" width="154" height="25" rx="6" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/>
        <text x="152" y="219" font-size="12" font-weight="700" fill="#1d4ed8">Drop 3° more = −3°F</text>
      </g>

      
      <g id="step3Group" opacity="0" style="transition: opacity 0.35s ease;">
        
        <path d="M 310 75 L 324 75 L 324 162.5 L 334 162.5 L 324 162.5 L 324 250 L 310 250" fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="342" y="145" width="108" height="36" rx="6" fill="#f8fafc" stroke="#64748b" stroke-width="1.5"/>
        <text x="350" y="161" font-size="10" font-weight="700" fill="#64748b" letter-spacing="0.5">TOTAL DROP</text>
        <text x="350" y="175" font-size="13" font-weight="800" fill="#0f172a">7° (4° + 3°)</text>
      </g>
    </svg>

    
    <div class="controls">
      <button class="nav-btn" id="prevBtn" title="Previous Step" aria-label="Previous Step">◀</button>
      <button class="step-btn active" data-step="0">1. Start (+4°)</button>
      <button class="step-btn" data-step="1">2. Drop 4°</button>
      <button class="step-btn" data-step="2">3. Drop 3°</button>
      <button class="step-btn" data-step="3">4. Total 7°</button>
      <button class="nav-btn" id="nextBtn" title="Next Step" aria-label="Next Step">▶</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;

    const mercury = document.getElementById('mercury');
    const step1Group = document.getElementById('step1Group');
    const step2Group = document.getElementById('step2Group');
    const step3Group = document.getElementById('step3Group');
    const stepBtns = document.querySelectorAll('.step-btn');

    // Mercury visual levels: y, height, color
    const levels = [
      { y: 75, h: 251, color: '#f59e0b' },  // +4°
      { y: 175, h: 151, color: '#0284c7' }, // 0°
      { y: 250, h: 76, color: '#2563eb' },  // -3°
      { y: 250, h: 76, color: '#2563eb' }   // -3° (total drop view)
    ];

    function updateStep(step) {
      currentStep = step;

      // Update button states
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Update mercury bar
      const lvl = levels[step];
      mercury.setAttribute('y', lvl.y);
      mercury.setAttribute('height', lvl.h);
      mercury.setAttribute('fill', lvl.color);

      // Update visibility of step annotations
      step1Group.style.opacity = step >= 1 ? '1' : '0';
      step2Group.style.opacity = step >= 2 ? '1' : '0';
      step3Group.style.opacity = step >= 3 ? '1' : '0';
    }

    stepBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => updateStep(idx));
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      updateStep((currentStep - 1 + totalSteps) % totalSteps);
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      updateStep((currentStep + 1) % totalSteps);
    });

    // Auto-advance every 4 seconds
    let timer = setInterval(() => {
      updateStep((currentStep + 1) % totalSteps);
    }, 4000);

    // Pause auto-advance on user tap/interaction
    document.body.addEventListener('pointerdown', () => {
      clearInterval(timer);
    }, { once: true });
  </script>
</body>
</html>

Negative Numbers in Temperature Contexts

<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px 8px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      padding: 5px 12px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30,41,69,0.25);
    }
    .stage {
      width: 100%;
      max-width: 440px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .bracket-path {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .badge {
      font-weight: 700;
      font-size: 12.5px;
      transition: opacity 0.3s ease;
    }
    .region {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="controls">
    <button class="btn active" id="btn-all" onclick="setMode('all')">All Spans</button>
    <button class="btn" id="btn-neg" onclick="setMode('neg')">Below 0°</button>
    <button class="btn" id="btn-pos" onclick="setMode('pos')">Above 0°</button>
    <button class="btn" id="btn-total" onclick="setMode('total')">Total Interval</button>
  </div>

  <div class="stage">
    <svg viewBox="0 0 430 420" aria-label="Thermometer showing total interval from -4°C to +6°C">
      <defs>
        
        <linearGradient id="warmGrad" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="#f97316"/>
          <stop offset="100%" stop-color="#ef4444"/>
        </linearGradient>
        <linearGradient id="coolGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="100%" stop-color="#0284c7"/>
        </linearGradient>
      </defs>

      
      <g id="zone-neg" class="region">
        <rect x="52" y="235" width="26" height="100" fill="#0284c7" opacity="0.12" rx="4"/>
      </g>
      <g id="zone-pos" class="region">
        <rect x="52" y="85" width="26" height="150" fill="#ea580c" opacity="0.12" rx="4"/>
      </g>

      
      <line x1="45" y1="235" x2="415" y2="235" stroke="#059669" stroke-width="2" stroke-dasharray="4 3"/>
      <rect x="305" y="223" width="105" height="24" rx="12" fill="#ecfdf5" stroke="#059669" stroke-width="1.5"/>
      <text x="357" y="239" text-anchor="middle" font-size="11.5" font-weight="700" fill="#047857">0°C Freezing</text>

      
      <rect x="57" y="30" width="16" height="350" rx="8" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2.5"/>
      
      
      
      <circle cx="65" cy="385" r="18" fill="url(#coolGrad)"/>
      <circle cx="65" cy="385" r="18" fill="none" stroke="#cbd5e1" stroke-width="2.5"/>
      
      
      <rect x="61" y="235" width="8" height="145" fill="url(#coolGrad)"/>
      <rect x="61" y="85" width="8" height="150" fill="url(#warmGrad)"/>
      
      
      <circle cx="65" cy="85" r="4" fill="#ef4444"/>

      
      
      <line x1="77" y1="35" x2="89" y2="35" stroke="#64748b" stroke-width="2"/>
      <text x="96" y="39" font-size="12" font-weight="600" fill="#64748b">+8°</text>

      
      <line x1="77" y1="85" x2="93" y2="85" stroke="#ea580c" stroke-width="2.5"/>
      <circle cx="65" cy="85" r="3" fill="#ffffff"/>
      <text x="96" y="89" font-size="13" font-weight="800" fill="#ea580c">+6°C</text>

      
      <line x1="77" y1="135" x2="87" y2="135" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="96" y="139" font-size="11.5" font-weight="500" fill="#94a3b8">+4°</text>

      
      <line x1="77" y1="185" x2="87" y2="185" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="96" y="189" font-size="11.5" font-weight="500" fill="#94a3b8">+2°</text>

      
      <line x1="77" y1="235" x2="95" y2="235" stroke="#059669" stroke-width="3"/>
      <text x="96" y="240" font-size="14" font-weight="800" fill="#047857">0°C</text>

      
      <line x1="77" y1="285" x2="87" y2="285" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="96" y="289" font-size="11.5" font-weight="500" fill="#94a3b8">-2°</text>

      
      <line x1="77" y1="335" x2="93" y2="335" stroke="#0284c7" stroke-width="2.5"/>
      <text x="96" y="339" font-size="13" font-weight="800" fill="#0284c7">-4°C</text>

      
      <line x1="77" y1="385" x2="89" y2="385" stroke="#64748b" stroke-width="2"/>
      <text x="96" y="389" font-size="12" font-weight="600" fill="#64748b">-6°</text>

      
      <g id="grp-neg" class="region">
        
        <path d="M 145 237 C 153 237, 153 280, 160 285 C 153 290, 153 333, 145 333" class="bracket-path" stroke="#0284c7"/>
        <rect x="168" y="271" width="108" height="28" rx="6" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1.5"/>
        <text x="222" y="289" text-anchor="middle" class="badge" fill="#0369a1">|-4| = 4° below</text>
      </g>

      
      <g id="grp-pos" class="region">
        
        <path d="M 145 87 C 153 87, 153 155, 160 160 C 153 165, 153 233, 145 233" class="bracket-path" stroke="#ea580c"/>
        <rect x="168" y="146" width="108" height="28" rx="6" fill="#fff7ed" stroke="#fed7aa" stroke-width="1.5"/>
        <text x="222" y="164" text-anchor="middle" class="badge" fill="#c2410c">|6| = 6° above</text>
      </g>

      
      <g id="grp-total" class="region">
        <path d="M 285 87 C 295 87, 295 205, 305 210 C 295 215, 295 333, 285 333" class="bracket-path" stroke="#7c3aed" stroke-width="3"/>
        
        <rect x="312" y="96" width="106" height="54" rx="8" fill="#f5f3ff" stroke="#ddd6fe" stroke-width="1.5"/>
        <text x="365" y="116" text-anchor="middle" font-size="11" font-weight="700" fill="#6d28d9">TOTAL SPAN</text>
        <text x="365" y="138" text-anchor="middle" font-size="14" font-weight="800" fill="#7c3aed">4° + 6° = 10°C</text>
      </g>
    </svg>
  </div>

  <script>
    function setMode(mode) {
      const modes = ['all', 'neg', 'pos', 'total'];
      modes.forEach(m => {
        const btn = document.getElementById('btn-' + m);
        if (btn) btn.classList.toggle('active', m === mode);
      });

      const grpNeg = document.getElementById('grp-neg');
      const grpPos = document.getElementById('grp-pos');
      const grpTotal = document.getElementById('grp-total');
      const zoneNeg = document.getElementById('zone-neg');
      const zonePos = document.getElementById('zone-pos');

      if (mode === 'all') {
        grpNeg.style.opacity = '1';
        grpPos.style.opacity = '1';
        grpTotal.style.opacity = '1';
        zoneNeg.style.opacity = '1';
        zonePos.style.opacity = '1';
      } else if (mode === 'neg') {
        grpNeg.style.opacity = '1';
        grpPos.style.opacity = '0.15';
        grpTotal.style.opacity = '0.15';
        zoneNeg.style.opacity = '1';
        zonePos.style.opacity = '0.05';
      } else if (mode === 'pos') {
        grpNeg.style.opacity = '0.15';
        grpPos.style.opacity = '1';
        grpTotal.style.opacity = '0.15';
        zoneNeg.style.opacity = '0.05';
        zonePos.style.opacity = '1';
      } else if (mode === 'total') {
        grpNeg.style.opacity = '0.5';
        grpPos.style.opacity = '0.5';
        grpTotal.style.opacity = '1';
        zoneNeg.style.opacity = '0.8';
        zonePos.style.opacity = '0.8';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .therm-svg {
      width: 100%;
      height: auto;
      max-height: 380px;
      overflow: visible;
    }
    .pill-group {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .temp-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .temp-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }
    .temp-btn:hover:not(.active) {
      background: #e2e8f0;
    }
    .mercury {
      transition: height 0.4s ease, y 0.4s ease;
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <svg class="therm-svg" viewBox="0 0 460 370" aria-label="Thermometer Number Line">
    <defs>
      
      <linearGradient id="warmGrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#ffedd5" stop-opacity="0.85"/>
        <stop offset="100%" stop-color="#fff7ed" stop-opacity="0.25"/>
      </linearGradient>
      
      <linearGradient id="coolGrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.85"/>
        <stop offset="100%" stop-color="#f0f9ff" stop-opacity="0.25"/>
      </linearGradient>
      
      <linearGradient id="mercGrad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#ef4444"/>
        <stop offset="100%" stop-color="#dc2626"/>
      </linearGradient>
    </defs>

    
    <rect x="175" y="25" width="265" height="145" rx="8" fill="url(#warmGrad)"/>
    
    <rect x="175" y="180" width="265" height="145" rx="8" fill="url(#coolGrad)"/>

    
    <text x="245" y="85" font-size="14" font-weight="700" fill="#c2410c">Above Zero</text>
    <text x="245" y="105" font-size="12" font-weight="600" fill="#ea580c">Positive (+5°, +10°, +15°)</text>

    <text x="245" y="240" font-size="14" font-weight="700" fill="#0369a1">Below Zero</text>
    <text x="245" y="260" font-size="12" font-weight="600" fill="#0284c7">Negative (−5°, −10°, −15°)</text>

    
    <line x1="35" y1="175" x2="440" y2="175" stroke="#0284c7" stroke-width="2" stroke-dasharray="6,4"/>
    
    
    <rect x="235" y="160" width="200" height="30" rx="15" fill="#0f172a"/>
    <text x="335" y="180" text-anchor="middle" font-size="11.5" font-weight="700" fill="#ffffff">Freezing / Zero Reference (0°)</text>

    
    <rect x="156" y="25" width="28" height="300" rx="14" fill="#f8fafc" stroke="#94a3b8" stroke-width="2"/>
    
    
    <circle cx="170" cy="331" r="22" fill="#ef4444" stroke="#94a3b8" stroke-width="2"/>

    
    
    
    <rect id="mercuryBar" class="mercury" x="162" y="100" width="16" height="231" rx="8" fill="url(#mercGrad)"/>
    <circle cx="170" cy="331" r="20" fill="url(#mercGrad)"/>

    
    
    <line x1="135" y1="25" x2="156" y2="25" stroke="#475569" stroke-width="2"/>
    <text x="125" y="30" text-anchor="end" font-size="14" font-weight="700" fill="#c2410c">+20°</text>

    
    <line x1="142" y1="62.5" x2="156" y2="62.5" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="125" y="67.5" text-anchor="end" font-size="13" font-weight="600" fill="#64748b">+15°</text>

    
    <line x1="135" y1="100" x2="156" y2="100" stroke="#475569" stroke-width="2"/>
    <text x="125" y="105" text-anchor="end" font-size="14" font-weight="700" fill="#c2410c">+10°</text>

    
    <line x1="142" y1="137.5" x2="156" y2="137.5" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="125" y="142.5" text-anchor="end" font-size="13" font-weight="600" fill="#64748b">+5°</text>

    
    <line x1="125" y1="175" x2="156" y2="175" stroke="#0284c7" stroke-width="3"/>
    <text x="118" y="180" text-anchor="end" font-size="16" font-weight="800" fill="#0f172a">0°</text>

    
    <line x1="142" y1="212.5" x2="156" y2="212.5" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="125" y="217.5" text-anchor="end" font-size="13" font-weight="600" fill="#64748b">−5°</text>

    
    <line x1="135" y1="250" x2="156" y2="250" stroke="#475569" stroke-width="2"/>
    <text x="125" y="255" text-anchor="end" font-size="14" font-weight="700" fill="#0369a1">−10°</text>

    
    <line x1="142" y1="287.5" x2="156" y2="287.5" stroke="#94a3b8" stroke-width="1.5"/>
    <text x="125" y="292.5" text-anchor="end" font-size="13" font-weight="600" fill="#64748b">−15°</text>

    
    <line x1="135" y1="325" x2="156" y2="325" stroke="#475569" stroke-width="2"/>
    <text x="125" y="330" text-anchor="end" font-size="14" font-weight="700" fill="#0369a1">−20°</text>

    
    <g id="readingPointer" style="transition: transform 0.4s ease;" transform="translate(0, 100)">
      <polygon points="190,0 202,-6 202,6" fill="#ef4444"/>
      <rect x="202" y="-12" width="38" height="24" rx="5" fill="#ef4444"/>
      <text id="readingText" x="221" y="4" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff">+10°</text>
    </g>
  </svg>

  
  <div class="pill-group">
    <button class="temp-btn" data-temp="15">+15° Warm</button>
    <button class="temp-btn active" data-temp="10">+10° Example</button>
    <button class="temp-btn" data-temp="0">0° Freezing</button>
    <button class="temp-btn" data-temp="-10">−10° Below Zero</button>
  </div>
</div>

<script>
  const mercuryBar = document.getElementById('mercuryBar');
  const readingPointer = document.getElementById('readingPointer');
  const readingText = document.getElementById('readingText');
  const buttons = document.querySelectorAll('.temp-btn');

  function setTemp(temp) {
    // 0° is at y=175. Range is +20 to -20 spanning 300px (7.5px per deg).
    const topY = 175 - (temp * 7.5);
    const height = 331 - topY;

    mercuryBar.setAttribute('y', topY);
    mercuryBar.setAttribute('height', height);
    readingPointer.style.transform = `translate(0px, ${topY}px)`;
    readingText.textContent = (temp > 0 ? '+' : '') + temp + '°';

    buttons.forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.dataset.temp, 10) === temp);
    });
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      setTemp(parseInt(btn.dataset.temp, 10));
    });
  });
</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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 8px 4px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 580px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .btn-group {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 6px;
    }
    button {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    button:hover {
      background: #e2e8f0;
    }
    button.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .highlight-glow {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <svg viewBox="0 0 540 340" aria-label="Thermometer comparison showing -5°C and -15°C">
      <defs>
        
        <linearGradient id="liquidGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#38bdf8" />
          <stop offset="100%" stop-color="#0284c7" />
        </linearGradient>
        
        <linearGradient id="arrowGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#94a3b8" />
          <stop offset="100%" stop-color="#0284c7" />
        </linearGradient>
        
        <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <line x1="40" y1="96" x2="400" y2="96" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4,4" />
      <rect x="42" y="83" width="76" height="20" rx="4" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />
      <text x="80" y="97" font-size="11" font-weight="700" fill="#475569" text-anchor="middle" dominant-baseline="middle">0°C Freezing</text>

      
      <g id="thermo-left" filter="url(#shadow)" style="cursor: pointer;" onclick="setMode('left')">
        
        <path d="M 142,40 A 12,12 0 0 1 166,40 L 166,218 A 26,26 0 1 1 142,218 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="2.5" />
        
        
        <path d="M 144.5,124 L 163.5,124 L 163.5,220 A 23.5,23.5 0 1 1 144.5,220 Z" fill="url(#liquidGrad)" />
        
        
        <ellipse cx="154" cy="124" rx="9.5" ry="2.5" fill="#bae6fd" />

        
        
        <line x1="166" y1="40" x2="173" y2="40" stroke="#94a3b8" stroke-width="1.5" />
        <text x="177" y="40" font-size="10" fill="#64748b" dominant-baseline="middle">+10</text>
        
        <line x1="166" y1="68" x2="171" y2="68" stroke="#94a3b8" stroke-width="1.5" />
        
        <line x1="166" y1="96" x2="176" y2="96" stroke="#0284c7" stroke-width="2" />
        <text x="179" y="96" font-size="11" font-weight="700" fill="#0284c7" dominant-baseline="middle">0</text>
        
        <line x1="166" y1="124" x2="176" y2="124" stroke="#0284c7" stroke-width="2" />
        <text x="179" y="124" font-size="11" font-weight="700" fill="#0284c7" dominant-baseline="middle">-5</text>
        
        <line x1="166" y1="152" x2="171" y2="152" stroke="#94a3b8" stroke-width="1.5" />
        <text x="177" y="152" font-size="10" fill="#64748b" dominant-baseline="middle">-10</text>
        
        <line x1="166" y1="180" x2="171" y2="180" stroke="#94a3b8" stroke-width="1.5" />
        <text x="177" y="180" font-size="10" fill="#64748b" dominant-baseline="middle">-15</text>

        
        <rect x="122" y="6" width="64" height="24" rx="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
        <text x="154" y="18" font-size="13" font-weight="800" fill="#0369a1" text-anchor="middle" dominant-baseline="middle">-5°C</text>

        
        <g id="bracket-left" class="highlight-glow">
          <path d="M 128,96 L 118,96 L 118,124 L 128,124" fill="none" stroke="#0284c7" stroke-width="2" />
          <path d="M 118,110 L 112,110" fill="none" stroke="#0284c7" stroke-width="2" />
          <rect x="36" y="100" width="72" height="20" rx="4" fill="#0284c7" />
          <text x="72" y="110" font-size="10" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">5 below 0</text>
        </g>
      </g>

      
      <g id="thermo-right" filter="url(#shadow)" style="cursor: pointer;" onclick="setMode('right')">
        
        <path d="M 302,40 A 12,12 0 0 1 326,40 L 326,218 A 26,26 0 1 1 302,218 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="2.5" />
        
        
        <path d="M 304.5,180 L 323.5,180 L 323.5,220 A 23.5,23.5 0 1 1 304.5,220 Z" fill="url(#liquidGrad)" />
        
        
        <ellipse cx="314" cy="180" rx="9.5" ry="2.5" fill="#bae6fd" />

        
        
        <line x1="326" y1="40" x2="333" y2="40" stroke="#94a3b8" stroke-width="1.5" />
        <text x="337" y="40" font-size="10" fill="#64748b" dominant-baseline="middle">+10</text>
        
        <line x1="326" y1="68" x2="331" y2="68" stroke="#94a3b8" stroke-width="1.5" />
        
        <line x1="326" y1="96" x2="336" y2="96" stroke="#0284c7" stroke-width="2" />
        <text x="339" y="96" font-size="11" font-weight="700" fill="#0284c7" dominant-baseline="middle">0</text>
        
        <line x1="326" y1="124" x2="331" y2="124" stroke="#94a3b8" stroke-width="1.5" />
        <text x="337" y="124" font-size="10" fill="#64748b" dominant-baseline="middle">-5</text>
        
        <line x1="326" y1="152" x2="331" y2="152" stroke="#94a3b8" stroke-width="1.5" />
        <text x="337" y="152" font-size="10" fill="#64748b" dominant-baseline="middle">-10</text>
        
        <line x1="326" y1="180" x2="336" y2="180" stroke="#0284c7" stroke-width="2" />
        <text x="339" y="180" font-size="11" font-weight="700" fill="#0284c7" dominant-baseline="middle">-15</text>

        
        <rect x="282" y="6" width="64" height="24" rx="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
        <text x="314" y="18" font-size="13" font-weight="800" fill="#0369a1" text-anchor="middle" dominant-baseline="middle">-15°C</text>

        
        <g id="bracket-right" class="highlight-glow">
          <path d="M 288,96 L 278,96 L 278,180 L 288,180" fill="none" stroke="#0284c7" stroke-width="2" />
          <path d="M 278,138 L 272,138" fill="none" stroke="#0284c7" stroke-width="2" />
          <rect x="194" y="128" width="74" height="20" rx="4" fill="#0284c7" />
          <text x="231" y="138" font-size="10" font-weight="700" fill="#ffffff" text-anchor="middle" dominant-baseline="middle">15 below 0</text>
        </g>
      </g>

      
      <g transform="translate(425, 60)">
        
        <path d="M 35,20 L 35,170" stroke="url(#arrowGrad)" stroke-width="6" stroke-linecap="round" />
        <path d="M 23,160 L 35,182 L 47,160" fill="#0284c7" stroke="#0284c7" stroke-linejoin="round" stroke-width="2" />

        
        <text x="35" y="0" font-size="12" font-weight="800" fill="#0284c7" text-anchor="middle">COLDER ↓</text>
        <text x="35" y="202" font-size="11" font-weight="700" fill="#0369a1" text-anchor="middle">Lower Level</text>
        <text x="35" y="217" font-size="10" font-weight="600" fill="#64748b" text-anchor="middle">Larger −Number</text>
      </g>

      
      <rect x="80" y="286" width="380" height="34" rx="8" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1.5" />
      <text x="270" y="303" font-size="12.5" font-weight="700" fill="#1e2945" text-anchor="middle" dominant-baseline="middle">
        -15°C is <tspan fill="#0284c7">colder</tspan> and <tspan fill="#0284c7">lower</tspan> than -5°C
      </text>
    </svg>

    <div class="btn-group">
      <button id="btn-both" class="active" onclick="setMode('both')">Compare Both</button>
      <button id="btn-left" onclick="setMode('left')">Focus -5°C</button>
      <button id="btn-right" onclick="setMode('right')">Focus -15°C</button>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const bLeft = document.getElementById('bracket-left');
      const bRight = document.getElementById('bracket-right');
      const tLeft = document.getElementById('thermo-left');
      const tRight = document.getElementById('thermo-right');
      
      document.querySelectorAll('.btn-group button').forEach(b => b.classList.remove('active'));

      if (mode === 'left') {
        bLeft.style.opacity = '1';
        bRight.style.opacity = '0.2';
        tLeft.style.opacity = '1';
        tRight.style.opacity = '0.4';
        document.getElementById('btn-left').classList.add('active');
      } else if (mode === 'right') {
        bLeft.style.opacity = '0.2';
        bRight.style.opacity = '1';
        tLeft.style.opacity = '0.4';
        tRight.style.opacity = '1';
        document.getElementById('btn-right').classList.add('active');
      } else {
        bLeft.style.opacity = '1';
        bRight.style.opacity = '1';
        tLeft.style.opacity = '1';
        tRight.style.opacity = '1';
        document.getElementById('btn-both').classList.add('active');
      }
    }
  </script>
</body>
</html>

OGM.6.NS.4

Aligned learning resources

Related diagrams