diff --git a/index.html b/index.html
index 6907b0c..2d2f169 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+```html
 <!--
 MIT License
 
@@ -37,7 +38,348 @@
   <link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" as="style" />
   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet" async />
   <title>ROS Cycle — gentle period companion</title>
-  <style>:root{--bg1:#FFF0F5;--bg2:#F0FFF0;--pink:#FF6B9D;--soft:#FFB6C1;--mint:#98D8C8;--text:#3b3b3b;--muted:#8A8A8A;--card:#ffffff;--shadow:0 6px 24px rgba(0,0,0,0.08);--bg-dark:#2b2b2b;--card-dark:#3c3c3c;--text-dark:#f0f0f0;--muted-dark:#b0b0b0;}[data-theme="dark"]{--bg1:#2b2b2b;--bg2:#3c3c3c;--card:#3c3c3c;--text:#f0f0f0;--muted:#b0b0b0;}*{box-sizing:border-box;}html,body{height:100%;}body{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto;margin:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--text);padding:20px;overscroll-behavior:none;}.app{width:100%;max-width:760px;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:20px;}header{display:flex;align-items:center;gap:16px;}.logo{font-size:28px;font-weight:800;background:linear-gradient(45deg,var(--pink),var(--soft));-webkit-background-clip:text;color:transparent;}.lead{color:var(--muted);font-weight:300;}.step-indicator{margin:10px 0;font-size:13px;color:var(--muted);text-align:center;}main{margin-top:14px;}.step{display:none;opacity:0;transform:translateY(12px);transition:all .28s ease;}.step.active{display:block;opacity:1;transform:translateY(0);}.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 4px 18px rgba(0,0,0,0.04);}.field{margin-bottom:12px;text-align:left;}label{display:block;font-weight:600;margin-bottom:6px;}input[type="text"],input[type="date"],input[type="number"]{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid #f2dce4;background:var(--card);outline:none;color:var(--text);font-size:16px;-webkit-appearance:none;}input:focus{box-shadow:0 6px 20px rgba(255,107,157,0.12);border-color:var(--pink);}.controls{display:flex;gap:10px;justify-content:flex-end;margin-top:10px;}button{cursor:pointer;border:0;padding:10px 16px;border-radius:12px;font-weight:700;font-size:16px;touch-action:manipulation;}.btn-primary{background:linear-gradient(45deg,var(--pink),var(--soft));color:white;}.btn-ghost{background:transparent;color:var(--text);}.month-nav{display:flex;align-items:center;justify-content:space-between;margin:18px 0;}.month-title{font-weight:800;font-size:18px;}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}.weekday-label{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:8px 0;}.cell{background:var(--card);border-radius:10px;padding:10px;min-height:56px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;border:1px solid #f4f4f4;position:relative;touch-action:manipulation;}.cell.other{background:#fafafa;color:#bbb;}.daynum{font-weight:700;}.badge{position:absolute;right:8px;top:8px;font-size:11px;padding:4px 6px;border-radius:8px;}.period{background:linear-gradient(45deg,var(--pink),#ff9bbf);color:#fff;}.fertile{background:linear-gradient(45deg,var(--mint),#dff6ee);color:var(--text);}.legend{display:flex;gap:12px;margin-top:10px;align-items:center;}.legend .box{width:14px;height:14px;border-radius:4px;}.tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--card);border-radius:10px;padding:8px 10px;box-shadow:0 6px 20px rgba(0,0,0,0.12);white-space:nowrap;font-size:13px;color:var(--text);display:none;z-index:10;}.cell:hover .tooltip,.cell:focus-within .tooltip{display:block;}@media (max-width:768px){header{flex-direction:column;padding:12px 20px;}nav a{margin:8px;font-size:0.9rem;}.hero h1{font-size:2.2rem;}section{padding:80px 20px;}.loader h1{font-size:1.2rem;}.loader .spinner{width:14px;height:14px;}.tooltip{bottom:auto;top:100%;transform:translateX(-50%);white-space:normal;max-width:90vw;}.grid{gap:6px;}.cell{min-height:64px;}header{gap:10px;}}.modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.45);display:flex;justify-content:center;align-items:center;z-index:60;display:none;}.modal.active{display:flex;}.modal .box{background:var(--card);padding:18px;border-radius:12px;max-width:420px;box-shadow:0 10px 40px rgba(0,0,0,0.18);width:90%;}footer{margin-top:16px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}.theme-toggle{font-size:12px;cursor:pointer;color:var(--pink);}.checkbox-field{display:flex;align-items:center;gap:8px;margin-bottom:8px;}.checkbox-field input[type="checkbox"]{width:18px;height:18px;accent-color:var(--pink);}a.github-link,a.portfolio-link{color:var(--pink);text-decoration:none;font-weight:600;}a.github-link:hover,a.portfolio-link:hover{text-decoration:underline;}</style>
+  <!-- jsPDF CDN (pinned to 2.5.1) with async loading -->
+  <script async src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" onerror="window.jspdfFailed = true;"></script>
+  <style>
+    :root {
+      --bg1: #FFF0F5;
+      --bg2: #F0FFF0;
+      --pink: #FF6B9D;
+      --soft: #FFB6C1;
+      --mint: #98D8C8;
+      --text: #3b3b3b;
+      --muted: #8A8A8A;
+      --card: #ffffff;
+      --shadow: 0 6px 24px rgba(0,0,0,0.08);
+      --bg-dark: #2b2b2b;
+      --card-dark: #3c3c3c;
+      --text-dark: #f0f0f0;
+      --muted-dark: #b0b0b0;
+    }
+    [data-theme="dark"] {
+      --bg1: #2b2b2b;
+      --bg2: #3c3c3c;
+      --card: #3c3c3c;
+      --text: #f0f0f0;
+      --muted: #b0b0b0;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html, body {
+      height: 100%;
+    }
+    body {
+      font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, var(--bg1), var(--bg2));
+      color: var(--text);
+      padding: 20px;
+      overscroll-behavior: none;
+    }
+    .app {
+      width: 100%;
+      max-width: 760px;
+      background: var(--card);
+      border-radius: 18px;
+      box-shadow: var(--shadow);
+      padding: 20px;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .logo {
+      font-size: 28px;
+      font-weight: 800;
+      background: linear-gradient(45deg, var(--pink), var(--soft));
+      -webkit-background-clip: text;
+      color: transparent;
+    }
+    .lead {
+      color: var(--muted);
+      font-weight: 300;
+    }
+    .step-indicator {
+      margin: 10px 0;
+      font-size: 13px;
+      color: var(--muted);
+      text-align: center;
+    }
+    main {
+      margin-top: 14px;
+    }
+    .step {
+      display: none;
+      opacity: 0;
+      transform: translateY(12px);
+      transition: all .28s ease;
+    }
+    .step.active {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .card {
+      background: var(--card);
+      border-radius: 12px;
+      padding: 18px;
+      box-shadow: 0 4px 18px rgba(0,0,0,0.04);
+    }
+    .field {
+      margin-bottom: 12px;
+      text-align: left;
+    }
+    label {
+      display: block;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+    input[type="text"], input[type="date"], input[type="number"] {
+      width: 100%;
+      padding: 12px 14px;
+      border-radius: 10px;
+      border: 1.5px solid #f2dce4;
+      background: var(--card);
+      outline: none;
+      color: var(--text);
+      font-size: 16px;
+      -webkit-appearance: none;
+    }
+    input:focus {
+      box-shadow: 0 6px 20px rgba(255,107,157,0.12);
+      border-color: var(--pink);
+    }
+    .controls {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+      margin-top: 10px;
+    }
+    button {
+      cursor: pointer;
+      border: 0;
+      padding: 10px 16px;
+      border-radius: 12px;
+      font-weight: 700;
+      font-size: 16px;
+      touch-action: manipulation;
+      min-width: 48px;
+      min-height: 48px;
+    }
+    .btn-primary {
+      background: linear-gradient(45deg, var(--pink), var(--soft));
+      color: white;
+    }
+    .btn-ghost {
+      background: transparent;
+      color: var(--text);
+    }
+    .month-nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 18px 0;
+    }
+    .month-title {
+      font-weight: 800;
+      font-size: 18px;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 8px;
+    }
+    .weekday-label {
+      text-align: center;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--muted);
+      padding: 8px 0;
+    }
+    .cell {
+      background: var(--card);
+      border-radius: 10px;
+      padding: 10px;
+      min-height: 56px;
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      flex-direction: column;
+      border: 1px solid #f4f4f4;
+      position: relative;
+      touch-action: manipulation;
+      overflow: hidden;
+    }
+    .cell.other {
+      background: #fafafa;
+      color: #bbb;
+    }
+    .daynum {
+      font-weight: 700;
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+    .badge {
+      position: absolute;
+      right: 6px;
+      top: 6px;
+      font-size: 10px;
+      padding: 3px 5px;
+      border-radius: 6px;
+      line-height: 1.2;
+      max-width: 60%;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .period {
+      background: linear-gradient(45deg, var(--pink), #ff9bbf);
+      color: #fff;
+    }
+    .fertile {
+      background: linear-gradient(45deg, var(--mint), #dff6ee);
+      color: var(--text);
+    }
+    .legend {
+      display: flex;
+      gap: 12px;
+      margin-top: 10px;
+      align-items: center;
+    }
+    .legend .box {
+      width: 14px;
+      height: 14px;
+      border-radius: 4px;
+    }
+    .tooltip {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--card);
+      border-radius: 10px;
+      padding: 8px 10px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+      white-space: nowrap;
+      font-size: 13px;
+      color: var(--text);
+      display: none;
+      z-index: 10;
+    }
+    .cell:hover .tooltip, .cell:focus-within .tooltip {
+      display: block;
+    }
+    .loading {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--card);
+      padding: 10px 20px;
+      border-radius: 10px;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+      z-index: 100;
+      display: none;
+    }
+    .loading.active {
+      display: block;
+    }
+    @media (max-width: 768px) {
+      header {
+        flex-direction: column;
+        padding: 12px 20px;
+      }
+      .tooltip {
+        bottom: auto;
+        top: 100%;
+        transform: translateX(-50%);
+        white-space: normal;
+        max-width: 90vw;
+      }
+      .grid {
+        gap: 6px;
+      }
+      .cell {
+        min-height: 64px;
+        padding: 8px;
+      }
+      .badge {
+        font-size: 9px;
+        padding: 2px 4px;
+        max-width: 50%;
+      }
+      .daynum {
+        font-size: 12px;
+      }
+      header {
+        gap: 10px;
+      }
+    }
+    .modal {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.45);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 60;
+      display: none;
+    }
+    .modal.active {
+      display: flex;
+    }
+    .modal .box {
+      background: var(--card);
+      padding: 18px;
+      border-radius: 12px;
+      max-width: 420px;
+      box-shadow: 0 10px 40px rgba(0,0,0,0.18);
+      width: 90%;
+    }
+    footer {
+      margin-top: 16px;
+      font-size: 13px;
+      color: var(--muted);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .theme-toggle {
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--pink);
+    }
+    .checkbox-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .checkbox-field input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--pink);
+    }
+    a.github-link, a.portfolio-link {
+      color: var(--pink);
+      text-decoration: none;
+      font-weight: 600;
+    }
+    a.github-link:hover, a.portfolio-link:hover {
+      text-decoration: underline;
+    }
+  </style>
 </head>
 <body>
   <div class="app" role="application" aria-label="ROS Cycle period tracker">
@@ -45,7 +387,7 @@
       <div class="logo">🌸 ROS Cycle</div>
       <div>
         <div class="lead">Gentle, private & student-friendly</div>
-        <div style="font-size:12px;color:var(--muted)">No data stored. Local only for this demo.</div>
+        <div style="font-size:12px;color:var(--muted)">No data stored. All done on your device.</div>
       </div>
     </header>
 
@@ -190,25 +532,25 @@ <h3 style="margin:0 0 8px">Period details</h3>
           </div>
           <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
             <button class="btn-ghost" onclick="showStep(2)">Update</button>
+            <button class="btn-primary" onclick="exportToPDF()" aria-label="Export calendar and symptoms as PDF">Export as PDF</button>
             <button class="btn-primary" onclick="showResetModal()">Start Over</button>
           </div>
         </div>
-        <p style="margin-top:8px;font-size:13px;color:var(--muted)">⚠️ This is an open-source, student-built prototype for educational purposes. Predictions are estimates based on average cycle data and may vary due to factors like diet, hormonal changes, or stress. Not medically approved. <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Contribute to ROS Cycle on GitHub">Contribute to our GitHub</a> to help improve accuracy!</p>
+        <p style="margin-top:8px;font-size:13px;color:var(--muted)">⚠️ This is an open-source, student-built prototype for educational purposes. Predictions are estimates based on average cycle data and may vary due to factors like diet, hormonal changes, or stress. Not medically approved.</p>
       </section>
     </main>
 
     <footer>
       <div style="font-size:12px;color:var(--muted)">
-        Open-source • MIT License • <a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Visit ROS Cycle GitHub repository">GitHub</a> • <a href="https://alwin-m.github.io/Portfolio/" class="portfolio-link" target="_blank" rel="noopener" aria-label="Visit Alwin Madhu's Portfolio">Portfolio</a>
+        Open-source • MIT License • Made for students • Privacy-first
       </div>
       <div style="display:flex;gap:12px">
         <div class="theme-toggle" onclick="toggleTheme()">Toggle Dark Mode</div>
-        <div style="font-size:12px;color:var(--muted)">Made for students • Privacy-first</div>
       </div>
     </footer>
   </div>
 
-  <!-- modal for warnings/details -->
+  <!-- Modal for warnings/details -->
   <div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalText">
     <div class="box">
       <div id="modalText" role="alert"></div>
@@ -219,7 +561,7 @@ <h3 style="margin:0 0 8px">Period details</h3>
     </div>
   </div>
 
-  <!-- reset confirmation modal -->
+  <!-- Reset confirmation modal -->
   <div class="modal" id="resetModal" role="dialog" aria-modal="true" aria-labelledby="resetModalText">
     <div class="box">
       <div id="resetModalText">Start over? This will clear the current session.</div>
@@ -230,6 +572,466 @@ <h3 style="margin:0 0 8px">Period details</h3>
     </div>
   </div>
 
-  <script>let state={name:'',dob:null,age:null,last:null,cycle:28,periodLen:5,months:[],visibleIndex:0,pcodChance:null,pcodSymptoms:[]};const el=id=>document.getElementById(id);function showStep(n){document.querySelectorAll('.step').forEach(s=>s.classList.remove('active'));if(typeof n==='string'){el('step-'+n).classList.add('active');}else{el('step-'+n).classList.add('active');}const firstInput=typeof n==='string'?el('step-'+n).querySelector('input, button'):el('step-'+n).querySelector('input, button');if(firstInput)firstInput.focus();}function showModal(msg){el('modalText').innerHTML=msg.replace(/\n\n/g,'<br><br>').replace(/https:\/\/github\.com\/alwin-m\/ROS-Cycle-Project/g,'<a href="https://github.com/alwin-m/ROS-Cycle-Project" class="github-link" target="_blank" rel="noopener" aria-label="Contribute to ROS Cycle on GitHub">GitHub</a>');el('modal').classList.add('active');el('modal').querySelector('.btn-ghost').focus();}function closeModal(id='modal'){el(id).classList.remove('active');if(id==='modal'&&document.querySelector('#step-pcod.active')){showStep(2);}}function showResetModal(){el('resetModal').classList.add('active');el('resetModal').querySelector('button').focus();}function resetAll(){state={name:'',dob:null,age:null,last:null,cycle:28,periodLen:5,months:[],visibleIndex:0,pcodChance:null,pcodSymptoms:[]};el('name').value='';el('dob').value='';el('last').value='';el('cycle').value='28';el('periodLen').value='5';el('calendarGrid').innerHTML='';el('monthTitle').innerText='Month';el('pcod-form').reset();closeModal('resetModal');showStep(1);}function skipInfo(){state.name='';state.dob=null;state.age=null;showStep(2);}function nextToStep2(){const name=el('name').value.trim();const dob=el('dob').value;if(name==='')return showModal('Please enter your name — a short nickname is fine.');state.name=name;if(dob){const parsed=new Date(dob);if(isNaN(parsed))return showModal('Invalid date of birth. Please use YYYY-MM-DD format.');const age=calculateAge(parsed);if(age<9||age>55){return showModal('Age appears to be ' + age + ', which is outside the typical range (9–55). If correct, proceed; otherwise, check your input.');}state.dob=parsed;state.age=age;}showStep(2);setTimeout(()=>el('last').focus(),200);}function nextToPCOD(){const name=el('name').value.trim();const dob=el('dob').value;if(name==='')return showModal('Please enter your name — a short nickname is fine.');state.name=name;if(dob){const parsed=new Date(dob);if(isNaN(parsed))return showModal('Invalid date of birth. Please use YYYY-MM-DD format.');const age=calculateAge(parsed);if(age<9||age>55){return showModal('Age appears to be ' + age + ', which is outside the typical range (9–55). If correct, proceed; otherwise, check your input.');}state.dob=parsed;state.age=age;}showStep('pcod');setTimeout(()=>el('symptom1').focus(),200);}function checkPCOD(){const symptoms=document.querySelectorAll('#pcod-form input[type="checkbox"]:checked');state.pcodSymptoms=Array.from(symptoms).map(s=>s.nextElementSibling.textContent);const count=symptoms.length;let chance='low';let message='';if(count<=2){chance='low';message=`Based on your responses, there is a low chance you have PCOD.`;}else if(count<=5){chance='medium';message=`Based on your responses, there is a medium chance you have PCOD. Consider seeing a doctor.`;}else{chance='high';message=`Based on your responses, there is a high chance you have PCOD. You should consider seeing a doctor for proper diagnosis.\n\n⚠️ Warning: PCOD can cause irregular cycles, which may reduce the accuracy of period predictions in this app. Predictions are estimates based on average cycle data and may vary due to factors like diet, stress, hormonal changes, or other influences. This is an open-source prototype, and we’re working to improve accuracy. Contribute to our https://github.com/alwin-m/ROS-Cycle-Project to help enhance features, like AI-driven predictions!`;}if(state.pcodSymptoms.length>0){message+=`<br><br><strong>Selected Symptoms:</strong><ul style="margin:10px 0;padding-left:20px;">${state.pcodSymptoms.map(s=>`<li>${s}</li>`).join('')}</ul>`;}else{message+=`<br><br>No symptoms selected.`;}message+=`<br>This is not a medical diagnosis—please consult a healthcare professional.`;state.pcodChance=chance;showModal(message);}function calculateAge(dob){const diff=Date.now()-dob.getTime();return Math.floor(diff/(1000*60*60*24*365.25));}function createCalendar(){const lastVal=el('last').value;const cycleVal=parseInt(el('cycle').value,10);const periodLenVal=parseInt(el('periodLen').value,10);if(!lastVal)return showModal('Please select your last period date.');if(isNaN(cycleVal)||cycleVal<15||cycleVal>45){return showModal('Cycle length should be between 15 and 45 days. If outside this range, consult a healthcare provider.');}if(isNaN(periodLenVal)||periodLenVal<3||periodLenVal>10){return showModal('Period length should be between 3 and 10 days.');}const last=new Date(lastVal);if(isNaN(last))return showModal('Invalid period start date. Please use YYYY-MM-DD format.');if(last>new Date())return showModal('Last period date cannot be in the future.');state.last=new Date(last.getFullYear(),last.getMonth(),last.getDate());state.cycle=cycleVal;state.periodLen=periodLenVal;state.months=[];state.visibleIndex=0;generateMonth(state.visibleIndex);renderMonth(state.visibleIndex);showStep(3);}function generateMonth(index){if(state.months[index])return;const start=new Date(state.last.getFullYear(),state.last.getMonth(),1);const oneDay=24*60*60*1000;const mm=new Date(start.getFullYear(),start.getMonth()+index,1);const days=new Date(mm.getFullYear(),mm.getMonth()+1,0).getDate();const monthObj={month:mm.getMonth(),year:mm.getFullYear(),days:[]};for(let d=1;d<=days;d++){const date=new Date(mm.getFullYear(),mm.getMonth(),d);const diffDays=Math.round((date-state.last)/oneDay);let type='normal';if(diffDays>=0){const mod=Math.abs(diffDays % state.cycle);if(mod<state.periodLen)type='period';const ovulationIndex=state.cycle-14;const fertileStart=ovulationIndex-5;if(mod>=fertileStart&&mod<=ovulationIndex)type=(type==='period')?'period':'fertile';}monthObj.days.push({date,type});}state.months[index]=monthObj;}function renderMonth(index){if(index<0||index>=12)return showModal('No prediction available for this month. We only predict 12 months.');generateMonth(index);const monthObj=state.months[index];el('monthTitle').innerText=`${getMonthName(monthObj.month)} ${monthObj.year}`;el('pred-count').innerText=12;el('visible-month').innerText=`${index + 1}/12`;el('greeting').innerText=`Hi ${state.name || 'there'} — your calendar:`;el('age-note').innerText=state.age ? `Age: ${state.age}${state.pcodChance ? `, PCOD Chance: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : ''}` : state.pcodChance ? `PCOD Chance: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : '';const grid=el('calendarGrid');grid.innerHTML='';const firstDay=new Date(monthObj.year, monthObj.month, 1);const startOffset=firstDay.getDay();const daysInMonth=monthObj.days.length;const totalCells=Math.ceil((startOffset + daysInMonth) / 7) * 7;for(let i=0;i<totalCells;i++){const cell=document.createElement('div');cell.className='cell';if(i<startOffset||i>=startOffset+daysInMonth){cell.className+=' other';cell.innerHTML=`<div class="daynum">-</div>`;}else{const dayIndex=i-startOffset;const day=monthObj.days[dayIndex];const dateStr=day.date.toISOString().split('T')[0];cell.innerHTML=`<div class="daynum">${day.date.getDate()}</div>`;if(day.type!=='normal'){cell.innerHTML+=`<div class="badge ${day.type}">${day.type==='period' ? 'Period' : 'Fertile'}</div>`;const tip=document.createElement('div');tip.className='tooltip';tip.innerText=`${day.type === 'period' ? 'Period' : 'Fertile'} day: ${dateStr}`;cell.appendChild(tip);}}cell.tabIndex=0;grid.appendChild(cell);}}function getMonthName(month){const names=['January','February','March','April','May','June','July','August','September','October','November','December'];return names[month];}function toggleTheme(){const isDark=document.documentElement.getAttribute('data-theme')==='dark';document.documentElement.setAttribute('data-theme',isDark ? 'light' : 'dark');localStorage.setItem('theme',isDark ? 'light' : 'dark');}el('prevBtn').addEventListener('click',()=>{state.visibleIndex = Math.max(0, state.visibleIndex - 1);renderMonth(state.visibleIndex);});el('nextBtn').addEventListener('click',()=>{state.visibleIndex = Math.min(11, state.visibleIndex + 1);renderMonth(state.visibleIndex);});function setMaxDates(){const today = new Date().toISOString().split('T')[0];el('dob').max=today;el('last').max=today;}document.addEventListener('keydown',(e)=>{if(e.key==='Escape'&&el('modal').classList.contains('active')){closeModal();}else if(e.key==='Escape'&&el('resetModal').classList.contains('active')){closeModal('resetModal');}});(function init(){const savedTheme=localStorage.getItem('theme')||'light';document.documentElement.setAttribute('data-theme',savedTheme);setMaxDates();el('name').focus();if('serviceWorker' in navigator){navigator.serviceWorker.register('serviceworker.js').then(()=>console.log('Service Worker registered successfully')).catch(err=>console.warn('Service Worker registration failed:',err.message));}else{console.warn('Service Worker not supported in this browser');}})();</script>
+  <!-- Export confirmation modal -->
+  <div class="modal" id="exportModal" role="dialog" aria-modal="true" aria-labelledby="exportModalText">
+    <div class="box">
+      <div id="exportModalText">Your cycle data has been exported as a PDF. Check your downloads folder. All processing is done on your device for privacy. On phones, tap the share icon to save or send.</div>
+      <div style="text-align:right;margin-top:12px">
+        <button class="btn-ghost" onclick="closeModal('exportModal')">OK</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Loading indicator -->
+  <div class="loading" id="loading">Generating PDF...</div>
+
+  <script>
+    let state = {
+      name: '',
+      dob: null,
+      age: null,
+      last: null,
+      cycle: 28,
+      periodLen: 5,
+      months: [],
+      visibleIndex: 0,
+      pcodChance: null,
+      pcodSymptoms: []
+    };
+
+    const el = id => document.getElementById(id);
+
+    function sanitize(str) {
+      return str.replace(/[<>]/g, '');
+    }
+
+    function showStep(n) {
+      document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
+      const stepId = typeof n === 'string' ? 'step-' + n : 'step-' + n;
+      el(stepId).classList.add('active');
+      const firstInput = el(stepId).querySelector('input, button');
+      if (firstInput) firstInput.focus();
+    }
+
+    function showModal(msg) {
+      el('modalText').innerHTML = msg.replace(/\n\n/g, '<br><br>');
+      el('modal').classList.add('active');
+      el('modal').querySelector('.btn-ghost').focus();
+    }
+
+    function closeModal(id = 'modal') {
+      el(id).classList.remove('active');
+      if (id === 'modal' && document.querySelector('#step-pcod.active')) {
+        showStep(2);
+      } else if (id === 'exportModal') {
+        el('step-3').querySelector('button[onclick="exportToPDF()"]').focus();
+      }
+    }
+
+    function showResetModal() {
+      el('resetModal').classList.add('active');
+      el('resetModal').querySelector('button').focus();
+    }
+
+    function resetAll() {
+      state = {
+        name: '',
+        dob: null,
+        age: null,
+        last: null,
+        cycle: 28,
+        periodLen: 5,
+        months: [],
+        visibleIndex: 0,
+        pcodChance: null,
+        pcodSymptoms: []
+      };
+      el('name').value = '';
+      el('dob').value = '';
+      el('last').value = '';
+      el('cycle').value = '28';
+      el('periodLen').value = '5';
+      el('calendarGrid').innerHTML = '';
+      el('monthTitle').innerText = 'Month';
+      el('pcod-form').reset();
+      closeModal('resetModal');
+      showStep(1);
+    }
+
+    function skipInfo() {
+      state.name = '';
+      state.dob = null;
+      state.age = null;
+      showStep(2);
+    }
+
+    function nextToStep2() {
+      const name = el('name').value.trim();
+      const dob = el('dob').value;
+      if (name === '') return showModal('Please enter your name — a short nickname is fine.');
+      state.name = sanitize(name);
+      if (dob) {
+        const parsed = new Date(dob);
+        if (isNaN(parsed)) return showModal('Invalid date of birth. Please use YYYY-MM-DD format.');
+        const age = calculateAge(parsed);
+        if (age < 9 || age > 55) {
+          return showModal('Age appears to be ' + age + ', which is outside the typical range (9–55). If correct, proceed; otherwise, check your input.');
+        }
+        state.dob = parsed;
+        state.age = age;
+      }
+      showStep(2);
+      setTimeout(() => el('last').focus(), 200);
+    }
+
+    function nextToPCOD() {
+      const name = el('name').value.trim();
+      const dob = el('dob').value;
+      if (name === '') return showModal('Please enter your name — a short nickname is fine.');
+      state.name = sanitize(name);
+      if (dob) {
+        const parsed = new Date(dob);
+        if (isNaN(parsed)) return showModal('Invalid date of birth. Please use YYYY-MM-DD format.');
+        const age = calculateAge(parsed);
+        if (age < 9 || age > 55) {
+          return showModal('Age appears to be ' + age + ', which is outside the typical range (9–55). If correct, proceed; otherwise, check your input.');
+        }
+        state.dob = parsed;
+        state.age = age;
+      }
+      showStep('pcod');
+      setTimeout(() => el('symptom1').focus(), 200);
+    }
+
+    function checkPCOD() {
+      const symptoms = document.querySelectorAll('#pcod-form input[type="checkbox"]:checked');
+      state.pcodSymptoms = Array.from(symptoms).map(s => sanitize(s.nextElementSibling.textContent));
+      const count = symptoms.length;
+      let chance = 'low';
+      let message = '';
+      if (count <= 2) {
+        chance = 'low';
+        message = `Based on your responses, there is a low chance you have PCOD.`;
+      } else if (count <= 5) {
+        chance = 'medium';
+        message = `Based on your responses, there is a medium chance you have PCOD. Consider seeing a doctor.`;
+      } else {
+        chance = 'high';
+        message = `Based on your responses, there is a high chance you have PCOD. You should consider seeing a doctor for proper diagnosis.\n\n⚠️ Warning: PCOD can cause irregular cycles, which may reduce the accuracy of period predictions in this app. Predictions are estimates based on average cycle data and may vary due to factors like diet, stress, hormonal changes, or other influences.`;
+      }
+      if (state.pcodSymptoms.length > 0) {
+        message += `<br><br><strong>Selected Symptoms:</strong><ul style="margin:10px 0;padding-left:20px;">${state.pcodSymptoms.map(s => `<li>${s}</li>`).join('')}</ul>`;
+      } else {
+        message += `<br><br>No symptoms selected.`;
+      }
+      message += `<br>This is not a medical diagnosis—please consult a healthcare professional.`;
+      state.pcodChance = chance;
+      showModal(message);
+    }
+
+    function calculateAge(dob) {
+      const diff = Date.now() - dob.getTime();
+      return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
+    }
+
+    function createCalendar() {
+      const lastVal = el('last').value;
+      const cycleVal = parseInt(el('cycle').value, 10);
+      const periodLenVal = parseInt(el('periodLen').value, 10);
+      if (!lastVal) return showModal('Please select your last period date.');
+      if (isNaN(cycleVal) || cycleVal < 15 || cycleVal > 45) {
+        return showModal('Cycle length should be between 15 and 45 days. If outside this range, consult a healthcare provider.');
+      }
+      if (isNaN(periodLenVal) || periodLenVal < 3 || periodLenVal > 10) {
+        return showModal('Period length should be between 3 and 10 days.');
+      }
+      const last = new Date(lastVal);
+      if (isNaN(last)) return showModal('Invalid period start date. Please use YYYY-MM-DD format.');
+      if (last > new Date()) return showModal('Last period date cannot be in the future.');
+      state.last = new Date(last.getFullYear(), last.getMonth(), last.getDate());
+      state.cycle = cycleVal;
+      state.periodLen = periodLenVal;
+      state.months = [];
+      state.visibleIndex = 0;
+      generateMonth(state.visibleIndex);
+      renderMonth(state.visibleIndex);
+      showStep(3);
+    }
+
+    function generateMonth(index) {
+      if (state.months[index]) return;
+      const start = new Date(state.last.getFullYear(), state.last.getMonth(), 1);
+      const oneDay = 24 * 60 * 60 * 1000;
+      const mm = new Date(start.getFullYear(), start.getMonth() + index, 1);
+      const days = new Date(mm.getFullYear(), mm.getMonth() + 1, 0).getDate();
+      const monthObj = { month: mm.getMonth(), year: mm.getFullYear(), days: [] };
+      for (let d = 1; d <= days; d++) {
+        const date = new Date(mm.getFullYear(), mm.getMonth(), d);
+        const diffDays = Math.round((date - state.last) / oneDay);
+        let type = 'normal';
+        if (diffDays >= 0) {
+          const mod = Math.abs(diffDays % state.cycle);
+          if (mod < state.periodLen) type = 'period';
+          const ovulationIndex = state.cycle - 14;
+          const fertileStart = ovulationIndex - 5;
+          if (mod >= fertileStart && mod <= ovulationIndex) type = (type === 'period') ? 'period' : 'fertile';
+        }
+        monthObj.days.push({ date, type });
+      }
+      state.months[index] = monthObj;
+    }
+
+    function renderMonth(index) {
+      if (index < 0 || index >= 12) return showModal('No prediction available for this month. We only predict 12 months.');
+      generateMonth(index);
+      const monthObj = state.months[index];
+      el('monthTitle').innerText = `${getMonthName(monthObj.month)} ${monthObj.year}`;
+      el('pred-count').innerText = 12;
+      el('visible-month').innerText = `${index + 1}/12`;
+      el('greeting').innerText = `Hi ${state.name || 'there'} — your calendar:`;
+      el('age-note').innerText = state.age ? `Age: ${state.age}${state.pcodChance ? `, PCOD Chance: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : ''}` : state.pcodChance ? `PCOD Chance: ${state.pcodChance.charAt(0).toUpperCase() + state.pcodChance.slice(1)}` : '';
+      const grid = el('calendarGrid');
+      grid.innerHTML = '';
+      const firstDay = new Date(monthObj.year, monthObj.month, 1);
+      const startOffset = firstDay.getDay();
+      const daysInMonth = monthObj.days.length;
+      const totalCells = Math.ceil((startOffset + daysInMonth) / 7) * 7;
+      for (let i = 0; i < totalCells; i++) {
+        const cell = document.createElement('div');
+        cell.className = 'cell';
+        if (i < startOffset || i >= startOffset + daysInMonth) {
+          cell.className += ' other';
+          cell.innerHTML = `<div class="daynum">-</div>`;
+        } else {
+          const dayIndex = i - startOffset;
+          const day = monthObj.days[dayIndex];
+          const dateStr = day.date.toISOString().split('T')[0];
+          cell.innerHTML = `<div class="daynum">${day.date.getDate()}</div>`;
+          if (day.type !== 'normal') {
+            cell.innerHTML += `<div class="badge ${day.type}">${day.type === 'period' ? 'Period' : 'Fertile'}</div>`;
+            const tip = document.createElement('div');
+            tip.className = 'tooltip';
+            tip.innerText = `${day.type === 'period' ? 'Period' : 'Fertile'} day: ${dateStr}`;
+            cell.appendChild(tip);
+          }
+        }
+        cell.tabIndex = 0;
+        grid.appendChild(cell);
+      }
+    }
+
+    function getMonthName(month) {
+      const names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+      return names[month];
+    }
+
+    function toggleTheme() {
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
+      localStorage.setItem('theme', isDark ? 'light' : 'dark');
+    }
+
+    // Web Worker for PDF generation
+    const pdfWorkerCode = `
+      self.addEventListener('message', function(e) {
+        importScripts('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
+        const { jsPDF } = self.jspdf || {};
+        if (!jsPDF) {
+          self.postMessage({ error: 'Failed to load jsPDF library' });
+          return;
+        }
+        const { name, age, last, cycle, periodLen, pcodChance, pcodSymptoms, months } = e.data;
+
+        const doc = new jsPDF();
+        
+        // Disclaimer
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(10);
+        doc.text('This report is generated by ROS Cycle, a student-built prototype. It is not a medical diagnosis. Consult a doctor.', 20, 15);
+        
+        // Header
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(16);
+        doc.text('ROS Cycle Report', 20, 25);
+        
+        // User Info
+        doc.setFontSize(12);
+        doc.setFont('helvetica', 'normal');
+        let y = 35;
+        doc.text(\`Generated: \${new Date().toLocaleDateString()}\`, 20, y);
+        y += 10;
+        doc.text(\`Name: \${name || 'Not provided'}\`, 20, y);
+        y += 10;
+        if (age) {
+          doc.text(\`Age: \${age}\`, 20, y);
+          y += 10;
+        }
+        
+        // PCOD Symptoms
+        if (pcodSymptoms.length > 0 || pcodChance) {
+          doc.setFont('helvetica', 'bold');
+          doc.text('PCOD Symptoms', 20, y);
+          y += 10;
+          doc.setFont('helvetica', 'normal');
+          if (pcodChance) {
+            doc.text(\`Chance: \${pcodChance.charAt(0).toUpperCase() + pcodChance.slice(1)}\`, 20, y);
+            y += 10;
+          }
+          if (pcodSymptoms.length > 0) {
+            doc.text('Symptoms:', 20, y);
+            y += 10;
+            pcodSymptoms.forEach(symptom => {
+              doc.text(\`- \${symptom}\`, 25, y);
+              y += 7;
+            });
+          } else {
+            doc.text('No symptoms selected.', 20, y);
+            y += 10;
+          }
+          y += 5;
+        }
+        
+        // Cycle Details
+        doc.setFont('helvetica', 'bold');
+        doc.text('Cycle Details', 20, y);
+        y += 10;
+        doc.setFont('helvetica', 'normal');
+        doc.text(\`Last Period: \${last ? new Date(last).toLocaleDateString() : 'Not provided'}\`, 20, y);
+        y += 10;
+        doc.text(\`Cycle Length: \${cycle} days\`, 20, y);
+        y += 10;
+        doc.text(\`Period Length: \${periodLen} days\`, 20, y);
+        y += 15;
+        
+        // Predicted Calendar
+        doc.setFont('helvetica', 'bold');
+        doc.text('Predicted Dates', 20, y);
+        y += 10;
+        doc.setFont('helvetica', 'normal');
+        doc.text('Note: Predictions are estimates and may vary due to PCOD, stress, or other factors.', 20, y);
+        y += 10;
+        
+        const data = months.map(monthObj => {
+          const periodDays = monthObj.days.filter(day => day.type === 'period').map(day => new Date(day.date).getDate()).join(', ');
+          const fertileDays = monthObj.days.filter(day => day.type === 'fertile').map(day => new Date(day.date).getDate()).join(', ');
+          return [
+            \`\${monthObj.monthName} \${monthObj.year}\`,
+            periodDays || 'None',
+            fertileDays || 'None'
+          ];
+        });
+        
+        doc.autoTable({
+          startY: y,
+          head: [['Month', 'Period Days', 'Fertile Days']],
+          body: data,
+          theme: 'striped',
+          headStyles: { fillColor: [100, 0, 50], textColor: [255, 255, 255], fontSize: 10 },
+          styles: { fontSize: 10, textColor: [0, 0, 0], cellPadding: 2 },
+          columnStyles: {
+            0: { cellWidth: 60 },
+            1: { cellWidth: 60 },
+            2: { cellWidth: 60 }
+          }
+        });
+        
+        y = doc.lastAutoTable.finalY + 10;
+        doc.setFontSize(10);
+        doc.text('Generated on your device for privacy. No data is stored or sent.', 20, y);
+        
+        const pdfBlob = doc.output('blob');
+        self.postMessage({ pdfBlob });
+      });
+    `;
+
+    function exportToPDF() {
+      if (window.jspdfFailed || !window.jspdf) {
+        showModal('Export failed: Required library not available. Please check your internet connection or try again later.');
+        return;
+      }
+      if (!state.last) {
+        showModal('No cycle data available. Please complete Step 3 to generate a calendar.');
+        return;
+      }
+      if (state.months.length < 12) {
+        for (let i = 0; i < 12; i++) {
+          generateMonth(i);
+        }
+      }
+      el('loading').classList.add('active');
+      
+      const blob = new Blob([pdfWorkerCode], { type: 'application/javascript' });
+      const worker = new Worker(URL.createObjectURL(blob));
+      
+      const monthsWithNames = state.months.map(m => ({
+        ...m,
+        monthName: getMonthName(m.month)
+      }));
+      
+      worker.postMessage({
+        name: state.name,
+        age: state.age,
+        last: state.last,
+        cycle: state.cycle,
+        periodLen: state.periodLen,
+        pcodChance: state.pcodChance,
+        pcodSymptoms: state.pcodSymptoms,
+        months: monthsWithNames
+      });
+      
+      worker.onmessage = function(e) {
+        if (e.data.error) {
+          el('loading').classList.remove('active');
+          showModal(e.data.error);
+          worker.terminate();
+          return;
+        }
+        const { pdfBlob } = e.data;
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(pdfBlob);
+        link.download = `ROS_Cycle_Report_${new Date().toISOString().split('T')[0]}.pdf`;
+        link.click();
+        el('loading').classList.remove('active');
+        el('exportModal').classList.add('active');
+        el('exportModal').querySelector('button').focus();
+        worker.terminate();
+      };
+      
+      worker.onerror = function(err) {
+        el('loading').classList.remove('active');
+        showModal('Failed to generate PDF. Please try again.');
+        worker.terminate();
+      };
+    }
+
+    function setMaxDates() {
+      const today = new Date().toISOString().split('T')[0];
+      el('dob').max = today;
+      el('last').max = today;
+    }
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        if (el('modal').classList.contains('active')) closeModal();
+        if (el('resetModal').classList.contains('active')) closeModal('resetModal');
+        if (el('exportModal').classList.contains('active')) closeModal('exportModal');
+      }
+    });
+
+    (function init() {
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      document.documentElement.setAttribute('data-theme', savedTheme);
+      setMaxDates();
+      el('name').focus();
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('serviceworker.js')
+          .then(() => console.log('Service Worker registered successfully'))
+          .catch(err => console.warn('Service Worker registration failed:', err.message));
+      } else {
+        console.warn('Service Worker not supported in this browser');
+      }
+    })();
+  </script>
 </body>
 </html>
+```