Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine jumping into a crystal-clear mountain river on a hot summer afternoon, only to realize the current is pulling you away faster than you can swim. Even the strongest swimmers can get into serious trouble in seconds if they do not know what dangers to look for.

Achieving **independent cue-free execution** means internalizing safety habits—such as wearing a **U.S. Coast Guard**-approved life jacket on open water and checking water depth—without waiting for adult reminders.

What is the single most important rule every swimmer must follow, no matter how skilled they are?

The **Buddy System Principle** requires that you never swim alone regardless of your swimming ability, maintaining constant mutual visual contact at all times.

If one partner experiences muscle cramps, sudden exhaustion, or distress, the other can immediately respond and call for emergency assistance.

If a swimmer is in trouble, follow the non-**swimmer rescue protocol** hierarchy: 'Reach, Throw, Row, Don't Go.' Extend a pole or throw a buoyant device rather than entering the water, which prevents dangerous secondary drowning incidents.

<!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>Water Rescue Hierarchy</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8fafc;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    user-select: none;
  }
  .wrapper {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Hierarchy Steps Bar */
  .steps-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .step-btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .step-btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 3px 8px rgba(2,132,199,0.25);
  }
  .step-btn.danger.active {
    background: #e11d48;
    border-color: #e11d48;
    box-shadow: 0 3px 8px rgba(225,29,72,0.25);
  }

  /* Main Illustration Canvas */
  .stage {
    position: relative;
    width: 100%;
    height: 250px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  /* Environment */
  .dock {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32%;
    background: #e2e8f0;
    border-right: 4px solid #cbd5e1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 8px;
  }
  .dock-planks {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      #f1f5f9,
      #f1f5f9 22px,
      #e2e8f0 22px,
      #e2e8f0 26px
    );
    opacity: 0.8;
  }
  .water {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 68%;
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    overflow: hidden;
  }
  .water-waves {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 10%, transparent 20%);
    background-size: 32px 32px;
    opacity: 0.7;
  }

  /* Rescuer & Victim */
  .rescuer {
    position: absolute;
    left: 14%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 42px;
    z-index: 10;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  }
  .victim {
    position: absolute;
    right: 14%;
    top: 50%;
    transform: translate(50%, -50%);
    font-size: 38px;
    z-index: 10;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  }
  .victim-ripples {
    position: absolute;
    right: 14%;
    top: 54%;
    transform: translate(50%, -50%);
    width: 64px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    z-index: 5;
    animation: ripple 2s infinite ease-out;
  }
  @keyframes ripple {
    0% { transform: translate(50%, -50%) scale(0.6); opacity: 1; }
    100% { transform: translate(50%, -50%) scale(1.6); opacity: 0; }
  }

  /* Action Artifacts */
  .action-layer {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
  }
  .pole {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 58%;
    height: 7px;
    background: #d97706;
    border-radius: 4px;
    transform-origin: left center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: none;
  }
  .buoy {
    position: absolute;
    font-size: 36px;
    line-height: 1;
    display: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  }
  .throw-rope {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 2px;
    border-top: 2px dashed #ffffff;
    display: none;
  }
  .boat {
    position: absolute;
    font-size: 42px;
    line-height: 1;
    display: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
  }
  .dont-go-sign {
    position: absolute;
    left: 36%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 54px;
    line-height: 1;
    display: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  }
  .call-badge {
    position: absolute;
    left: 14%;
    top: 20%;
    transform: translate(-50%, -50%);
    background: #e11d48;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    display: none;
    box-shadow: 0 3px 8px rgba(225,29,72,0.3);
  }

  /* Playback / Step Controls */
  .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ctrl-btn:hover {
    background: #f1f5f9;
  }
  .dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
  }
  .dot.active {
    background: #0284c7;
    transform: scale(1.25);
  }
  .dot.danger.active {
    background: #e11d48;
  }
</style>
</head>
<body>

<div class="wrapper">
  
  <div class="steps-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Reach</button>
    <button class="step-btn" onclick="setStep(1)">2. Throw</button>
    <button class="step-btn" onclick="setStep(2)">3. Row</button>
    <button class="step-btn danger" onclick="setStep(3)">4. Don't Go</button>
  </div>

  
  <div class="stage">
    <div class="dock">
      <div class="dock-planks"></div>
    </div>
    <div class="water">
      <div class="water-waves"></div>
    </div>

    
    <div class="rescuer" id="rescuer">🧍</div>
    <div class="victim-ripples"></div>
    <div class="victim">🏊</div>

    
    <div class="action-layer">
      <div class="pole" id="pole"></div>
      <div class="throw-rope" id="rope"></div>
      <div class="buoy" id="buoy">🛟</div>
      <div class="boat" id="boat">🛶</div>
      <div class="dont-go-sign" id="dontGo">🚫</div>
      <div class="call-badge" id="callBadge">📞 911</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> Auto-Play
    </button>
    <div class="dots">
      <div class="dot active" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
      <div class="dot" onclick="setStep(3)"></div>
    </div>
  </div>
</div>

<script>
  let currentStep = 0;
  let isPlaying = true;
  let autoTimer = null;

  const buttons = document.querySelectorAll('.step-btn');
  const dots = document.querySelectorAll('.dot');
  const pole = document.getElementById('pole');
  const buoy = document.getElementById('buoy');
  const rope = document.getElementById('rope');
  const boat = document.getElementById('boat');
  const dontGo = document.getElementById('dontGo');
  const callBadge = document.getElementById('callBadge');
  const rescuer = document.getElementById('rescuer');

  function hideAll() {
    gsap.killTweensOf([pole, buoy, rope, boat, dontGo, callBadge, rescuer]);
    pole.style.display = 'none';
    buoy.style.display = 'none';
    rope.style.display = 'none';
    boat.style.display = 'none';
    dontGo.style.display = 'none';
    callBadge.style.display = 'none';
    rescuer.style.transform = 'translate(-50%, -50%)';
    rescuer.textContent = '🧍';
  }

  function setStep(idx) {
    currentStep = idx;
    buttons.forEach((btn, i) => btn.classList.toggle('active', i === idx));
    dots.forEach((d, i) => {
      d.classList.toggle('active', i === idx);
      d.classList.toggle('danger', idx === 3);
    });

    hideAll();

    if (idx === 0) {
      // 1. Reach
      pole.style.display = 'block';
      gsap.fromTo(pole, 
        { scaleX: 0, opacity: 0.4 }, 
        { scaleX: 1, opacity: 1, duration: 0.8, ease: "power2.out" }
      );
    } else if (idx === 1) {
      // 2. Throw
      buoy.style.display = 'block';
      rope.style.display = 'block';
      gsap.fromTo(rope, { width: 0 }, { width: '60%', duration: 0.7, ease: "power2.out" });
      gsap.fromTo(buoy, 
        { left: '18%', top: '50%', transform: 'translate(-50%, -50%) scale(0.6)' },
        { left: '76%', top: '50%', transform: 'translate(-50%, -50%) scale(1)', duration: 0.7, ease: "back.out(1.2)" }
      );
    } else if (idx === 2) {
      // 3. Row
      boat.style.display = 'block';
      rescuer.textContent = '🚣';
      gsap.fromTo(boat, 
        { left: '26%', top: '50%', transform: 'translate(-50%, -50%)' },
        { left: '62%', top: '50%', transform: 'translate(-50%, -50%)', duration: 1.2, ease: "power1.inOut" }
      );
      gsap.fromTo(rescuer,
        { left: '14%' },
        { left: '50%', duration: 1.2, ease: "power1.inOut" }
      );
    } else if (idx === 3) {
      // 4. Don't Go
      dontGo.style.display = 'block';
      callBadge.style.display = 'block';
      rescuer.textContent = '📱';
      gsap.fromTo(dontGo, 
        { scale: 0.2, opacity: 0 }, 
        { scale: 1, opacity: 1, duration: 0.5, ease: "back.out(1.5)" }
      );
      gsap.fromTo(callBadge,
        { y: -10, opacity: 0 },
        { y: 0, opacity: 1, duration: 0.4, delay: 0.2, ease: "power2.out" }
      );
    }
  }

  function startAutoPlay() {
    stopAutoPlay();
    autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % 4;
      setStep(currentStep);
    }, 3200);
  }

  function stopAutoPlay() {
    if (autoTimer) {
      clearInterval(autoTimer);
      autoTimer = null;
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    const icon = document.getElementById('playIcon');
    if (isPlaying) {
      icon.textContent = '⏸';
      startAutoPlay();
    } else {
      icon.textContent = '▶';
      stopAutoPlay();
    }
  }

  // Initialize
  setStep(0);
  startAutoPlay();
</script>
</body>
</html>

Having a buddy is essential, but what hidden physical dangers can catch even two prepared swimmers off guard?

When **recognizing aquatic hazards**, be aware that natural water bodies carry hidden risks like sudden drop-offs, submerged debris, strong undertows, and **cold water shock** in temperatures below $70^\circ\text{F}$ ($21^\circ\text{C}$).

In oceans and large lakes, a **rip current** is a narrow, powerful channel of fast-moving water that flows directly away from the shore.

<!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>Rip Current Escape Strategy</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
      -webkit-user-select: none;
    }

    .wrapper {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .btn-group {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .diagram-view {
      position: relative;
      width: 100%;
      height: 320px;
      border-radius: 12px;
      overflow: hidden;
      background: #0284c7;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .pulse-flow {
      stroke-dasharray: 8 6;
      animation: flowOut 1.5s linear infinite;
    }

    @keyframes flowOut {
      from { stroke-dashoffset: 28; }
      to { stroke-dashoffset: 0; }
    }

    .swimmer {
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tag {
      font-size: 12px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      letter-spacing: 0.5px;
    }

    .tag-dark {
      fill: #475569;
    }

    .caption {
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
      min-height: 22px;
    }
  </style>
</head>
<body>

<div class="wrapper">
  <div class="btn-group">
    <button class="btn active" id="btn1" onclick="setStep(0)">1. Caught</button>
    <button class="btn" id="btn2" onclick="setStep(1)">2. Swim Parallel</button>
    <button class="btn" id="btn3" onclick="setStep(2)">3. Return</button>
  </div>

  <div class="diagram-view">
    <svg viewBox="0 0 400 280">
      <defs>
        
        <linearGradient id="deepSea" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#0369a1"/>
          <stop offset="100%" stop-color="#0284c7"/>
        </linearGradient>
        <linearGradient id="sand" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fde047" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#fcd34d"/>
        </linearGradient>
        <linearGradient id="ripChannel" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="#0ea5e9" stop-opacity="0.4"/>
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.9"/>
        </linearGradient>

        <marker id="arrowRed" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#ef4444"/>
        </marker>
        <marker id="arrowGreen" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#22c55e"/>
        </marker>
        <marker id="arrowWhite" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#bae6fd"/>
        </marker>
      </defs>

      
      <rect x="0" y="0" width="400" height="280" fill="url(#deepSea)"/>

      
      <rect x="0" y="110" width="130" height="90" rx="16" fill="#38bdf8" opacity="0.35"/>
      <rect x="270" y="110" width="130" height="90" rx="16" fill="#38bdf8" opacity="0.35"/>
      <text x="65" y="158" class="tag" opacity="0.8">Sandbar</text>
      <text x="335" y="158" class="tag" opacity="0.8">Sandbar</text>

      
      <path d="M 10 130 Q 65 125 120 130 M 10 160 Q 65 155 120 160" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.6"/>
      <path d="M 280 130 Q 335 125 390 130 M 280 160 Q 335 155 390 160" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.6"/>

      
      <rect x="145" y="30" width="110" height="190" rx="8" fill="url(#ripChannel)"/>

      
      <g stroke="#bae6fd" stroke-width="2.5" fill="none" class="pulse-flow">
        <line x1="200" y1="210" x2="200" y2="40" marker-end="url(#arrowWhite)"/>
        <line x1="170" y1="190" x2="170" y2="60" marker-end="url(#arrowWhite)"/>
        <line x1="230" y1="190" x2="230" y2="60" marker-end="url(#arrowWhite)"/>
      </g>
      <text x="200" y="45" class="tag">RIP CURRENT</text>

      
      <path d="M 0 215 Q 200 230 400 215 L 400 280 L 0 280 Z" fill="url(#sand)"/>
      <path d="M 0 215 Q 200 230 400 215" stroke="#ffffff" stroke-width="3" fill="none" opacity="0.9"/>
      <text x="200" y="260" class="tag tag-dark">SHORE / BEACH</text>

      
      
      <path id="wrongPath" d="M 200 130 L 200 175" stroke="#ef4444" stroke-width="3.5" stroke-dasharray="4 4" fill="none" marker-end="url(#arrowRed)" opacity="0"/>

      
      <path id="escapeParallel" d="M 200 100 L 310 100" stroke="#22c55e" stroke-width="3.5" fill="none" marker-end="url(#arrowGreen)" opacity="0"/>

      
      <path id="escapeReturn" d="M 310 100 Q 330 150 300 215" stroke="#22c55e" stroke-width="3.5" fill="none" marker-end="url(#arrowGreen)" opacity="0"/>

      
      <g id="swimmer" class="swimmer" transform="translate(200, 140)">
        <circle cx="0" cy="0" r="11" fill="#f97316" stroke="#ffffff" stroke-width="2"/>
        <text x="0" y="4" font-size="11" text-anchor="middle" fill="#ffffff">🏊</text>
      </g>
    </svg>
  </div>

  <div class="caption" id="caption">Caught in seaward current</div>
</div>

<script>
  const positions = [
    { x: 200, y: 130, caption: "Do NOT fight current", showWrong: 1, showParallel: 0, showReturn: 0 },
    { x: 310, y: 100, caption: "Swim PARALLEL to shore", showWrong: 0, showParallel: 1, showReturn: 0 },
    { x: 300, y: 215, caption: "Swim diagonally to shore", showWrong: 0, showParallel: 0.3, showReturn: 1 }
  ];

  let currentStep = 0;
  let timer = null;

  function setStep(idx) {
    currentStep = idx;
    
    // Update buttons
    document.querySelectorAll('.btn').forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });

    const state = positions[idx];

    // Update Swimmer
    const swimmer = document.getElementById('swimmer');
    swimmer.setAttribute('transform', `translate(${state.x}, ${state.y})`);

    // Update Paths
    document.getElementById('wrongPath').style.opacity = state.showWrong;
    document.getElementById('escapeParallel').style.opacity = state.showParallel;
    document.getElementById('escapeReturn').style.opacity = state.showReturn;

    // Caption
    document.getElementById('caption').textContent = state.caption;
  }

  function autoPlay() {
    timer = setInterval(() => {
      const next = (currentStep + 1) % 3;
      setStep(next);
    }, 3200);
  }

  // Allow interaction to pause auto-cycle briefly
  document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', () => {
      clearInterval(timer);
      autoPlay();
    });
  });

  setStep(0);
  autoPlay();
</script>
</body>
</html>

Always enter unfamiliar water feet-first rather than diving headfirst, because murky water can hide shallow bottoms or submerged logs that cause severe neck and spine injuries.

For proper **emergency action** in a rip current, never fight the current directly toward shore; remain calm, float to conserve energy, swim parallel to the shoreline until clear of the channel, and then angle back to land.

If you witness someone struggling in the water, follow the **non-swimmer rescue protocol**: *Reach, Throw, Row, Don't Go*.

Extend a pole or throw a buoyant object instead of entering the water yourself, which prevents dangerous secondary drowning incidents.

You know how to stay safe while swimming in water — but what happens when you run out of water to drink on an outdoor adventure?

Water that is safe to drink and cook with without risk of illness is called **potable water**.

Under strict **safe drinking water criteria**, clear or running stream water is never automatically safe, as invisible pathogens and chemical toxins cannot be seen.

Untreated water often harbors microscopic biological pathogens like ***Giardia lamblia***, ***Cryptosporidium***, and ***E. coli*** that trigger severe gastrointestinal illness.

<!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>Water Safety and Safe Drinking Guidelines</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      padding: 12px;
      color: #1e2945;
      background: transparent;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      padding: 10px 8px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .tab-btn:hover {
      background: #f1f5f9;
    }

    .tab-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15);
    }

    .view-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .view-panel.active {
      display: flex;
    }

    .grid-2x2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .card-item {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .card-item:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .card-item.selected {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px #bae6fd;
    }

    .icon-box {
      font-size: 28px;
      line-height: 1;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 700;
    }

    .badge-safe {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-warn {
      background: #fef3c7;
      color: #b45309;
    }

    .badge-danger {
      background: #fee2e2;
      color: #b91c1c;
    }

    .action-display {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 52px;
    }

    .action-text {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .indicator-icon {
      font-size: 20px;
    }

    @media (max-width: 400px) {
      .card-title {
        font-size: 13px;
      }
      .badge {
        font-size: 11px;
      }
      .action-text {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" id="tab-swim" onclick="switchTab('swim')">
      🏊 Water Safety
    </button>
    <button class="tab-btn" id="tab-drink" onclick="switchTab('drink')">
      🚰 Safe Drinking
    </button>
  </div>

  
  <div class="view-panel active" id="panel-swim">
    <div class="grid-2x2">
      <div class="card-item selected" onclick="selectItem('swim', 0)">
        <div class="icon-box">🌊</div>
        <div class="card-title">River Current</div>
        <span class="badge badge-warn">Escape Route</span>
      </div>
      <div class="card-item" onclick="selectItem('swim', 1)">
        <div class="icon-box">🦺</div>
        <div class="card-title">Life Jacket</div>
        <span class="badge badge-safe">USCG Approved</span>
      </div>
      <div class="card-item" onclick="selectItem('swim', 2)">
        <div class="icon-box">👥</div>
        <div class="card-title">Buddy System</div>
        <span class="badge badge-safe">Never Alone</span>
      </div>
      <div class="card-item" onclick="selectItem('swim', 3)">
        <div class="icon-box">⬇️</div>
        <div class="card-title">Unknown Depth</div>
        <span class="badge badge-danger">Feet First</span>
      </div>
    </div>
    <div class="action-display">
      <div class="action-text" id="swim-action">🏊 Swim parallel to shoreline</div>
      <div class="indicator-icon" id="swim-icon">⚠️</div>
    </div>
  </div>

  
  <div class="view-panel" id="panel-drink">
    <div class="grid-2x2">
      <div class="card-item selected" onclick="selectItem('drink', 0)">
        <div class="icon-box">🏞️</div>
        <div class="card-title">Clear Stream</div>
        <span class="badge badge-danger">Untreated</span>
      </div>
      <div class="card-item" onclick="selectItem('drink', 1)">
        <div class="icon-box">🔥</div>
        <div class="card-title">Boil Water</div>
        <span class="badge badge-safe">1 Min Boil</span>
      </div>
      <div class="card-item" onclick="selectItem('drink', 2)">
        <div class="icon-box">🧪</div>
        <div class="card-title">Micro Filter</div>
        <span class="badge badge-safe">0.1 Micron</span>
      </div>
      <div class="card-item" onclick="selectItem('drink', 3)">
        <div class="icon-box">🧴</div>
        <div class="card-title">Disinfect</div>
        <span class="badge badge-safe">Chlorine / UV</span>
      </div>
    </div>
    <div class="action-display">
      <div class="action-text" id="drink-action">⚠️ Clear water can harbor pathogens</div>
      <div class="indicator-icon" id="drink-icon">🔬</div>
    </div>
  </div>

  <script>
    const swimDetails = [
      { text: "🏊 Swim parallel to shoreline", icon: "⚠️" },
      { text: "✓ Wear fastened life jacket", icon: "🦺" },
      { text: "✓ Always swim with a partner", icon: "👥" },
      { text: "🚫 Never dive into shallow water", icon: "⬇️" }
    ];

    const drinkDetails = [
      { text: "⚠️ Clear water can harbor pathogens", icon: "🔬" },
      { text: "🔥 Rolling boil kills pathogens", icon: "✓" },
      { text: "🧪 Filters parasites and bacteria", icon: "✓" },
      { text: "🧴 Chemical or UV purification", icon: "✓" }
    ];

    function switchTab(tab) {
      document.getElementById('tab-swim').classList.toggle('active', tab === 'swim');
      document.getElementById('tab-drink').classList.toggle('active', tab === 'drink');
      document.getElementById('panel-swim').classList.toggle('active', tab === 'swim');
      document.getElementById('panel-drink').classList.toggle('active', tab === 'drink');
    }

    function selectItem(tab, index) {
      const panel = document.getElementById('panel-' + tab);
      const cards = panel.querySelectorAll('.card-item');
      cards.forEach((card, i) => {
        card.classList.toggle('selected', i === index);
      });

      if (tab === 'swim') {
        document.getElementById('swim-action').textContent = swimDetails[index].text;
        document.getElementById('swim-icon').textContent = swimDetails[index].icon;
      } else {
        document.getElementById('drink-action').textContent = drinkDetails[index].text;
        document.getElementById('drink-icon').textContent = drinkDetails[index].icon;
      }
    }
  </script>
</body>
</html>

Among essential **water purification methods**, bring clear water to a rolling boil for at least $t = 1\text{ minute}$ (or $t = 3\text{ minutes}$ at elevations $> 6{,}500\text{ ft} / 2{,}000\text{ m}$), or use portable sub-micron filtration combined with chemical disinfection.

Whenever you head outdoors for swimming, hiking, or sports, carry your own sealed bottle of tap or purified water, and make sure your buddy does the same.

Water Safety and Safe Drinking Water Guidelines. Identify and perform water safety precautions including swimming with a buddy, recognizing hazards, and knowing when water is safe to drink.

American Red Cross: Water Safety & Swimming Competency Guidelines

CDC: Making Water Safe in an Emergency & Drinking Water Guidelines

NOAA Ocean Today: Rip Current Safety for Kids and Youth

To build independent, unprompted mastery (TEKS 116.26(b)(11)(B)), lessons should employ scenario-based decision trees and role-play simulations. Have students evaluate real-world outdoor recreational cases (e.g., river kayaking, beach visits, municipal boil notices) and verbalize safety protocols without teacher prompts before engaging in physical activities.

Water Safety and Safe Drinking Water Guidelines

The Buddy System Principle

Recognizing Aquatic Hazards