Progressive Muscle Relaxation — Carla E. Marin, PhD

  
    
<head>
<meta charset=&quot;UTF-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
<title>5-Minute Progressive Muscle Relaxation</title>
<style>
  :root{
    --bg1:#1b2a4a; --bg2:#33507e;
    --accent:#7fb2d9; --tense:#e6a15c; --release:#8fd3b6;
    --text:#eaf1fa; --muted:#a9bcd6;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{min-height:100%;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif;
    background:radial-gradient(circle at 50% 25%,var(--bg2),var(--bg1) 72%);
    color:var(--text); min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:24px; transition:background 1.2s ease;
  }
  body.tense{--accent:var(--tense);}
  body.release{--accent:var(--release);}
  .wrap{width:100%; max-width:600px; text-align:center;}
  h1{font-weight:600; font-size:1.5rem; letter-spacing:.5px; margin-bottom:6px;}
  h2{font-weight:600; font-size:1.15rem; margin-bottom:14px;}
  .sub{color:var(--muted); font-size:.95rem; margin-bottom:24px; line-height:1.55;}
  .screen{display:none;}
  .screen.active{display:block; animation:fade .5s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  /* ---- Thermometer ---- */
  .thermo-block{margin:8px auto 20px; max-width:420px;}
  .thermo{
    display:flex; align-items:flex-end; justify-content:center; gap:18px;
    margin:14px 0;
  }
  .tube{
    position:relative; width:34px; height:200px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    border-radius:20px; overflow:hidden;
  }
  .mercury{
    position:absolute; bottom:0; left:0; right:0; height:0%;
    background:linear-gradient(to top,#5b8fd0,#8fd3b6);
    border-radius:0 0 20px 20px; transition:height .25s ease;
  }
  .bulb{
    width:52px;height:52px;border-radius:50%;
    background:linear-gradient(135deg,#5b8fd0,#8fd3b6);
    margin:-14px auto 0; position:relative; z-index:2;
    display:flex;align-items:center;justify-content:center;font-weight:700;color:#0e1b31;
  }
  .thermo-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;}
  .thermo-val{font-size:2.4rem;font-weight:700;line-height:1;}
  .thermo-word{color:var(--muted);font-size:.9rem;min-height:1.2em;}
  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;max-width:340px;height:6px;
    border-radius:6px;background:rgba(255,255,255,.18);outline:none;margin:14px auto 4px;display:block;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
    background:var(--release);cursor:pointer;border:3px solid #12203a;
  }
  input[type=range]::-moz-range-thumb{
    width:26px;height:26px;border-radius:50%;background:var(--release);cursor:pointer;border:3px solid #12203a;
  }
  .scale-ends{display:flex;justify-content:space-between;max-width:340px;margin:0 auto;color:var(--muted);font-size:.75rem;}

  /* ---- Exercise stage ---- */
  .stage{position:relative;height:250px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .orb{
    width:150px;height:150px;border-radius:50%;
    background-color:var(--accent);
    background:radial-gradient(circle at 35% 30%,var(--accent),transparent 72%),
               radial-gradient(circle at 65% 70%,var(--accent),transparent 70%),var(--accent);
    box-shadow:0 0 60px 8px color-mix(in srgb,var(--accent) 45%,transparent);
    display:flex;align-items:center;justify-content:center;
    transition:transform 3.5s ease-in-out, background-color 1.2s ease, box-shadow 1.2s ease;
  }
  .ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
    width:150px;height:150px;animation:pulse 4s ease-out infinite;opacity:0;}
  .ring:nth-child(2){animation-delay:1.3s;} .ring:nth-child(3){animation-delay:2.6s;}
  @keyframes pulse{0%{transform:scale(1);opacity:.5;}100%{transform:scale(2.1);opacity:0;}}
  body.breathe-in .orb{transform:scale(1.35);}
  body.breathe-out .orb{transform:scale(.85);}
  body.tensing .orb{transform:scale(1.12);animation:shiver .18s linear infinite;}
  @keyframes shiver{0%{margin-left:0;}25%{margin-left:-2px;}75%{margin-left:2px;}100%{margin-left:0;}}
  .orb-label{font-size:1.05rem;font-weight:600;letter-spacing:1px;color:#0e1b31;text-shadow:0 1px 6px rgba(0,0,0,.3);}
  .phase{font-size:1.15rem;font-weight:600;min-height:1.6em;margin-bottom:6px;}
  .cue{color:var(--muted);font-size:1rem;min-height:2.6em;line-height:1.4;margin-bottom:16px;padding:0 10px;}
  .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.13);overflow:hidden;margin-bottom:8px;}
  .fill{height:100%;width:0;background:var(--accent);transition:width .5s linear;}
  .time{color:var(--muted);font-size:.85rem;margin-bottom:20px;font-variant-numeric:tabular-nums;}

  .controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  button{font-family:inherit;font-size:.95rem;font-weight:600;color:var(--text);
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
    padding:12px 22px;border-radius:30px;cursor:pointer;transition:background .2s,transform .1s;}
  button:hover{background:rgba(255,255,255,.2);}
  button:active{transform:scale(.96);}
  button.primary{background:var(--accent);color:#12203a;border-color:transparent;padding:14px 34px;font-size:1.05rem;}
  .hidden{display:none!important;}

  /* voice controls */
  .voicebar{margin-top:18px;color:var(--muted);font-size:.8rem;display:flex;flex-direction:column;gap:6px;align-items:center;}
  .voicebar .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
  select{font-family:inherit;font-size:.82rem;color:var(--text);background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:7px 9px;max-width:260px;}
  .mini{padding:8px 16px;font-size:.85rem;}

  /* reflection */
  .qcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:14px;padding:16px 16px 18px;margin:14px 0;text-align:left;}
  .qcard p.q{font-weight:600;margin-bottom:10px;font-size:.98rem;}
  .chips{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{padding:8px 14px;border-radius:20px;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);cursor:pointer;font-size:.85rem;user-select:none;transition:.15s;}
  .chip.sel{background:var(--release);color:#12203a;border-color:transparent;font-weight:600;}
  textarea{width:100%;min-height:64px;font-family:inherit;font-size:.9rem;color:var(--text);
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:10px;
    padding:10px;resize:vertical;margin-top:4px;}
  .shift{font-size:1.05rem;margin:6px 0 4px;}
  .shift b{color:var(--release);}
  .summary{white-space:pre-wrap;text-align:left;background:rgba(0,0,0,.22);border-radius:12px;
    padding:14px;font-size:.85rem;line-height:1.5;margin-top:12px;}
  .note{margin-top:22px;color:var(--muted);font-size:.78rem;line-height:1.5;}
</style>
</head>
<body>
<div class=&quot;wrap&quot;>

  <!-- ============ INTRO ============ -->
  <section class=&quot;screen active&quot; id=&quot;screen-intro&quot;>
    <h1>Progressive Muscle Relaxation</h1>
    <div class=&quot;sub&quot;>A guided 5-minute exercise. Find a quiet spot where you can sit or lie down comfortably.</div>

    <div class=&quot;thermo-block&quot;>
      <h2>First, how calm do you feel right now?</h2>
      <div class=&quot;thermo&quot;>
        <div>
          <div class=&quot;tube&quot;><div class=&quot;mercury&quot; id=&quot;merc-before&quot;></div></div>
          <div class=&quot;bulb&quot; id=&quot;bulb-before&quot;>5</div>
        </div>
        <div class=&quot;thermo-side&quot;>
          <span class=&quot;thermo-val&quot; id=&quot;val-before&quot;>5</span>
          <span class=&quot;thermo-word&quot; id=&quot;word-before&quot;>Neutral</span>
        </div>
      </div>
      <input type=&quot;range&quot; id=&quot;range-before&quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;5&quot; step=&quot;1&quot;>
      <div class=&quot;scale-ends&quot;><span>0 - tense / on edge</span><span>calm / at ease - 10</span></div>
    </div>

    <div class=&quot;controls&quot;>
      <button class=&quot;primary&quot; id=&quot;startBtn&quot;>Begin</button>
    </div>

    <div class=&quot;voicebar&quot; id=&quot;voicebar&quot;>
      <div class=&quot;row&quot;>
        <button class=&quot;mini&quot; id=&quot;voiceBtn&quot;>Guide voice: on</button>
        <label>Voice: <select id=&quot;voiceSelect&quot;></select></label>
      </div>
      <div id=&quot;voiceHint&quot;>Headphones recommended. Try the voice options to find the most natural one on your device.</div>
    </div>

    <div class=&quot;note&quot;>
      The narration uses your device's built-in voice, so no internet or downloads are needed once this page is open.
      Not a substitute for professional care. If you feel dizzy or unwell, stop and rest.
    </div>
  </section>

  <!-- ============ EXERCISE ============ -->
  <section class=&quot;screen&quot; id=&quot;screen-exercise&quot;>
    <h1>Progressive Muscle Relaxation</h1>
    <div class=&quot;stage&quot;>
      <span class=&quot;ring&quot;></span><span class=&quot;ring&quot;></span><span class=&quot;ring&quot;></span>
      <div class=&quot;orb&quot;><span class=&quot;orb-label&quot; id=&quot;orbLabel&quot;></span></div>
    </div>
    <div class=&quot;phase&quot; id=&quot;phase&quot;></div>
    <div class=&quot;cue&quot; id=&quot;cue&quot;></div>
    <div class=&quot;bar&quot;><div class=&quot;fill&quot; id=&quot;fill&quot;></div></div>
    <div class=&quot;time&quot; id=&quot;time&quot;>5:00</div>
    <div class=&quot;controls&quot;>
      <button id=&quot;pauseBtn&quot;>Pause</button>
      <button id=&quot;restartBtn&quot;>Restart</button>
      <button id=&quot;voiceBtn2&quot;>Voice on</button>
    </div>
  </section>

  <!-- ============ REFLECTION ============ -->
  <section class=&quot;screen&quot; id=&quot;screen-reflect&quot;>
    <h1>Nicely done.</h1>
    <div class=&quot;sub&quot;>Take a moment to check in with yourself before you go.</div>

    <div class=&quot;thermo-block&quot;>
      <h2>How calm do you feel now?</h2>
      <div class=&quot;thermo&quot;>
        <div>
          <div class=&quot;tube&quot;><div class=&quot;mercury&quot; id=&quot;merc-after&quot;></div></div>
          <div class=&quot;bulb&quot; id=&quot;bulb-after&quot;>5</div>
        </div>
        <div class=&quot;thermo-side&quot;>
          <span class=&quot;thermo-val&quot; id=&quot;val-after&quot;>5</span>
          <span class=&quot;thermo-word&quot; id=&quot;word-after&quot;>Neutral</span>
        </div>
      </div>
      <input type=&quot;range&quot; id=&quot;range-after&quot; min=&quot;0&quot; max=&quot;10&quot; value=&quot;5&quot; step=&quot;1&quot;>
      <div class=&quot;scale-ends&quot;><span>0 - tense / on edge</span><span>calm / at ease - 10</span></div>
      <div class=&quot;shift&quot; id=&quot;shift&quot;></div>
    </div>

    <div class=&quot;qcard&quot;>
      <p class=&quot;q&quot;>Where did you notice the <em>most tension</em>? (tap any that apply)</p>
      <div class=&quot;chips&quot; data-group=&quot;tension&quot;></div>
    </div>
    <div class=&quot;qcard&quot;>
      <p class=&quot;q&quot;>Which area felt the <em>most relief</em> when you let go?</p>
      <div class=&quot;chips&quot; data-group=&quot;relief&quot;></div>
    </div>
    <div class=&quot;qcard&quot;>
      <p class=&quot;q&quot;>What did you notice most in your body during the exercise?</p>
      <textarea id=&quot;notice&quot; placeholder=&quot;e.g. warmth in my hands, my shoulders were tighter than I realized, a heaviness in my legs...&quot;></textarea>
    </div>
    <div class=&quot;qcard&quot;>
      <p class=&quot;q&quot;>Anything else you want to remember about this session?</p>
      <textarea id=&quot;notes&quot; placeholder=&quot;Optional&quot;></textarea>
    </div>

    <div class=&quot;controls&quot;>
      <button class=&quot;primary&quot; id=&quot;summaryBtn&quot;>Show my summary</button>
      <button id=&quot;againBtn&quot;>Do it again</button>
    </div>
    <div class=&quot;summary hidden&quot; id=&quot;summaryBox&quot;></div>
    <div class=&quot;controls hidden&quot; id=&quot;copyRow&quot; style=&quot;margin-top:12px;&quot;>
      <button id=&quot;copyBtn&quot; class=&quot;mini&quot;>Copy summary</button>
      <button id=&quot;printBtn&quot; class=&quot;mini&quot;>Print / Save PDF</button>
    </div>
  </section>

</div>

<script>
/* ---------------- PMR SCRIPT (5:00) ---------------- */
const SCRIPT=[
 {dur:20,phase:&quot;Settling in&quot;,cue:&quot;Get comfortable. If it feels okay to you, you can close your eyes.&quot;,say:&quot;We are going to take a few minutes to practice paying attention to what's happening in your body right now. You don't have to clear your mind or do it perfectly. Start by getting comfortable, and if it feels okay to you, you can close your eyes.&quot;,cls:&quot;breathe-in&quot;,orb:&quot;Settle&quot;},
 {dur:16,phase:&quot;Breathe&quot;,cue:&quot;Slowly in through your nose... and out through your mouth.&quot;,say:&quot;Take a slow, deep breath in through your nose. And gently let it go. Once more, breathe in... and slowly release.&quot;,cls:&quot;breathe-out&quot;,orb:&quot;Breathe&quot;},
 {dur:8,phase:&quot;Hands &amp; forearms&quot;,cue:&quot;Clench both fists tightly. Squeeze... and hold.&quot;,say:&quot;Now bring your attention to your hands. Clench both fists tightly. Squeeze harder, and hold.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Hands &amp; forearms&quot;,cue:&quot;Release. Let your hands fall completely loose.&quot;,say:&quot;And release. Let your hands fall loose. Notice the warmth spreading through your fingers as the tension drains away.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:8,phase:&quot;Upper arms&quot;,cue:&quot;Bend your elbows and tense your biceps. Hold.&quot;,say:&quot;Bend your elbows and tighten your upper arms, drawing your fists toward your shoulders. Hold that tension.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Upper arms&quot;,cue:&quot;Release. Let your arms rest heavily.&quot;,say:&quot;And let go. Allow your arms to rest, heavy and loose. Feel the difference between tension and calm.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:8,phase:&quot;Shoulders&quot;,cue:&quot;Lift your shoulders up toward your ears. Hold.&quot;,say:&quot;Now your shoulders. Raise them up toward your ears, as high as they'll go. Hold the tightness.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Shoulders&quot;,cue:&quot;Release. Let them drop and soften.&quot;,say:&quot;And drop them down. Let your shoulders fall, soft and low. Feel the release across the top of your back.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:8,phase:&quot;Neck&quot;,cue:&quot;Gently tense your neck. Hold lightly.&quot;,say:&quot;Gently tense the muscles of your neck. Not too hard, just enough to feel it. And hold.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Neck&quot;,cue:&quot;Release. Let your head rest, neck soft.&quot;,say:&quot;And release. Let your neck soften completely, your head resting comfortably. Smooth and easy.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:8,phase:&quot;Forehead &amp; eyes&quot;,cue:&quot;Raise your eyebrows and squeeze your eyes shut. Hold.&quot;,say:&quot;Move up to your face. Raise your eyebrows high and squeeze your eyes tightly shut. Hold that tension.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Forehead &amp; eyes&quot;,cue:&quot;Release. Let your face go smooth and calm.&quot;,say:&quot;And release. Let your forehead smooth out and your eyes rest gently. Feel your whole face soften.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:8,phase:&quot;Jaw&quot;,cue:&quot;Clench your jaw and press your lips together. Hold.&quot;,say:&quot;Now clench your jaw and press your lips together firmly. Hold the tension around your mouth.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Jaw&quot;,cue:&quot;Release. Let your jaw hang loose.&quot;,say:&quot;And let go. Let your jaw fall slack, teeth slightly apart. Notice how relaxed your face feels now.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:9,phase:&quot;Chest &amp; stomach&quot;,cue:&quot;Deep breath in, tighten your middle. Hold.&quot;,say:&quot;Take a deep breath in, and as you do, tighten the muscles of your chest and stomach. Hold your breath and the tension.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:16,phase:&quot;Chest &amp; stomach&quot;,cue:&quot;Exhale slowly. Let your middle soften.&quot;,say:&quot;And slowly breathe out, releasing the tension. Let your chest and stomach soften with each breath.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:9,phase:&quot;Legs &amp; feet&quot;,cue:&quot;Straighten legs, point toes, tense thighs. Hold.&quot;,say:&quot;Now your lower body. Straighten your legs, point your toes, and tighten your thighs and calves. Hold it.&quot;,cls:&quot;tensing&quot;,orb:&quot;Tense&quot;},
 {dur:18,phase:&quot;Legs &amp; feet&quot;,cue:&quot;Release. Let your legs sink down, at rest.&quot;,say:&quot;And release. Let your legs go heavy and loose, sinking down. Feel the tension flow out through the soles of your feet.&quot;,cls:&quot;release&quot;,orb:&quot;Let go&quot;},
 {dur:26,phase:&quot;Whole body&quot;,cue:&quot;Scan from head to toe. Let any last tension melt away.&quot;,say:&quot;Take a moment to notice your whole body, relaxed and at ease. From the top of your head, down through your shoulders and arms, your chest, your legs, all the way to your toes. Let any last tension simply melt away.&quot;,cls:&quot;breathe-in&quot;,orb:&quot;Rest&quot;},
 {dur:24,phase:&quot;Closing&quot;,cue:&quot;Rest in this calm. Breathe slowly and gently.&quot;,say:&quot;Rest here, calm and still. Enjoy this feeling of deep relaxation, knowing you can return to it any time you need. Breathe slowly and gently.&quot;,cls:&quot;breathe-out&quot;,orb:&quot;Calm&quot;},
 {dur:18,phase:&quot;Coming back&quot;,cue:&quot;When you're ready, wiggle your fingers and open your eyes.&quot;,say:&quot;When you're ready, begin to bring your awareness back to the room. Wiggle your fingers and toes, and gently open your eyes. Well done.&quot;,cls:&quot;breathe-in&quot;,orb:&quot;Return&quot;},
];
const TOTAL=SCRIPT.reduce((s,x)=>s+x.dur,0);
const BODY_AREAS=[&quot;Hands&quot;,&quot;Forearms&quot;,&quot;Upper arms&quot;,&quot;Shoulders&quot;,&quot;Neck&quot;,&quot;Jaw&quot;,&quot;Forehead &amp; eyes&quot;,&quot;Chest&quot;,&quot;Stomach&quot;,&quot;Thighs&quot;,&quot;Calves&quot;,&quot;Feet&quot;];

/* ---------------- refs ---------------- */
const $=id=>document.getElementById(id);
const body=document.body;
const screens={intro:$(&quot;screen-intro&quot;),ex:$(&quot;screen-exercise&quot;),reflect:$(&quot;screen-reflect&quot;)};
function show(name){for(const k in screens)screens[k].classList.remove(&quot;active&quot;);screens[name].classList.add(&quot;active&quot;);window.scrollTo(0,0);}

/* ---------------- thermometer ---------------- */
function calmWord(v){
  return [&quot;Very tense&quot;,&quot;Tense&quot;,&quot;On edge&quot;,&quot;Unsettled&quot;,&quot;A little tense&quot;,&quot;Neutral&quot;,&quot;Fairly calm&quot;,&quot;Calm&quot;,&quot;Relaxed&quot;,&quot;Very relaxed&quot;,&quot;Deeply calm&quot;][v];
}
function bindThermo(range,merc,bulb,val,word){
  const upd=()=>{const v=+range.value;merc.style.height=(v*10)+&quot;%&quot;;bulb.textContent=v;val.textContent=v;word.textContent=calmWord(v);};
  range.addEventListener(&quot;input&quot;,upd);upd();
}
bindThermo($(&quot;range-before&quot;),$(&quot;merc-before&quot;),$(&quot;bulb-before&quot;),$(&quot;val-before&quot;),$(&quot;word-before&quot;));
bindThermo($(&quot;range-after&quot;),$(&quot;merc-after&quot;),$(&quot;bulb-after&quot;),$(&quot;val-after&quot;),$(&quot;word-after&quot;));

/* ---------------- voice ---------------- */
let voices=[],chosenVoice=null,voiceOn=true;
const PREMIUM=['ava','samantha','allison','susan','zoe','nora','noelle','serena','moira','tessa','fiona','karen','catherine','kate','jenny','aria','michelle','sara','nicky','joanna'];
const hasSynth=!!window.speechSynthesis;
function scoreVoice(v){
  const n=(v.name+' '+(v.voiceURI||'')).toLowerCase();let s=0;
  if(!/^en(-|_|$)/i.test(v.lang))s-=6;
  if(/en[-_]us/i.test(v.lang))s+=1;
  if(/enhanced|premium|neural|natural|siri/.test(n))s+=6;
  if(PREMIUM.some(h=>n.includes(h)))s+=5;
  if(n.includes('female'))s+=4;
  if(n.includes('male')&amp;&amp;!n.includes('female'))s-=6;
  if(/compact|eloquence|novelty|whisper|zarvox|trinoids|bells|bad news|boing|bubbles|cellos|deranged|hysterical|pipe|organ|superstar|wobble/.test(n))s-=8;
  if(n.includes('google'))s+=2;
  return s;
}
function loadVoices(){
  if(!hasSynth)return;
  voices=speechSynthesis.getVoices()||[];
  if(!voices.length)return;
  const sel=$(&quot;voiceSelect&quot;);sel.innerHTML=&quot;&quot;;
  const ranked=voices.map((v,i)=>({v,i,s:scoreVoice(v)})).sort((a,b)=>b.s-a.s);
  ranked.forEach(({v,i})=>{const o=document.createElement(&quot;option&quot;);o.value=i;o.textContent=`${v.name} (${v.lang})`;sel.appendChild(o);});
  if(!chosenVoice){chosenVoice=ranked[0].v;sel.value=ranked[0].i;}
}
if(hasSynth){loadVoices();speechSynthesis.onvoiceschanged=loadVoices;}
else{$(&quot;voicebar&quot;).classList.add(&quot;hidden&quot;);}
$(&quot;voiceSelect&quot;).addEventListener(&quot;change&quot;,e=>{
  chosenVoice=voices[+e.target.value]||chosenVoice;
  // sample the chosen voice so user can compare
  speak(&quot;Hello. This is how I'll guide you.&quot;);
});
function speak(text){
  if(!voiceOn||!hasSynth)return;
  speechSynthesis.cancel();
  const u=new SpeechSynthesisUtterance(text);
  if(chosenVoice)u.voice=chosenVoice;
  u.rate=.8;u.pitch=1.0;u.volume=1;
  speechSynthesis.speak(u);
}
function setVoiceOn(on){
  voiceOn=on;
  const t=on?&quot;Guide voice: on&quot;:&quot;Guide voice: off&quot;;
  $(&quot;voiceBtn&quot;).textContent=t;$(&quot;voiceBtn2&quot;).textContent=on?&quot;Voice on&quot;:&quot;Voice off&quot;;
  if(!on&amp;&amp;hasSynth)speechSynthesis.cancel();
}
$(&quot;voiceBtn&quot;).addEventListener(&quot;click&quot;,()=>setVoiceOn(!voiceOn));
$(&quot;voiceBtn2&quot;).addEventListener(&quot;click&quot;,()=>{setVoiceOn(!voiceOn);if(voiceOn&amp;&amp;running&amp;&amp;stepIndex>=0)speak(SCRIPT[stepIndex].say);});

/* ---------------- engine ---------------- */
let stepIndex=-1,stepElapsed=0,totalElapsed=0,running=false,timer=null;
function fmt(sec){sec=Math.max(0,Math.ceil(sec));const m=Math.floor(sec/60),s=sec%60;return m+&quot;:&quot;+String(s).padStart(2,&quot;0&quot;);}
function enterStep(i){
  const step=SCRIPT[i];
  body.classList.remove(&quot;breathe-in&quot;,&quot;breathe-out&quot;,&quot;tensing&quot;,&quot;tense&quot;,&quot;release&quot;);
  if(step.cls===&quot;tensing&quot;)body.classList.add(&quot;tense&quot;,&quot;tensing&quot;);
  else if(step.cls===&quot;release&quot;)body.classList.add(&quot;release&quot;,&quot;breathe-out&quot;);
  else body.classList.add(step.cls);
  $(&quot;phase&quot;).textContent=step.phase;$(&quot;cue&quot;).textContent=step.cue;$(&quot;orbLabel&quot;).textContent=step.orb||&quot;&quot;;
  speak(step.say);
}
function tick(){
  totalElapsed++;stepElapsed++;
  const step=SCRIPT[stepIndex];
  if(step&amp;&amp;(step.cls===&quot;breathe-in&quot;||step.cls===&quot;breathe-out&quot;||step.cls===&quot;release&quot;)){
    if(stepElapsed%8<4){body.classList.add(&quot;breathe-in&quot;);body.classList.remove(&quot;breathe-out&quot;);}
    else{body.classList.add(&quot;breathe-out&quot;);body.classList.remove(&quot;breathe-in&quot;);}
  }
  $(&quot;fill&quot;).style.width=(100*totalElapsed/TOTAL)+&quot;%&quot;;
  $(&quot;time&quot;).textContent=fmt(TOTAL-totalElapsed)+&quot; remaining&quot;;
  if(step&amp;&amp;stepElapsed>=step.dur){
    stepIndex++;stepElapsed=0;
    if(stepIndex>=SCRIPT.length){finish();return;}
    enterStep(stepIndex);
  }
}
function startExercise(){
  show(&quot;ex&quot;);running=true;
  stepIndex=0;stepElapsed=0;totalElapsed=0;
  $(&quot;pauseBtn&quot;).textContent=&quot;Pause&quot;;
  enterStep(0);
  clearInterval(timer);timer=setInterval(tick,1000);
}
function pause(){running=false;clearInterval(timer);if(hasSynth)speechSynthesis.pause();$(&quot;pauseBtn&quot;).textContent=&quot;Resume&quot;;}
function resume(){running=true;if(hasSynth)speechSynthesis.resume();$(&quot;pauseBtn&quot;).textContent=&quot;Pause&quot;;clearInterval(timer);timer=setInterval(tick,1000);}
function finish(){
  clearInterval(timer);running=false;
  if(hasSynth)speechSynthesis.cancel();
  body.classList.remove(&quot;tense&quot;,&quot;release&quot;,&quot;tensing&quot;,&quot;breathe-out&quot;);body.classList.add(&quot;breathe-in&quot;);
  // carry the before value as the after default starting point
  show(&quot;reflect&quot;);
  renderChips();
}
$(&quot;startBtn&quot;).addEventListener(&quot;click&quot;,()=>{
  // speaking here satisfies the browser's user-gesture requirement for audio
  startExercise();
});
$(&quot;pauseBtn&quot;).addEventListener(&quot;click&quot;,()=>{running?pause():resume();});
$(&quot;restartBtn&quot;).addEventListener(&quot;click&quot;,()=>{clearInterval(timer);if(hasSynth)speechSynthesis.cancel();startExercise();});
$(&quot;againBtn&quot;).addEventListener(&quot;click&quot;,()=>{show(&quot;intro&quot;);});

/* ---------------- reflection ---------------- */
const picks={tension:new Set(),relief:new Set()};
function renderChips(){
  document.querySelectorAll(&quot;.chips&quot;).forEach(box=>{
    if(box.dataset.built)return;
    const grp=box.dataset.group;
    BODY_AREAS.forEach(area=>{
      const c=document.createElement(&quot;span&quot;);c.className=&quot;chip&quot;;c.textContent=area;
      c.addEventListener(&quot;click&quot;,()=>{
        if(picks[grp].has(area)){picks[grp].delete(area);c.classList.remove(&quot;sel&quot;);}
        else{picks[grp].add(area);c.classList.add(&quot;sel&quot;);}
      });
      box.appendChild(c);
    });
    box.dataset.built=&quot;1&quot;;
  });
  updShift();
}
function updShift(){
  const b=+$(&quot;range-before&quot;).value,a=+$(&quot;range-after&quot;).value,d=a-b;
  let msg;
  if(d>0)msg=`Your calm went from <b>${b}</b> to <b>${a}</b> - up ${d} point${d>1?&quot;s&quot;:&quot;&quot;}.`;
  else if(d===0)msg=`You're steady at <b>${a}</b>. Sometimes settling the body is its own win.`;
  else msg=`You moved from ${b} to <b>${a}</b>. That's worth noticing too - what got in the way?`;
  $(&quot;shift&quot;).innerHTML=msg;
}
$(&quot;range-after&quot;).addEventListener(&quot;input&quot;,updShift);

function buildSummary(){
  const b=+$(&quot;range-before&quot;).value,a=+$(&quot;range-after&quot;).value;
  const t=[...picks.tension];const r=[...picks.relief];
  const notice=$(&quot;notice&quot;).value.trim();const notes=$(&quot;notes&quot;).value.trim();
  const d=new Date();
  let out=`Progressive Muscle Relaxation - ${d.toLocaleDateString()} ${d.toLocaleTimeString([], {hour:&quot;2-digit&quot;,minute:&quot;2-digit&quot;})}\n`;
  out+=`\nCalm before: ${b}/10 (${calmWord(b)})`;
  out+=`\nCalm after:  ${a}/10 (${calmWord(a)})`;
  out+=`\nChange: ${a-b>=0?&quot;+&quot;:&quot;&quot;}${a-b}`;
  out+=`\n\nMost tension: ${t.length?t.join(&quot;, &quot;):&quot;-&quot;}`;
  out+=`\nMost relief:  ${r.length?r.join(&quot;, &quot;):&quot;-&quot;}`;
  out+=`\n\nNoticed most in the body:\n${notice||&quot;-&quot;}`;
  if(notes)out+=`\n\nOther notes:\n${notes}`;
  return out;
}
$(&quot;summaryBtn&quot;).addEventListener(&quot;click&quot;,()=>{
  const box=$(&quot;summaryBox&quot;);box.textContent=buildSummary();box.classList.remove(&quot;hidden&quot;);
  $(&quot;copyRow&quot;).classList.remove(&quot;hidden&quot;);
  box.scrollIntoView({behavior:&quot;smooth&quot;,block:&quot;nearest&quot;});
});
$(&quot;copyBtn&quot;).addEventListener(&quot;click&quot;,()=>{
  const txt=$(&quot;summaryBox&quot;).textContent;
  navigator.clipboard&amp;&amp;navigator.clipboard.writeText(txt).then(()=>{$(&quot;copyBtn&quot;).textContent=&quot;Copied &quot;;setTimeout(()=>$(&quot;copyBtn&quot;).textContent=&quot;Copy summary&quot;,1600);}).catch(()=>{});
});
$(&quot;printBtn&quot;).addEventListener(&quot;click&quot;,()=>window.print());

/* init */
body.classList.add(&quot;breathe-in&quot;);
$(&quot;time&quot;).textContent=fmt(TOTAL);
</script>
</body>
</html>
" style="width:100%;max-width:640px;height:780px;border:0;border-radius:16px;display:block;margin:0 auto;overflow:hidden;" allow="autoplay" loading="lazy">
  
  