rename
· 1 year ago
f2b3ee2f162c9ef8cbf6df10804936a7635554b5
Parent:
afb792bb6
2 files changed +1188 −798
- anapanasati-meditation.html +0 −798
- anapanasati-mindfulness-of-breathing.html +1188 −0
Diff
--- a/anapanasati-meditation.html +++ /dev/null @@ -1,798 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Practical Guide to Ānāpānasati: Mindfulness of Breathing</title> - <style> - /* --- Core Styling & "Gentle Current of Breath" Theme --- */ - :root { - --primary-bg: #f4f7f6; - --primary-bg-light-pulse: #f8fbfb; /* Lighter shade for breath pulse */ - --secondary-bg: #e8eeef; - --text-color: #333d47; - --accent-color: #7aa0a7; - --highlight-color: #a7c4c4; - --border-color: #cddce0; - --font-sans-serif: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - --body-font-size: 17px; - --line-height: 1.7; - --container-width: 800px; - --nav-width: 60px; /* Width of the guided path navigation */ - } - - /* --- "Living Breath" Background Animation --- */ - body::before { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; /* Behind all content */ - background: linear-gradient(135deg, var(--primary-bg), var(--primary-bg-light-pulse)); - animation: livingBreathAnimation 15s infinite ease-in-out alternate; - } - - @keyframes livingBreathAnimation { - 0% { - background: linear-gradient(135deg, var(--primary-bg), var(--primary-bg-light-pulse)); - } - 100% { - background: linear-gradient(135deg, var(--primary-bg-light-pulse), var(--primary-bg)); - } - } - - body { - font-family: var(--font-sans-serif); - background-color: transparent; /* Let the animated pseudo-element show through */ - color: var(--text-color); - margin: 0; - padding: 0; - line-height: var(--line-height); - font-size: var(--body-font-size); - overflow-x: hidden; - padding-left: var(--nav-width); /* Space for the guided path navigation */ - } - - .container { - max-width: var(--container-width); - margin: 0 auto; - padding: 20px; - } - - h1, h2, h3, h4, h5, h6 { - font-family: var(--font-sans-serif); - color: var(--text-color); - margin-top: 2em; - margin-bottom: 0.8em; - font-weight: 600; - } - - h1 { font-size: 2.5em; text-align: center; margin-bottom: 1em; font-weight: 700; color: var(--accent-color); } - h2 { font-size: 1.8em; border-bottom: 2px solid var(--highlight-color); padding-bottom: 0.3em; } - h3 { font-size: 1.4em; color: var(--accent-color); } - h4 { font-size: 1.1em; font-weight: 600; } - - p, li { - margin-bottom: 0.8em; - } - - a { - color: var(--accent-color); - text-decoration: none; - transition: color 0.3s ease; - } - - a:hover, a:focus { - color: var(--highlight-color); - text-decoration: underline; - } - - .text-center { text-align: center; } - .subtle-text { color: #5c6b73; font-size: 0.9em; } - .screen-reader-text { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; - overflow: hidden; - } - - .page-header { - background-color: rgba(232, 238, 239, 0.8); /* Slightly transparent for depth */ - padding: 10px 0; - text-align: center; - border-bottom: 1px solid var(--border-color); - font-size: 0.9em; - position: relative; /* Ensure it's above the ::before pseudo-element */ - z-index: 10; - } - .page-header p { margin: 0; } - - .hero-section { - background-color: rgba(232, 238, 239, 0.8); /* Slightly transparent */ - padding: 60px 20px; - text-align: center; - border-bottom: 3px solid var(--accent-color); - margin-bottom: 30px; - position: relative; - z-index: 5; - } - .hero-section h1 { margin-top:0; font-size: 2.8em; color: var(--text-color); } - .hero-section p { font-size: 1.2em; margin-bottom: 30px; color: #4a5560; } - .cta-button { - display: inline-block; - background-color: var(--accent-color); - color: white; - padding: 15px 30px; - font-size: 1.1em; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s ease, color 0.3s ease; - font-weight: 600; - border: none; - cursor: pointer; - } - .cta-button:hover { - background-color: var(--highlight-color); - color: var(--text-color); - } - .secondary-link { - display: block; - margin-top: 20px; - font-size: 0.9em; - } - - .content-section { - margin-bottom: 40px; - padding: 25px; /* Increased padding slightly */ - background-color: rgba(255, 255, 255, 0.85); /* Slightly transparent cards for depth */ - border-radius: 8px; - box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* Softer shadow */ - position: relative; - z-index: 5; - } - - .breath-pacer-container { - text-align: center; - margin: 30px 0; - padding: 20px; - background-color: rgba(232, 238, 239, 0.8); - border-radius: 8px; - } - .breath-pacer-visual { - width: 100px; - height: 100px; - background-color: var(--highlight-color); - border-radius: 50%; - margin: 10px auto; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 0.9em; - animation: breathPacerAnimation 8s infinite ease-in-out; - } - @keyframes breathPacerAnimation { /* Renamed to avoid conflict */ - 0% { transform: scale(0.8); opacity: 0.7; } - 50% { transform: scale(1); opacity: 1; } - 100% { transform: scale(0.8); opacity: 0.7; } - } - .breath-pacer-controls button { - background-color: var(--accent-color); - color: white; - border: none; - padding: 8px 15px; - margin: 5px; - border-radius: 4px; - cursor: pointer; - } - .breath-pacer-controls button:hover { - background-color: var(--highlight-color); - } - - .posture-assessor { - display: flex; - align-items: flex-start; - gap: 20px; - margin-top: 20px; - padding: 15px; - background-color: rgba(232, 238, 239, 0.7); - border-radius: 8px; - } - .posture-silhouette { - flex-shrink: 0; - width: 150px; - height: auto; - border: 1px dashed var(--border-color); - padding: 10px; - text-align: center; - position: relative; - } - .posture-silhouette svg { width: 100%; height: auto; } - .hotspot { - position: absolute; - width: 20px; - height: 20px; - background-color: rgba(122, 160, 167, 0.5); - border-radius: 50%; - cursor: pointer; - transition: background-color 0.3s ease; - } - .hotspot:hover { background-color: var(--accent-color); } - .hotspot.head { top: 10px; left: 45%; } - .hotspot.shoulders { top: 40px; left: 10%; width:80%; height:15px; border-radius: 5px;} - .hotspot.spine { top: 30px; left: 47%; height: 70px; width: 6px; border-radius: 3px;} - .hotspot.hands { bottom: 20px; left: 35%; } - .posture-tips { flex-grow: 1; } - .posture-tip { - padding: 10px; - background-color: var(--primary-bg); - border: 1px solid var(--border-color); - border-radius: 4px; - margin-bottom: 8px; - font-size: 0.95em; - } - - .troubleshooting-tree summary { - cursor: pointer; - font-weight: 600; - color: var(--accent-color); - padding: 8px; - background-color: rgba(232, 238, 239, 0.7); - border-radius: 4px; - margin-bottom: 5px; - list-style: none; - } - .troubleshooting-tree summary::-webkit-details-marker { display: none; } - .troubleshooting-tree summary::before { content: '▶ '; margin-right: 5px; } - .troubleshooting-tree[open] summary::before { content: '▼ '; } - .troubleshooting-tree div { - padding-left: 25px; - border-left: 2px solid var(--highlight-color); - margin-top: 5px; - } - - .pali-term { - border-bottom: 1px dotted var(--accent-color); - cursor: help; - position: relative; - } - .pali-term .tooltip-text { - visibility: hidden; - width: 200px; - background-color: var(--text-color); - color: #fff; - text-align: center; - border-radius: 6px; - padding: 8px; - position: absolute; - z-index: 100; /* Ensure tooltip is on top */ - bottom: 125%; - left: 50%; - margin-left: -100px; - opacity: 0; - transition: opacity 0.3s, visibility 0.3s; - font-size: 0.85em; - line-height: 1.4; - } - .pali-term:hover .tooltip-text { - visibility: visible; - opacity: 1; - } - - .tetrad-toggle summary { - cursor: pointer; - font-weight: bold; - padding: 10px; - background-color: rgba(232, 238, 239, 0.7); - border-radius: 4px; - margin-bottom: 5px; - list-style: none; - } - .tetrad-toggle summary::-webkit-details-marker { display: none; } - .tetrad-toggle summary::before { content: '➕ '; color: var(--accent-color); margin-right: 8px; } - .tetrad-toggle[open] summary::before { content: '➖ '; } - .tetrad-content { padding: 10px 0 10px 30px; } - .tetrad-content ol { padding-left: 20px; } - - .page-footer { - text-align: center; - padding: 30px 20px; - margin-top: 40px; - background-color: var(--text-color); - color: var(--primary-bg); - font-size: 0.9em; - position: relative; - z-index: 5; - } - .page-footer a { color: var(--highlight-color); } - - /* --- "Guided Path" Interactive Navigation --- */ - #guidedPathNav { - position: fixed; - top: 0; - left: 0; - height: 100%; - width: var(--nav-width); - background-color: rgba(224, 230, 231, 0.85); /* Softer, slightly transparent */ - backdrop-filter: blur(5px); /* Frosted glass effect */ - z-index: 1000; /* On top of everything */ - padding-top: 80px; /* Space for page header if it were fixed */ - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - transition: width 0.3s ease; /* For potential hover expand */ - } - - #pathLine { - position: absolute; - top: 10%; /* Start path a bit down */ - left: 50%; - transform: translateX(-50%); - width: 3px; /* Thicker line */ - height: 80%; /* Span most of the nav height */ - background-color: var(--border-color); - z-index: 1; - } - - #pathMarker { - position: absolute; - left: 50%; - transform: translateX(-50%); - width: 18px; /* Larger marker */ - height: 18px; - background-color: var(--accent-color); - border: 2px solid white; /* Contrast */ - border-radius: 50%; - box-shadow: 0 0 10px rgba(122, 160, 167, 0.7); - z-index: 2; - transition: top 0.4s cubic-bezier(0.65, 0, 0.35, 1); /* Smoother transition */ - } - - #guidedPathNav ul { - list-style: none; - padding: 0; - margin: 0; - width: 100%; - position: relative; /* For positioning list items along the path */ - z-index: 2; /* Above pathLine */ - height: 80%; /* Match pathLine's relative height */ - top: 10%; /* Align with pathLine */ - display: flex; - flex-direction: column; - justify-content: space-around; /* Distribute items along the path */ - } - - #guidedPathNav li a { - display: flex; /* Changed to flex for better alignment */ - align-items: center; - justify-content: center; /* Center icon */ - width: calc(var(--nav-width) - 10px); /* Full width for click area */ - height: 40px; /* Clickable height */ - margin: 5px auto; /* Centering and spacing */ - color: var(--text-color); - text-decoration: none; - border-radius: 50%; /* Make the link area round like a dot initially */ - transition: background-color 0.3s ease, color 0.3s ease; - position: relative; /* For tooltip/label */ - } - #guidedPathNav li a::before { /* The dot visual */ - content: ""; - width: 10px; - height: 10px; - background-color: var(--border-color); - border-radius: 50%; - display: block; - transition: background-color 0.3s ease, transform 0.3s ease; - } - - #guidedPathNav li a.active::before { - background-color: var(--accent-color); - transform: scale(1.5); /* Enlarge active dot */ - } - #guidedPathNav li a:hover::before { - background-color: var(--highlight-color); - } - - #guidedPathNav li a .nav-label { /* Tooltip-like label */ - visibility: hidden; - opacity: 0; - position: absolute; - left: calc(var(--nav-width) + 5px); /* Position to the right of the nav */ - top: 50%; - transform: translateY(-50%); - background-color: var(--text-color); - color: white; - padding: 5px 10px; - border-radius: 4px; - font-size: 0.8em; - white-space: nowrap; - transition: visibility 0.2s, opacity 0.2s ease-in-out; - } - - #guidedPathNav:hover li a .nav-label, - #guidedPathNav li a:focus .nav-label { /* Show label on nav hover or link focus */ - visibility: visible; - opacity: 1; - } - - - /* Responsive Adjustments */ - @media (max-width: 900px) { /* Increased breakpoint for nav adjustment */ - body { - padding-left: 0; /* Remove padding when nav is hidden/changed */ - } - #guidedPathNav { - /* Example: Hide nav on smaller screens, or transform to a hamburger. - For now, let's hide it. A real implementation would need a toggle. */ - display: none; - } - .container { - max-width: 100%; - padding: 15px; - } - } - @media (max-width: 768px) { - body { font-size: 16px; } - h1 { font-size: 2em; } - .hero-section { padding: 40px 15px; } - .posture-assessor { flex-direction: column; } - .posture-silhouette { width: 120px; margin: 0 auto; } - } - - </style> -</head> -<body> - - <!-- "Guided Path" Navigation --> - <nav id="guidedPathNav" aria-label="Page sections"> - <div id="pathLine"></div> - <div id="pathMarker"></div> - <ul> - <!-- Links will be dynamically populated or manually added --> - <li><a href="#introduction" data-section-id="introduction" aria-label="Introduction"><span class="nav-label">Introduction</span></a></li> - <li><a href="#foundations" data-section-id="foundations" aria-label="Foundations"><span class="nav-label">Foundations</span></a></li> - <li><a href="#preparation" data-section-id="preparation" aria-label="Preparation"><span class="nav-label">Preparation</span></a></li> - <li><a href="#step-by-step-practice" data-section-id="step-by-step-practice" aria-label="Step-by-Step Practice"><span class="nav-label">Practice Guide</span></a></li> - <li><a href="#troubleshooting" data-section-id="troubleshooting" aria-label="Troubleshooting"><span class="nav-label">Troubleshooting</span></a></li> - <li><a href="#signs-of-progress" data-section-id="signs-of-progress" aria-label="Signs of Progress"><span class="nav-label">Progress</span></a></li> - <li><a href="#integration-practices" data-section-id="integration-practices" aria-label="Integration"><span class="nav-label">Integration</span></a></li> - <li><a href="#conclusion" data-section-id="conclusion" aria-label="Conclusion"><span class="nav-label">Conclusion</span></a></li> - </ul> - </nav> - - <header class="page-header"> - <p>An companion guide to the <a href="https://cheatsheets.davidveksler.com/buddhism.html" target="_blank">Core Buddhist Principles Cheatsheet</a>.</p> - </header> - - <div class="hero-section"> - <h1>Your First Mindful Breath Starts Now</h1> - <p>A practical guide to <span class="pali-term">Ānāpānasati<span class="tooltip-text">Mindfulness of breathing, a core meditation practice.</span></span> for clarity, calm, and insight.</p> - <a href="#step-by-step-practice" class="cta-button">Start Guided Practice</a> - <a href="#foundations" class="secondary-link">Explore the Foundations First</a> - </div> - - <div class="container"> - - <section id="introduction" class="content-section"> - <h2>Introduction</h2> - <p>Welcome to the path of <span class="pali-term">Ānāpānasati<span class="tooltip-text">Mindfulness of breathing.</span></span>, or mindfulness of breathing. This practice is a cornerstone of Buddhist meditation, with deep roots and profound benefits.</p> - <ul> - <li>Origins in the Buddha's <span class="pali-term">Ānāpānasati Sutta<span class="tooltip-text">The Buddha's primary discourse on mindfulness of breathing.</span></span>.</li> - <li>Central role in various Buddhist meditation traditions.</li> - <li>Supported by growing scientific evidence for its positive impact on mental and physical well-being.</li> - </ul> - </section> - - <section id="foundations" class="content-section"> - <h2>Foundations</h2> - <p>Understanding the framework of Ānāpānasati enriches the practice.</p> - <ul> - <li>The four tetrads: Guiding the observation of (1) body, (2) feelings, (3) mind, and (4) mental objects (<span class="pali-term">dhammas<span class="tooltip-text">Mental qualities, phenomena, principles.</span></span>).</li> - <li>Relationship to the Four Foundations of Mindfulness (<span class="pali-term">Satipaṭṭhāna<span class="tooltip-text">The Four Foundations of Mindfulness: contemplation of body, feelings, mind, and mental objects.</span></span>).</li> - <li>How Ānāpānasati develops both <span class="pali-term">samatha<span class="tooltip-text">Calm, concentration.</span></span> (calm) and <span class="pali-term">vipassanā<span class="tooltip-text">Insight, clear seeing.</span></span> (insight).</li> - </ul> - </section> - - <section id="preparation" class="content-section"> - <h2>Preparation: Setting the Stage for Calm</h2> - <p>A conducive environment and posture support your practice.</p> - - <div class="posture-assessor"> - <div class="posture-silhouette" aria-hidden="true"> - <svg viewBox="0 0 100 150" xmlns="http://www.w3.org/2000/svg"> - <circle cx="50" cy="20" r="10" fill="#ccc"/> - <rect x="40" y="30" width="20" height="50" fill="#ccc"/> - <ellipse cx="50" cy="90" rx="30" ry="15" fill="#ccc"/> - <rect x="20" y="100" width="60" height="10" fill="#ccc"/> - <title>Meditating Figure Silhouette</title> - </svg> - <div class="hotspot head" data-tip="head-tip" aria-label="Head posture tip"></div> - <div class="hotspot shoulders" data-tip="shoulders-tip" aria-label="Shoulders posture tip"></div> - <div class="hotspot spine" data-tip="spine-tip" aria-label="Spine posture tip"></div> - <div class="hotspot hands" data-tip="hands-tip" aria-label="Hands posture tip"></div> - </div> - <div class="posture-tips"> - <p><strong>Optimal Sitting Postures:</strong> Aim for stability and ease. Common options include:</p> - <ul> - <li>Burmese (legs crossed, both feet on floor)</li> - <li>Half Lotus / Full Lotus (if comfortable without strain)</li> - <li>Seiza (kneeling, using a cushion or bench)</li> - <li>Chair (feet flat, back unsupported or gently supported)</li> - </ul> - <div id="head-tip" class="posture-tip" style="display:none;"><strong>Head:</strong> Slightly tilted down, as if gazing a few feet ahead. Chin gently tucked.</div> - <div id="shoulders-tip" class="posture-tip" style="display:none;"><strong>Shoulders:</strong> Relaxed, level, and slightly back, opening the chest. Avoid hunching.</div> - <div id="spine-tip" class="posture-tip" style="display:none;"><strong>Back:</strong> Straight but not stiff, maintaining natural curvature. Imagine being gently pulled up from the crown.</div> - <div id="hands-tip" class="posture-tip" style="display:none;"><strong>Hands:</strong> Rest gently in the lap, one on top of the other, palms up (<span class="pali-term">dhyāna mudrā<span class="tooltip-text">Meditation gesture, often with thumbs lightly touching.</span></span>), or on the knees.</div> - </div> - </div> - - <h4>Creating a Distraction-Free Environment</h4> - <ul> - <li>Choose a quiet space where you're unlikely to be disturbed.</li> - <li>Minimize clutter. A simple, dedicated space can be helpful.</li> - <li>Inform household members if necessary.</li> - </ul> - - <h4>Eyes: Half-Closed vs. Closed</h4> - <ul> - <li><strong>Closed:</strong> Can reduce visual distraction, good for turning inward. May lead to drowsiness for some.</li> - <li><strong>Half-Closed (or soft gaze):</strong> Gaze softly downwards a few feet in front. Helps maintain alertness. Common in Zen.</li> - <li>Experiment to see what works best for you.</li> - </ul> - </section> - - <div class="breath-pacer-container"> - <h3>Optional: Gentle Breath Pacer</h3> - <div class="breath-pacer-visual" id="breathPacerVisual"></div> - <p class="subtle-text">Observe the rhythm. Let it guide your breath if helpful.</p> - <div class="breath-pacer-controls"> - <button id="playPacer">Play</button> - <button id="pausePacer">Pause</button> - </div> - <p class="subtle-text">This is a visual guide. Your natural breath is always right.</p> - </div> - - <section id="step-by-step-practice" class="content-section"> - <h2>Step-by-Step Practice Guide</h2> - <p>This guide breaks down the practice into manageable stages. Adjust timings to suit your experience.</p> - <article><h3>1. Initial Setup (Approx. 5 minutes)</h3></article> - <article><h3>2. Establishing Awareness (Approx. 5-10 minutes)</h3></article> - <article><h3>3. Core Practice (Approx. 15-45 minutes)</h3></article> - <article id="sixteen-steps"><h3>4. The 16 Steps of Ānāpānasati (Progressive Deepening)</h3></article> - <!-- ... (rest of the step-by-step content as before) ... --> - </section> - - <section id="troubleshooting" class="content-section"> - <h2>Troubleshooting Common Challenges</h2> - <!-- ... (troubleshooting content as before) ... --> - </section> - - <section id="signs-of-progress" class="content-section"> - <h2>Signs of Progress</h2> - <!-- ... (signs of progress content as before) ... --> - </section> - - <section id="progressive-schedule" class="content-section"> - <h2>Progressive Training Schedule (Suggested)</h2> - <!-- ... (schedule content as before) ... --> - </section> - - <section id="integration-practices" class="content-section"> - <h2>Integration Practices: Bringing Mindfulness into Daily Life</h2> - <!-- ... (integration content as before) ... --> - </section> - - <section id="technical-aspects" class="content-section"> - <h2>Technical Aspects (Brief Overview)</h2> - <!-- ... (technical aspects content as before) ... --> - </section> - - <section id="resources" class="content-section"> - <h2>Resources</h2> - <!-- ... (resources content as before) ... --> - </section> - - <section id="conclusion" class="content-section"> - <h2>Conclusion: Your Ongoing Journey</h2> - <!-- ... (conclusion content as before, ensure Pāli terms are correctly wrapped) ... --> - <p class="text-center" style="margin-top: 30px;"><em>May your practice bring peace and understanding.</em></p> - </section> - </div> - - <footer class="page-footer"> - <p>© 2025 Practical Guide to Ānāpānasati. Information inspired by traditional teachings and modern understanding. - <br>This guide is for informational purposes and does not replace guidance from a qualified teacher. - </p> - <p><a href="https://cheatsheets.davidveksler.com/" target="_blank">Back to All Cheatsheets</a></p> - </footer> - - <script> - document.addEventListener('DOMContentLoaded', function () { - // --- Posture Assessor Hotspots --- - const hotspots = document.querySelectorAll('.posture-assessor .hotspot'); - const postureTips = { - 'head-tip': document.getElementById('head-tip'), - 'shoulders-tip': document.getElementById('shoulders-tip'), - 'spine-tip': document.getElementById('spine-tip'), - 'hands-tip': document.getElementById('hands-tip') - }; - let activePostureTip = null; - hotspots.forEach(hotspot => { - const tipId = hotspot.dataset.tip; - const tipElement = postureTips[tipId]; - if (tipElement) { - hotspot.addEventListener('mouseover', () => { - if (activePostureTip) activePostureTip.style.display = 'none'; - tipElement.style.display = 'block'; - activePostureTip = tipElement; - }); - } - }); - document.addEventListener('click', function(event) { - const postureAssessor = document.querySelector('.posture-assessor'); - if (activePostureTip && postureAssessor && !postureAssessor.contains(event.target)) { - activePostureTip.style.display = 'none'; - activePostureTip = null; - } - }); - - // --- Breath Pacer Controls --- - const breathPacerVisual = document.getElementById('breathPacerVisual'); - const playPacerBtn = document.getElementById('playPacer'); - const pausePacerBtn = document.getElementById('pausePacer'); - let pacerAnimationState = 'running'; - - if (breathPacerVisual) { - breathPacerVisual.style.animationPlayState = 'running'; - breathPacerVisual.textContent = "Inhale..."; - // Simplified text change based on CSS animation timing - const pacerCycleTime = 8000; // 8s animation - let pacerInterval; - function updatePacerText() { - if (pacerAnimationState === 'running') { - breathPacerVisual.textContent = "Inhale..."; - setTimeout(() => { - if (pacerAnimationState === 'running') breathPacerVisual.textContent = "Exhale..."; - }, pacerCycleTime / 2); - } - } - function startPacerInterval() { - updatePacerText(); // Initial call - pacerInterval = setInterval(updatePacerText, pacerCycleTime); - } - function stopPacerInterval() { - clearInterval(pacerInterval); - } - startPacerInterval(); - - - if (playPacerBtn) { - playPacerBtn.addEventListener('click', () => { - breathPacerVisual.style.animationPlayState = 'running'; - pacerAnimationState = 'running'; - stopPacerInterval(); // Clear existing before starting new - startPacerInterval(); - }); - } - if (pausePacerBtn) { - pausePacerBtn.addEventListener('click', () => { - breathPacerVisual.style.animationPlayState = 'paused'; - pacerAnimationState = 'paused'; - breathPacerVisual.textContent = "Paused"; - stopPacerInterval(); - }); - } - } - - // --- "Guided Path" Navigation Logic --- - const nav = document.getElementById('guidedPathNav'); - const pathMarker = document.getElementById('pathMarker'); - const navLinks = nav.querySelectorAll('ul li a'); - const sections = Array.from(navLinks).map(link => { - const sectionId = link.getAttribute('href').substring(1); - return document.getElementById(sectionId); - }).filter(section => section !== null); // Filter out nulls if section not found - - const navList = nav.querySelector('ul'); - const pathLine = document.getElementById('pathLine'); - - function updateMarkerAndActiveLink() { - if (!navList || !pathMarker || sections.length === 0) return; - - let currentSectionId = null; - const scrollPosition = window.scrollY + window.innerHeight / 2; // Consider middle of viewport - - sections.forEach(section => { - if (section.offsetTop <= scrollPosition && (section.offsetTop + section.offsetHeight) > scrollPosition) { - currentSectionId = section.id; - } - }); - // If no section is perfectly in the middle (e.g., at the very top or bottom of page), - // find the closest one from the top. - if (!currentSectionId && sections.length > 0) { - for (let i = sections.length - 1; i >= 0; i--) { - if (sections[i].offsetTop <= window.scrollY + 100) { // 100px threshold from top - currentSectionId = sections[i].id; - break; - } - } - if (!currentSectionId) currentSectionId = sections[0].id; // Default to first if nothing else - } - - - let activeLinkIndex = -1; - navLinks.forEach((link, index) => { - link.classList.remove('active'); - if (link.getAttribute('href') === `#${currentSectionId}`) { - link.classList.add('active'); - activeLinkIndex = index; - } - }); - - // Position marker - if (activeLinkIndex !== -1 && navLinks[activeLinkIndex]) { - const activeNavLink = navLinks[activeLinkIndex]; - // Calculate position relative to the navList, considering its own offset - const navListRect = navList.getBoundingClientRect(); - const linkRect = activeNavLink.getBoundingClientRect(); - - // The marker should align with the center of the dot (a::before) - // The dot is centered within the <a> tag. - const markerTop = (linkRect.top - navListRect.top) + (linkRect.height / 2) - (pathMarker.offsetHeight / 2); - pathMarker.style.top = `${markerTop}px`; - - } else if (sections.length > 0 && navLinks.length > 0) { - // Default to first if no active link (e.g. page load before scroll) - const firstLink = navLinks[0]; - firstLink.classList.add('active'); - const firstLinkRect = firstLink.getBoundingClientRect(); - const navListRect = navList.getBoundingClientRect(); - const markerTop = (firstLinkRect.top - navListRect.top) + (firstLinkRect.height / 2) - (pathMarker.offsetHeight / 2); - pathMarker.style.top = `${markerTop}px`; - } - } - - // Smooth scroll for all anchor links, including guided path and hero CTA - document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { - const href = this.getAttribute('href'); - if (href.length > 1 && document.querySelector(href)) { - e.preventDefault(); - const targetElement = document.querySelector(href); - // Calculate scroll position to align target element slightly below the top of viewport - // This prevents it from being hidden under a fixed header if one existed. - // For this layout, scrolling to top of section is fine. - const offsetTop = targetElement.offsetTop; - - window.scrollTo({ - top: offsetTop - 20, // Small offset for better visibility - behavior: 'smooth' - }); - - // Manually update active state for guided path if clicked - if (this.closest('#guidedPathNav')) { - navLinks.forEach(link => link.classList.remove('active')); - this.classList.add('active'); - updateMarkerAndActiveLink(); // Recalculate marker immediately - } - } - }); - }); - - window.addEventListener('scroll', updateMarkerAndActiveLink); - window.addEventListener('resize', updateMarkerAndActiveLink); // Recalculate on resize - - // Initial call to set marker and active link - updateMarkerAndActiveLink(); - - console.log("Ānāpānasati Cheatsheet Enhanced Initialized."); - }); - </script> - -</body> -</html> \ No newline at end of file --- /dev/null +++ b/anapanasati-mindfulness-of-breathing.html @@ -0,0 +1,1188 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- SEO Metadata --> + <title>Practical Guide to Ānāpānasati: Mindfulness of Breathing | David Veksler Cheatsheets</title> + <meta name="description" content="A comprehensive, interactive guide to Ānāpānasati (mindfulness of breathing) meditation. Learn preparation, step-by-step practice, the 16 steps, troubleshooting, and integration into daily life. Ideal for beginners and those seeking to deepen their practice."> + <meta name="keywords" content="Anapanasati, Mindfulness of Breathing, Meditation Guide, Buddhist Meditation, How to Meditate, Breathwork, Samatha, Vipassana, Mindful Living, Stress Relief, Meditation Cheatsheet, David Veksler"> + <link rel="canonical" href="http://cheatsheets.davidveksler.com/anapanasati-mindfulness-of-breathing.html"> + <meta name="author" content="David Veksler (Conceptual Design by AI Cheatsheet Architect)"> + + <!-- Open Graph / Facebook --> + <meta property="og:type" content="website"> + <meta property="og:url" content="http://cheatsheets.davidveksler.com/anapanasati-mindfulness-of-breathing.html"> + <meta property="og:title" content="Practical Guide to Ānāpānasati: Mindfulness of Breathing"> + <meta property="og:description" content="An interactive guide to Ānāpānasati meditation, from basics to advanced steps."> + <!-- <meta property="og:image" content="http://cheatsheets.davidveksler.com/path-to-your-preview-image.jpg"> --> + + <!-- Twitter --> + <meta property="twitter:card" content="summary_large_image"> + <meta property="twitter:url" content="http://cheatsheets.davidveksler.com/anapanasati-mindfulness-of-breathing.html"> + <meta property="twitter:title" content="Practical Guide to Ānāpānasati: Mindfulness of Breathing"> + <meta property="twitter:description" content="An interactive guide to Ānāpānasati meditation, from basics to advanced steps."> + <!-- <meta property="twitter:image" content="http://cheatsheets.davidveksler.com/path-to-your-preview-image.jpg"> --> + + <style> + :root { + --primary-bg: #f0f4f8; /* Slightly cooler base for ethereal feel */ + --primary-bg-light-pulse: #f6f9fc; + --secondary-bg: #e6edf2; + --secondary-bg-rgb: 230, 237, 242; /* For RGBA versions */ + --text-color: #2c3e50; /* Richer, deeper blue/grey */ + --accent-color: #88a0bf; /* Softer, more ethereal blue */ + --accent-color-rgb: 136, 160, 191; /* For RGBA glows */ + --accent-color-darker: #7088a8; + --highlight-color: #b0c4de; /* Lighter, complementary */ + --highlight-strong-color: #6c8ead; + --border-color: #d8e2eb; + --font-sans-serif: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --body-font-size: 17px; + --line-height: 1.75; /* Increased for breathing room */ + --container-width: 800px; + --nav-width: 60px; + + /* Ethereal Flow Specific */ + --wisp-color-1: rgba(176, 196, 222, 0.1); /* Light steel blue, very transparent */ + --wisp-color-2: rgba(136, 160, 191, 0.08); /* Softer blue from accent, very transparent */ + } + + /* --- "Living Breath" Background (Layer 0) --- */ + body::before { + content: ""; + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + z-index: -2; /* Furthest back */ + background: linear-gradient(135deg, var(--primary-bg), var(--primary-bg-light-pulse)); + animation: livingBreathAnimation 15s infinite ease-in-out alternate; + } + @keyframes livingBreathAnimation { + 0% { background: linear-gradient(135deg, var(--primary-bg), var(--primary-bg-light-pulse)); } + 100% { background: linear-gradient(135deg, var(--primary-bg-light-pulse), var(--primary-bg)); } + } + + /* --- "Ethereal Wisps" Layer (Layer 1 - Simulated with animated gradients) --- */ + body::after { + content: ""; + position: fixed; + top: 0; left: 0; width: 100%; height: 100%; + z-index: -1; /* Above breath, behind content */ + background: + linear-gradient(45deg, var(--wisp-color-1) 25%, transparent 25%, transparent 75%, var(--wisp-color-1) 75%, var(--wisp-color-1)), + linear-gradient(-45deg, var(--wisp-color-2) 25%, transparent 25%, transparent 75%, var(--wisp-color-2) 75%, var(--wisp-color-2)); + background-size: 600px 600px; /* Large size for slow, subtle effect */ + animation: etherealWispDrift 120s linear infinite alternate; + opacity: 0.6; /* Overall opacity for the wisp layer */ + } + @keyframes etherealWispDrift { + 0% { background-position: 0% 0%; } + 100% { background-position: 100% 100%; } + } + + + body { + font-family: var(--font-sans-serif); + background-color: transparent; /* To see pseudo-elements */ + color: var(--text-color); + margin: 0; + padding: 0; + line-height: var(--line-height); + font-size: var(--body-font-size); + overflow-x: hidden; + padding-left: var(--nav-width); /* Space for fixed nav */ + } + + .container { max-width: var(--container-width); margin: 0 auto; padding: 20px; } + h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans-serif); color: var(--text-color); margin-top: 2em; margin-bottom: 1em; font-weight: 600; } + h1 { font-size: 2.6em; text-align: center; margin-bottom: 1.2em; font-weight: 700; color: var(--accent-color); text-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.2); } + h2 { font-size: 2em; border-bottom: 2px solid var(--highlight-color); padding-bottom: 0.4em; color: var(--accent-color-darker); } + h3 { font-size: 1.5em; color: var(--accent-color); } + h4 { font-size: 1.2em; font-weight: 600; margin-bottom: 0.7em;} + h5 { font-size: 1.05em; font-weight: 600; color: var(--accent-color-darker); margin-bottom: 0.5em;} + + p, li { margin-bottom: 1em; } + ul, ol { padding-left: 25px; } + li { margin-bottom: 0.6em; } + + a { color: var(--accent-color-darker); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; } + a:hover, a:focus { color: var(--highlight-strong-color); text-shadow: 0 0 8px rgba(var(--accent-color-rgb),0.3); } + + .text-center { text-align: center; } + .subtle-text { color: #5c6b73; font-size: 0.9em; } + .screen-reader-text { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } + + .page-header { + background-color: rgba(var(--primary-bg-rgb, 240, 244, 248), 0.7); /* Define --primary-bg-rgb or use direct values */ + backdrop-filter: blur(8px); + padding: 12px 0; + text-align: center; + border-bottom: 1px solid var(--border-color); + font-size: 0.9em; + position: sticky; /* Makes header stick to top on scroll */ + top:0; + z-index: 900; /* Above content cards, below nav if nav overlays */ + } + .page-header p { margin: 0; } + + .hero-section { + background-color: rgba(var(--secondary-bg-rgb), 0.6); + backdrop-filter: blur(5px); + padding: 70px 20px; text-align: center; + border-bottom: 3px solid var(--accent-color); + margin-bottom: 40px; position: relative; z-index: 5; + opacity: 0; transform: translateY(30px); + animation: heroEntrance 1s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) forwards; + } + @keyframes heroEntrance { to { opacity: 1; transform: translateY(0); } } + .hero-section h1 { margin-top:0; font-size: 2.8em; color: var(--text-color); } + .hero-section p { font-size: 1.2em; margin-bottom: 30px; color: #4a5560; } + + .cta-button { + display: inline-block; + background-color: var(--accent-color); + color: white; + padding: 16px 32px; font-size: 1.15em; + border-radius: 8px; text-decoration: none; + transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; + font-weight: 600; border: none; cursor: pointer; + box-shadow: 0 4px 15px rgba(var(--accent-color-rgb), 0.2); + } + .cta-button:hover, .cta-button:focus { + background-color: var(--accent-color-darker); + transform: translateY(-2px); + box-shadow: 0 0 20px 8px rgba(var(--accent-color-rgb), 0.3), + 0 6px 20px rgba(var(--accent-color-rgb), 0.25); + } + .secondary-link { display: block; margin-top: 20px; font-size: 0.9em; } + + + /* --- Fluid Section Entrance --- */ + .content-section { + margin-bottom: 50px; padding: 30px; + background-color: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(10px); + border-radius: 12px; + box-shadow: 0 8px 30px rgba(44, 62, 80, 0.08); + position: relative; z-index: 5; + opacity: 0; transform: translateY(40px); + transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), + transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); + } + .content-section.is-visible { opacity: 1; transform: translateY(0); } + .content-section.is-visible h2, + .content-section.is-visible h3 { /* Apply to h3 as well for consistency if they are section starters */ + opacity: 0; transform: translateY(20px); + animation: elementEntrance 0.7s 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + .content-section.is-visible .posture-assessor, + .content-section.is-visible .breath-pacer-container-wrapper, /* Target wrapper if it exists */ + .content-section.is-visible > p:first-of-type, /* Animate first paragraph */ + .content-section.is-visible > ul:first-of-type, /* Animate first list */ + .content-section.is-visible > ol:first-of-type { + opacity: 0; transform: translateY(20px); + animation: elementEntrance 0.7s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; + } + @keyframes elementEntrance { to { opacity: 1; transform: translateY(0); } } + + + /* --- Enhanced Breath Pacer with Aura --- */ + .breath-pacer-container-wrapper { /* New wrapper for entrance animation on the whole block */ + /* Initial animation states will be handled by .content-section.is-visible logic */ + } + .breath-pacer-container { + text-align: center; + margin: 30px 0; padding: 25px; + /* Background is now handled by the parent .content-section or its wrapper */ + background-color: rgba(var(--secondary-bg-rgb), 0.5); /* Optional: distinct subtle bg */ + border-radius: 8px; + } + .breath-pacer-visual-wrapper { width: 160px; height: 160px; margin: 20px auto; position: relative; } + .breath-pacer-visual { + width: 100%; height: 100%; + background-color: var(--highlight-color); + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + color: var(--text-color); font-size: 1.1em; font-weight: 600; + transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.8s ease; + transform: scale(0.6); /* Initial small state */ + } + .breath-pacer-visual.pacer-inhale { + box-shadow: 0 0 25px 10px rgba(var(--accent-color-rgb), 0.3); + } + .breath-pacer-controls { margin-top: 15px; } + .breath-pacer-controls button, .breath-pacer-controls select { + background-color: var(--accent-color); color: white; + border: none; padding: 10px 18px; margin: 5px; border-radius: 4px; + cursor: pointer; font-size: 0.95em; + box-shadow: 0 2px 8px rgba(var(--accent-color-rgb), 0.15); + transition: background-color 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease; + } + .breath-pacer-controls button:hover, .breath-pacer-controls select:hover, + .breath-pacer-controls button:focus, .breath-pacer-controls select:focus { + background-color: var(--accent-color-darker); + transform: translateY(-1px); + box-shadow: 0 0 15px 5px rgba(var(--accent-color-rgb), 0.25), + 0 4px 10px rgba(var(--accent-color-rgb), 0.2); + } + .breath-pacer-controls label { margin-right: 8px; font-size: 0.95em; } + + + /* --- Enhanced Posture Assessor --- */ + .posture-assessor { + display: flex; + flex-direction: column; align-items: center; + gap: 20px; margin-top: 20px; padding: 20px; + /* Background now from parent card, or subtle distinct one */ + background-color: rgba(var(--secondary-bg-rgb), 0.4); + border-radius: 8px; + } + .posture-silhouette-container { width: 200px; height: auto; position: relative; cursor: default; } + .posture-silhouette-container svg { width: 100%; height: auto; display: block; } + .posture-silhouette-container svg .meditation-figure-part { + fill: #c5d5d8; stroke: var(--text-color); stroke-width: 1.5px; + transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease; /* Added filter transition */ + cursor: pointer; + } + .posture-silhouette-container svg .meditation-figure-part:hover { fill: var(--highlight-color); } + .posture-silhouette-container svg .meditation-figure-part.highlighted-part { + fill: var(--highlight-strong-color) !important; + stroke: var(--accent-color-darker); + filter: drop-shadow(0px 0px 8px rgba(var(--accent-color-rgb), 0.5)); + } + .posture-tips-container { width: 100%; max-width: 500px; } + .posture-tip { + padding: 12px; background-color: rgba(255, 255, 255, 0.9); + border: 1px solid var(--border-color); border-radius: 6px; + margin-bottom: 12px; font-size: 0.95em; + } + .posture-tip h5 { margin-top: 0; margin-bottom: 8px; font-weight: 600; color: var(--accent-color-darker); } + .tip-summary { margin-bottom: 8px; } + .tip-details { display: none; margin-top: 10px; padding-left: 15px; border-left: 3px solid var(--highlight-color); font-size: 0.9em; } + .learn-more-toggle { color: var(--accent-color); cursor: pointer; font-weight: bold; font-size: 0.85em; text-decoration: underline; display: inline-block; margin-top: 5px;} + .learn-more-toggle:hover { color: var(--accent-color-darker); } + + + /* --- Pāli Term Tooltips --- */ + .pali-term { border-bottom: 1px dotted var(--accent-color); cursor: help; position: relative; } + .pali-term .tooltip-text { + visibility: hidden; width: 220px; /* Slightly wider */ + background-color: var(--text-color); color: #fff; + text-align: left; /* Better for multi-line */ border-radius: 6px; + padding: 10px; position: absolute; z-index: 100; + bottom: 130%; left: 50%; margin-left: -110px; + opacity: 0; transition: opacity 0.3s, visibility 0.3s; + font-size: 0.88em; line-height: 1.5; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); + } + .pali-term:hover .tooltip-text { visibility: visible; opacity: 1; } + + /* --- Details/Summary for Tetrads & Troubleshooting --- */ + details.tetrad-toggle, details.troubleshooting-tree { margin-bottom: 10px; } + details.tetrad-toggle summary, details.troubleshooting-tree summary { + cursor: pointer; font-weight: 600; + padding: 12px 15px; background-color: rgba(var(--secondary-bg-rgb), 0.6); + border-radius: 6px; list-style: none; + transition: background-color 0.2s ease; + position: relative; /* For custom marker */ + } + details.tetrad-toggle summary::-webkit-details-marker, + details.troubleshooting-tree summary::-webkit-details-marker { display: none; } + details.tetrad-toggle summary::before, + details.troubleshooting-tree summary::before { + content: '➕'; color: var(--accent-color); margin-right: 10px; + font-weight: normal; /* Ensure icon weight is distinct */ + display: inline-block; transition: transform 0.2s ease-out; + } + details.tetrad-toggle[open] summary::before, + details.troubleshooting-tree[open] summary::before { + content: '➖'; transform: rotate(180deg); + } + details.tetrad-toggle summary:hover, details.troubleshooting-tree summary:hover { + background-color: rgba(var(--secondary-bg-rgb), 0.8); + } + .tetrad-content, .troubleshooting-tree div { + padding: 15px 15px 5px 35px; /* More padding */ + border-left: 3px solid var(--highlight-color); + margin-left: 8px; /* Align with summary padding */ + background-color: rgba(255,255,255,0.3); /* Very subtle bg for content */ + } + + + /* --- "Mindful Moments" Callout --- */ + .mindful-moment { + margin: 40px 0; padding: 25px; + background-color: rgba(var(--secondary-bg-rgb), 0.7); + border-left: 5px solid var(--highlight-color); + border-radius: 0 8px 8px 0; + box-shadow: 0 4px 12px rgba(44, 62, 80, 0.07); + } + .mindful-moment h4 { margin-top: 0; color: var(--accent-color); font-size: 1.3em; } + .mindful-moment p { margin-bottom: 15px; font-size: 1.05em; } + .feeling-logger { display: flex; gap: 15px; align-items: center; margin-top:10px; } + .feeling-logger span { font-size: 0.95em; } + .feeling-logger button { + background: none; border: 2px solid var(--border-color); + border-radius: 50%; width: 44px; height: 44px; /* Slightly larger */ + cursor: pointer; font-size: 1.6em; color: var(--text-color); + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; + padding:0; display:flex; align-items:center; justify-content:center; + } + .feeling-logger button:hover { + transform: scale(1.1); border-color: var(--accent-color); + box-shadow: 0 0 10px 2px rgba(var(--accent-color-rgb), 0.2); + } + .feeling-logger button.selected { + border-color: var(--accent-color-darker); + background-color: var(--highlight-color); + box-shadow: 0 0 12px 4px rgba(var(--accent-color-rgb), 0.3), inset 0 0 5px rgba(0,0,0,0.1); + transform: scale(1.05); + } + + + /* --- Guided Path Navigation --- */ + #guidedPathNav { + position: fixed; top: 0; left: 0; height: 100%; width: var(--nav-width); + background-color: rgba(var(--primary-bg-rgb, 240, 244, 248), 0.7); /* Use defined RGB */ + backdrop-filter: blur(12px); + z-index: 1000; padding-top: 80px; box-sizing: border-box; + display: flex; flex-direction: column; align-items: center; + transition: width 0.3s ease; + } + #pathLine { + position: absolute; top: 10%; left: 50%; transform: translateX(-50%); + width: 3px; height: 80%; background-color: var(--border-color); z-index: 1; + } + #pathMarker { + position: absolute; left: 50%; transform: translateX(-50%); + width: 18px; height: 18px; background-color: var(--accent-color); + border: 2px solid rgba(255,255,255,0.8); border-radius: 50%; + box-shadow: 0 0 15px 5px rgba(var(--accent-color-rgb), 0.5), 0 0 0 3px rgba(255,255,255,0.7); + z-index: 2; + transition: top 0.4s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease; + } + #guidedPathNav ul { + list-style: none; padding: 0; margin: 0; width: 100%; + position: relative; z-index: 2; height: 80%; top: 10%; + display: flex; flex-direction: column; justify-content: space-around; + } + #guidedPathNav li a { + display: flex; align-items: center; justify-content: center; + width: calc(var(--nav-width) - 10px); height: 40px; margin: 5px auto; + color: var(--text-color); text-decoration: none; + border-radius: 50%; + transition: background-color 0.3s ease, color 0.3s ease; + position: relative; + } + #guidedPathNav li a::before { /* The dot visual */ + content: ""; width: 10px; height: 10px; + background-color: var(--border-color); + border-radius: 50%; display: block; + transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + } + #guidedPathNav li a.active::before { + background-color: var(--accent-color); + transform: scale(1.6); + box-shadow: 0 0 10px 2px rgba(var(--accent-color-rgb), 0.4); + } + #guidedPathNav li a:hover::before { background-color: var(--highlight-color); } + #guidedPathNav li a .nav-label { + visibility: hidden; opacity: 0; position: absolute; + left: calc(var(--nav-width) + 5px); top: 50%; transform: translateY(-50%); + background-color: var(--text-color); color: white; + padding: 5px 10px; border-radius: 4px; font-size: 0.8em; + white-space: nowrap; + transition: visibility 0.2s, opacity 0.2s ease-in-out; + box-shadow: 0 1px 5px rgba(0,0,0,0.15); + } + #guidedPathNav:hover li a .nav-label, + #guidedPathNav li a:focus .nav-label { visibility: visible; opacity: 1; } + + + .page-footer { + text-align: center; padding: 30px 20px; margin-top: 40px; + background-color: rgba(var(--text-color-rgb, 44, 62, 80),0.9); /* Define --text-color-rgb */ + backdrop-filter:blur(5px); + color: var(--primary-bg); + font-size: 0.9em; position: relative; z-index: 5; + } + .page-footer a { color: var(--highlight-color); } + /* Define missing RGBs in :root if not done before for fallback */ + :root { + --primary-bg-rgb: 240, 244, 248; + --text-color-rgb: 44, 62, 80; + } + + + /* Responsive Adjustments */ + @media (min-width: 769px) { + .posture-assessor { + flex-direction: row; align-items: flex-start; + } + .posture-silhouette-container { flex: 0 0 200px; } + .posture-tips-container { flex: 1; } + } + @media (max-width: 900px) { + body { padding-left: 0; } + #guidedPathNav { display: none; /* Or transform to hamburger menu */ } + .container { max-width: 100%; padding: 15px;} + } + @media (max-width: 768px) { + body { font-size: 16px; } + h1 { font-size: 2.2em; } + .hero-section { padding: 50px 15px; } + .cta-button { padding: 14px 28px; font-size: 1.1em; } + .content-section { padding: 20px; margin-bottom: 40px; } + h2 { font-size: 1.8em; } + h3 { font-size: 1.4em; } + .posture-assessor { padding: 15px; } /* Already column */ + .breath-pacer-visual-wrapper { width: 140px; height: 140px; } + } + @media (max-width: 480px) { + h1 { font-size: 2em; } + .hero-section p { font-size: 1.1em; } + .pali-term .tooltip-text { width: 180px; margin-left: -90px; font-size: 0.85em; } + } + + </style> +</head> +<body> + + <nav id="guidedPathNav" aria-label="Page sections"> + <div id="pathLine"></div> + <div id="pathMarker"></div> + <ul> + <li><a href="#introduction" data-section-id="introduction" aria-label="Introduction"><span class="nav-label">Introduction</span></a></li> + <li><a href="#foundations" data-section-id="foundations" aria-label="Foundations"><span class="nav-label">Foundations</span></a></li> + <li><a href="#preparation" data-section-id="preparation" aria-label="Preparation"><span class="nav-label">Preparation</span></a></li> + <li><a href="#step-by-step-practice" data-section-id="step-by-step-practice" aria-label="Step-by-Step Practice"><span class="nav-label">Practice Guide</span></a></li> + <li><a href="#troubleshooting" data-section-id="troubleshooting" aria-label="Troubleshooting"><span class="nav-label">Troubleshooting</span></a></li> + <li><a href="#signs-of-progress" data-section-id="signs-of-progress" aria-label="Signs of Progress"><span class="nav-label">Progress</span></a></li> + <li><a href="#integration-practices" data-section-id="integration-practices" aria-label="Integration"><span class="nav-label">Integration</span></a></li> + <li><a href="#conclusion" data-section-id="conclusion" aria-label="Conclusion"><span class="nav-label">Conclusion</span></a></li> + </ul> + </nav> + + <header class="page-header"> + <p>A companion guide to the <a href="https://cheatsheets.davidveksler.com/buddhism.html" target="_blank" rel="noopener">Core Buddhist Principles Cheatsheet</a>.</p> + </header> + + <div class="hero-section"> + <h1>Your First Mindful Breath Starts Now</h1> + <p>A practical guide to <span class="pali-term">Ānāpānasati<span class="tooltip-text">Ānāpānasati (Pāli) means mindfulness (sati) of breathing (ānāpāna). It is a core meditation practice taught by the Buddha for cultivating calm and insight.</span></span> for clarity, calm, and insight.</p> + <a href="#step-by-step-practice" class="cta-button">Start Guided Practice</a> + <a href="#foundations" class="secondary-link">Explore the Foundations First</a> + </div> + + <div class="container"> + + <section id="introduction" class="content-section"> + <h2>Introduction</h2> + <p>Welcome to the path of <span class="pali-term">Ānāpānasati<span class="tooltip-text">Mindfulness of breathing.</span></span>, or mindfulness of breathing. This practice is a cornerstone of Buddhist meditation, with deep roots and profound benefits for cultivating presence and wisdom.</p> + <ul> + <li>Origins in the Buddha's <span class="pali-term">Ānāpānasati Sutta<span class="tooltip-text">The Ānāpānasati Sutta (MN 118) is the Buddha's primary discourse on mindfulness of breathing, detailing its sixteen steps and profound benefits.</span></span> (Majjhima Nikāya 118).</li> + <li>Central role in various Buddhist meditation traditions, including Theravāda, Zen, and Tibetan Buddhism.</li> + <li>Supported by growing scientific evidence for its positive impact on mental and physical well-being, including stress reduction and improved focus.</li> + </ul> + </section> + + <section id="foundations" class="content-section"> + <h2>Foundations</h2> + <p>Understanding the theoretical framework of Ānāpānasati enriches the practice and provides context for its transformative potential.</p> + <ul> + <li>The four tetrads: A progressive sequence guiding the observation of (1) body (<span class="pali-term">kāya<span class="tooltip-text">Kāya (Pāli) refers to the physical body.</span></span>), (2) feelings (<span class="pali-term">vedanā<span class="tooltip-text">Vedanā (Pāli) means feeling or sensation, which can be pleasant, unpleasant, or neutral.</span></span>), (3) mind (<span class="pali-term">citta<span class="tooltip-text">Citta (Pāli) refers to mind, consciousness, or a state of mind.</span></span>), and (4) mental objects (<span class="pali-term">dhammas<span class="tooltip-text">Dhammas (Pāli) in this context refer to mental objects, phenomena, principles, or the ultimate nature of reality.</span></span>).</li> + <li>Relationship to the Four Foundations of Mindfulness (<span class="pali-term">Satipaṭṭhāna<span class="tooltip-text">Satipaṭṭhāna (Pāli) means the Four Foundations of Mindfulness: contemplation of body, feelings, mind, and mental objects (dhammas).</span></span>): Ānāpānasati is often presented as a way to cultivate all four foundations.</li> + <li>How Ānāpānasati develops both <span class="pali-term">samatha<span class="tooltip-text">Samatha (Pāli) means calm, tranquility, or serenity. It is developed through practices like concentration meditation.</span></span> (calm, concentration) and <span class="pali-term">vipassanā<span class="tooltip-text">Vipassanā (Pāli) means insight or clear seeing into the true nature of reality (impermanence, suffering, not-self).</span></span> (insight, clear seeing). Initially, it builds calm, which then supports the arising of insight.</li> + </ul> + </section> + + <section id="preparation" class="content-section"> + <h2>Preparation: Setting the Stage for Calm</h2> + <p>Creating a conducive environment and adopting a supportive posture are key to beginning your Ānāpānasati practice effectively.</p> + + <div class="posture-assessor"> + <div class="posture-silhouette-container" aria-hidden="true"> + <svg viewBox="0 0 150 220" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="postureSvgTitle"> + <title id="postureSvgTitle">Interactive diagram of a meditating figure's posture.</title> + <desc>Click or hover over parts of the figure to see posture tips.</desc> + <ellipse id="svg-head" class="meditation-figure-part" data-tip-target="head-tip" cx="75" cy="30" rx="20" ry="22" aria-label="Head posture"/> + <path id="svg-spine" class="meditation-figure-part" data-tip-target="spine-tip" d="M65 52 Q75 100 65 148 L85 148 Q75 100 85 52 Z" aria-label="Spine and back posture"/> + <rect id="svg-shoulders" class="meditation-figure-part" data-tip-target="shoulders-tip" x="45" y="52" width="60" height="15" rx="5" aria-label="Shoulders posture"/> + <ellipse id="svg-hands" class="meditation-figure-part" data-tip-target="hands-tip" cx="75" cy="155" rx="40" ry="15" aria-label="Hands position"/> + <path id="svg-legs" class="meditation-figure-part" data-tip-target="legs-tip" d="M20 170 Q75 210 130 170 Q120 180 85 190 L65 190 Q30 180 20 170 Z" aria-label="Legs position"/> + </svg> + </div> + <div class="posture-tips-container"> + <p><strong>Optimal Sitting Postures:</strong> Click or hover on parts of the figure for guidance. Aim for a posture that is stable, balanced, and can be maintained with relaxed alertness.</p> + <div id="head-tip" class="posture-tip" style="display:none;"> + <h5>Head & Neck</h5> + <p class="tip-summary">Slightly tilted down, chin gently tucked, crown lifted.</p> + <span class="learn-more-toggle" role="button" tabindex="0" aria-expanded="false">Learn More</span> + <div class="tip-details"><p>Imagine your gaze resting softly a few feet in front of you. The crown of your head should feel as if it's gently lifted, elongating the neck. Avoid craning forward or letting the head droop.</p></div> + </div> + <div id="shoulders-tip" class="posture-tip" style="display:none;"> + <h5>Shoulders & Chest</h5> + <p class="tip-summary">Relaxed, level, slightly back, chest open.</p> + <span class="learn-more-toggle" role="button" tabindex="0" aria-expanded="false">Learn More</span> + <div class="tip-details"><p>Allow shoulders to drop away from ears. A gentle roll up, back, and down can help find a natural position. The chest should feel open, allowing for easy breathing, but not puffed out.</p></div> + </div> + <div id="spine-tip" class="posture-tip" style="display:none;"> + <h5>Spine & Back</h5> + <p class="tip-summary">Upright but not stiff, maintaining natural curvature.</p> + <span class="learn-more-toggle" role="button" tabindex="0" aria-expanded="false">Learn More</span> + <div class="tip-details"><p>Imagine your spine as a stack of coins, balanced. Maintain gentle natural curves. Avoid slouching or over-arching. Slight core engagement can support this without rigidity.</p></div> + </div> + <div id="hands-tip" class="posture-tip" style="display:none;"> + <h5>Hands</h5> + <p class="tip-summary">Rest gently in the lap (<span class="pali-term">dhyāna mudrā<span class="tooltip-text">Dhyāna mudrā (Sanskrit): The meditation gesture where hands rest in the lap, often right hand on left, palms up, thumbs lightly touching.</span></span>) or on knees.</p> + <span class="learn-more-toggle" role="button" tabindex="0" aria-expanded="false">Learn More</span> + <div class="tip-details"><p>Commonly, hands are in the lap, right on left, palms up, thumbs lightly touching. Alternatively, rest palms down on thighs/knees. Arms should be relaxed, elbows slightly bent.</p></div> + </div> + <div id="legs-tip" class="posture-tip" style="display:none;"> + <h5>Legs & Seat</h5> + <p class="tip-summary">Stable, comfortable base supporting an upright spine.</p> + <span class="learn-more-toggle" role="button" tabindex="0" aria-expanded="false">Learn More</span> + <div class="tip-details"><p>Options: Burmese (legs crossed, feet on floor), half/full lotus (if flexible), seiza (kneeling), or chair (feet flat). Use cushions (zafu, zabuton) to elevate hips if needed. Ensure even weight distribution.</p></div> + </div> + </div> + </div> + + <h4>Creating a Distraction-Free Environment</h4> + <ul> + <li>Choose a quiet space where you're unlikely to be disturbed for the duration of your session.</li> + <li>Minimize visual clutter. A simple, dedicated space can be psychologically supportive.</li> + <li>Inform household members if necessary to avoid interruptions. Silence phones and notifications.</li> + </ul> + + <h4>Eyes: Half-Closed vs. Closed Approaches</h4> + <ul> + <li><strong>Closed:</strong> Can reduce visual distraction and encourage inward focus. However, it may lead to drowsiness for some practitioners.</li> + <li><strong>Half-Closed (Soft Gaze):</strong> Gaze softly downwards, unfocused, a few feet in front of you. This can help maintain alertness and is common in Zen traditions.</li> + <li>Experiment to find what works best for you. The key is to minimize visual input without causing strain or sleepiness.</li> + </ul> + </section> + + <div class="breath-pacer-container-wrapper content-section"> <!-- Wrapper for entrance animation --> + <div class="breath-pacer-container"> + <h3>Interactive Breath Pacer</h3> + <div class="breath-pacer-visual-wrapper"> + <div class="breath-pacer-visual" id="breathPacerVisual">Ready</div> + </div> + <div class="breath-pacer-controls"> + <label for="pacerPreset">Choose a rhythm:</label> + <select id="pacerPreset" aria-label="Breath Pacer Rhythm Preset"> + <option value="4-0-6">Calm (In 4s, Out 6s)</option> + <option value="4-2-4">Balanced (In 4s, Hold 2s, Out 4s)</option> + <option value="5-0-5">Focus (In 5s, Out 5s)</option> + </select> + <button id="playPausePacer" aria-label="Play or Pause Breath Pacer">Play</button> + <button id="toggleAudioPacer" aria-label="Toggle Breath Pacer Audio Cue">Audio: Off</button> + </div> + <p class="subtle-text">This tool can help guide your breath. Adjust to your comfort, or simply observe your natural breath.</p> + </div> + </div> + + <section id="step-by-step-practice" class="content-section"> + <h2>Step-by-Step Practice Guide</h2> + <p>This guide breaks down the practice into manageable stages. Adjust timings to suit your experience and available time. Consistency is key.</p> + + <article> + <h3>1. Initial Setup (Approx. 5 minutes)</h3> + <ul> + <li><strong>Body Scan for Tension Release:</strong> Gently scan your awareness through your body from head to toe. Notice any areas of tension (jaw, shoulders, stomach) and consciously invite them to soften and release.</li> + <li><strong>Posture Adjustments and Stabilization:</strong> Settle into your chosen posture. Ensure it feels stable, balanced, and sustainable for the duration. Make any final micro-adjustments. Feel the contact points with your seat or cushion.</li> + <li><strong>Setting Intention and Scope of Practice:</strong> Briefly and gently set your intention for the session (e.g., "to be present with my breath," "to cultivate calm and awareness"). You might also define the scope – perhaps focusing simply on the sensation of breath.</li> + </ul> + </article> + + <div class="mindful-moment"> + <h4>Pause & Reflect: Your Starting Point</h4> + <p>After your initial setup, take three mindful breaths. What do you notice in your body, your feelings, and your mind right now, before beginning the core practice?</p> + <div class="feeling-logger" aria-label="Log your current feeling (optional visual aid)"> + <span>How are you arriving?</span> + <button data-feeling="calm" aria-label="Feeling Calm">😌</button> + <button data-feeling="neutral" aria-label="Feeling Neutral">😐</button> + <button data-feeling="anticipating" aria-label="Feeling Anticipating">🤔</button> + <button data-feeling="restless" aria-label="Feeling Restless">🏃</button> + </div> + </div> + + <article> + <h3>2. Establishing Awareness (Approx. 5-10 minutes)</h3> + <ul> + <li><strong>Finding the Breath Sensation:</strong> Bring your attention to the physical sensation of the breath. Notice it at the tip of the nostrils (the feeling of air passing in and out) or at the abdomen (the gentle rise and fall with each breath). Choose one primary anchor point.</li> + <li><strong>Natural vs. Slightly Controlled Breathing:</strong> Initially, let the breath be completely natural. Don't try to control it or force it. Simply observe its existing rhythm. If the mind is very restless, a few slightly deeper, conscious breaths can sometimes help settle it before returning to natural observation.</li> + <li><strong>Anchoring Attention Without Force:</strong> Gently rest your awareness on the sensations at your chosen anchor point. Imagine your attention is like a butterfly lightly resting on a flower – present but not gripping.</li> + </ul> + </article> + + <article> + <h3>3. Core Practice (Approx. 15-45 minutes, or longer)</h3> + <ul> + <li><strong>Tracking Complete Breath Cycles:</strong> Follow the entire duration of each in-breath and each out-breath. Notice the subtle sensations from the beginning of the inhale to its end, and from the beginning of the exhale to its end. You might also notice the brief pause in between, if there is one.</li> + <li><strong>Noting Technique (Optional):</strong> To help steady the mind, you can mentally note "in" as the breath enters and "out" as it leaves. Or, "rising," "falling" if focused on the abdomen. Alternatively, count breaths (e.g., 1 on in-breath, 2 on out-breath, up to 10, then restart at 1). Find what helps maintain focus without becoming mechanical.</li> + <li><strong>Dealing with Wandering Attention Skillfully:</strong> Your mind *will* wander – this is a natural function of the mind, not a failure. When you notice your attention has drifted to thoughts, sounds, or sensations, gently acknowledge this without judgment. Then, softly and patiently, redirect your focus back to the breath. This act of noticing and returning is a crucial part of the training.</li> + <li><strong>Progressive Refinement of Attention:</strong> As your attention stabilizes, you may begin to notice more subtle aspects of the breath – its temperature, texture, the slight changes in sensation throughout each cycle. Maintain a gentle, curious observation.</li> + </ul> + </article> + + <article id="sixteen-steps"> + <h3>4. The 16 Steps of Ānāpānasati (Progressive Deepening)</h3> + <p class="subtle-text">These steps, grouped into four tetrads, offer a comprehensive map for developing mindfulness through breath, as outlined in the Ānāpānasati Sutta. Beginners typically focus on the early steps of the first tetrad, gradually exploring further as practice matures.</p> + + <details class="tetrad-toggle"> + <summary>First Tetrad: Contemplation of the Body (<span class="pali-term">Kāya<span class="tooltip-text">Kāya (Pāli): Body.</span></span>) (Steps 1-4)</summary> + <div class="tetrad-content"> + <p>Focusing on the direct experience of breathing and its effect on the body.</p> + <ol> + <li>"Breathing in long, he discerns, 'I am breathing in long'; or breathing out long, he discerns, 'I am breathing out long.'"</li> + <li>"Breathing in short, he discerns, 'I am breathing in short'; or breathing out short, he discerns, 'I am breathing out short.'"</li> + <li>"He trains himself, 'I will breathe in sensitive to the entire body.' He trains himself, 'I will breathe out sensitive to the entire body.'" (<span class="pali-term">Sabbakāya-paṭisaṁvedī<span class="tooltip-text">Sabbakāya-paṭisaṁvedī (Pāli): Experiencing the whole body.</span></span>)</li> + <li>"He trains himself, 'I will breathe in calming bodily fabrication.' He trains himself, 'I will breathe out calming bodily fabrication.'" (<span class="pali-term">Passambhayaṁ kāyasaṅkhāraṁ<span class="tooltip-text">Passambhayaṁ kāyasaṅkhāraṁ (Pāli): Calming the bodily formation (the breath itself).</span></span>)</li> + </ol> + </div> + </details> + + <details class="tetrad-toggle"> + <summary>Second Tetrad: Contemplation of Feelings (<span class="pali-term">Vedanā<span class="tooltip-text">Vedanā (Pāli): Feelings or sensations (pleasant, unpleasant, neutral).</span></span>) (Steps 5-8)</summary> + <div class="tetrad-content"> + <p>Observing feelings that arise in relation to the breath and mind, cultivating awareness of affective tones.</p> + <ol start="5"> + <li>"He trains himself, 'I will breathe in sensitive to rapture.' He trains himself, 'I will breathe out sensitive to rapture.'" (<span class="pali-term">Pīti<span class="tooltip-text">Pīti (Pāli): Rapture, joy, or joyful interest; a factor of concentration.</span></span>)</li> + <li>"He trains himself, 'I will breathe in sensitive to pleasure.' He trains himself, 'I will breathe out sensitive to pleasure.'" (<span class="pali-term">Sukha<span class="tooltip-text">Sukha (Pāli): Happiness, pleasure, bliss, ease; a factor of concentration.</span></span>)</li> + <li>"He trains himself, 'I will breathe in sensitive to mental fabrication.' He trains himself, 'I will breathe out sensitive to mental fabrication.'" (Experiencing feelings and perceptions - <span class="pali-term">cittasaṅkhāra<span class="tooltip-text">Cittasaṅkhāra (Pāli): Mental fabrication/formation, here referring to feeling (vedanā) and perception (saññā).</span></span>)</li> + <li>"He trains himself, 'I will breathe in calming mental fabrication.' He trains himself, 'I will breathe out calming mental fabrication.'"</li> + </ol> + </div> + </details> + + <details class="tetrad-toggle"> + <summary>Third Tetrad: Contemplation of the Mind (<span class="pali-term">Citta<span class="tooltip-text">Citta (Pāli): Mind, consciousness, state of mind.</span></span>) (Steps 9-12)</summary> + <div class="tetrad-content"> + <p>Recognizing and understanding the states of mind as they arise and pass.</p> + <ol start="9"> + <li>"He trains himself, 'I will breathe in sensitive to the mind.' He trains himself, 'I will breathe out sensitive to the mind.'" (Aware of the current mental state)</li> + <li>"He trains himself, 'I will breathe in gladdening the mind.' He trains himself, 'I will breathe out gladdening the mind.'" (<span class="pali-term">Abhippamodayaṁ cittaṁ<span class="tooltip-text">Abhippamodayaṁ cittaṁ (Pāli): Gladdening the mind.</span></span>)</li> + <li>"He trains himself, 'I will breathe in steadying the mind.' He trains himself, 'I will breathe out steadying the mind.'" (Concentrating the mind - <span class="pali-term">Samādahaṁ cittaṁ<span class="tooltip-text">Samādahaṁ cittaṁ (Pāli): Steadying or concentrating the mind.</span></span>)</li> + <li>"He trains himself, 'I will breathe in releasing the mind.' He trains himself, 'I will breathe out releasing the mind.'" (Liberating the mind from hindrances - <span class="pali-term">Vimocayaṁ cittaṁ<span class="tooltip-text">Vimocayaṁ cittaṁ (Pāli): Releasing or liberating the mind.</span></span>)</li> + </ol> + </div> + </details> + + <details class="tetrad-toggle"> + <summary>Fourth Tetrad: Contemplation of Mental Objects (<span class="pali-term">Dhammas<span class="tooltip-text">Dhammas (Pāli): Mental objects, phenomena, principles, the objects of mind-consciousness.</span></span>) (Steps 13-16)</summary> + <div class="tetrad-content"> + <p>Contemplating the nature of phenomena, focusing on impermanence and letting go.</p> + <ol start="13"> + <li>"He trains himself, 'I will breathe in focusing on impermanence.' He trains himself, 'I will breathe out focusing on impermanence.'" (<span class="pali-term">Aniccānupassī<span class="tooltip-text">Aniccānupassī (Pāli): Contemplating impermanence.</span></span>)</li> + <li>"He trains himself, 'I will breathe in focusing on fading away (dispassion).' He trains himself, 'I will breathe out focusing on fading away.'" (<span class="pali-term">Virāgānupassī<span class="tooltip-text">Virāgānupassī (Pāli): Contemplating fading away or dispassion.</span></span>)</li> + <li>"He trains himself, 'I will breathe in focusing on cessation.' He trains himself, 'I will breathe out focusing on cessation.'" (<span class="pali-term">Nirodhānupassī<span class="tooltip-text">Nirodhānupassī (Pāli): Contemplating cessation (of suffering, of phenomena).</span></span>)</li> + <li>"He trains himself, 'I will breathe in focusing on relinquishment.' He trains himself, 'I will breathe out focusing on relinquishment.'" (<span class="pali-term">Paṭinissaggānupassī<span class="tooltip-text">Paṭinissaggānupassī (Pāli): Contemplating relinquishment or letting go.</span></span>)</li> + </ol> + </div> + </details> + </article> + </section> + + <section id="troubleshooting" class="content-section"> + <h2>Troubleshooting Common Challenges</h2> + <p>Encountering challenges is a normal and valuable part of the meditation process. Here’s how to navigate some common ones skillfully.</p> + + <details class="troubleshooting-tree"> + <summary>Drowsiness or Dullness (<span class="pali-term">Thīna-middha<span class="tooltip-text">Thīna-middha (Pāli): Sloth and torpor, one of the Five Hindrances.</span></span>)</summary> + <div> + <p><strong>Antidotes & Prevention:</strong></p> + <ul> + <li>Ensure adequate sleep and try not to meditate when overly fatigued.</li> + <li>Sit more upright; check that your posture isn't slumped.</li> + <li>If eyes are closed, try opening them slightly with a soft, downward gaze.</li> + <li>If the room is dim, consider brightening it.</li> + <li>If very drowsy, you can mindfully stand up for a few minutes of walking meditation, then resettle.</li> + <li>Bring more alert interest and curiosity to the subtle sensations of the breath.</li> + <li>Consider a slightly more engaged noting or counting technique for a short period.</li> + </ul> + </div> + </details> + + <details class="troubleshooting-tree"> + <summary>Restlessness or Agitation (<span class="pali-term">Uddhacca-kukkucca<span class="tooltip-text">Uddhacca-kukkucca (Pāli): Restlessness and worry/remorse, one of the Five Hindrances.</span></span>)</summary> + <div> + <p><strong>Targeted Approaches:</strong></p> + <ul> + <li>Acknowledge the restless energy or agitated thoughts without judgment or frustration. See them as passing mental weather.</li> + <li>Return gently but firmly to the anchor of the breath, again and again. Patience is key.</li> + <li>Counting breaths can be particularly helpful for a restless mind.</li> + <li>Sometimes, briefly making the restlessness itself the object of observation (noticing its physical sensations, its mental quality) before returning to the breath can help.</li> + <li>Ensure your posture isn't causing physical discomfort that translates to mental restlessness.</li> + </ul> + </div> + </details> + + <details class="troubleshooting-tree"> + <summary>Breath Becomes Too Subtle or Seems to Disappear</summary> + <div> + <p><strong>Working Methods:</strong></p> + <ul> + <li>This can often be a sign of deepening calm and concentration, not a problem. Don't panic or strain to find it.</li> + <li>Broaden your awareness slightly – feel the sensation of contact with your seat or cushion, or notice ambient sounds very lightly, then gently return your focus to the area where you last felt the breath (e.g., nostrils or abdomen).</li> + <li>You can maintain awareness in the general area (nostrils/abdomen) even if the direct sensation is very faint. Trust that the breath is there.</li> + <li>The mind just needs to attune to this new level of subtlety. Avoid "efforting" to make the breath stronger.</li> + </ul> + </div> + </details> + + <details class="troubleshooting-tree"> + <summary>Pain Management During Sitting</summary> + <div> + <p><strong>Strategies:</strong></p> + <ul> + <li>Make mindful micro-adjustments to your posture early on if you feel discomfort building, rather than waiting for it to become intense.</li> + <li>When pain arises, try to observe it as a raw sensation, without adding mental stories, resistance, or aversion. Notice its intensity, location, quality (throbbing, aching, etc.), and whether it changes or shifts. + <li>If pain becomes overwhelming and significantly distracts from the breath, mindfully and slowly adjust your posture more substantially, or, if necessary, mindfully stand up for a short period before resettling. The key is to do this with awareness, not reactively.</li> + <li>Ensure your chosen posture is ergonomically sound for your body type. Experiment with different cushions, heights, and supports.</li> + </ul> + </div> + </details> + + <details class="troubleshooting-tree"> + <summary>Dealing with Strong Emotions During Practice</summary> + <div> + <p><strong>Approaches:</strong></p> + <ul> + <li>Acknowledge the emotion without getting swept away by its storyline or judging yourself for feeling it. Name it softly to yourself (e.g., "sadness is present," "anxiety is here").</li> + <li>Allow the emotion to be present in your awareness, like a cloud passing in the sky. Don't try to suppress it or cling to it.</li> + <li>Gently return your primary focus to the breath, using it as an anchor. The emotion can remain in the background of your awareness.</li> + <li>If an emotion is too overwhelming to work with directly, it's okay to open your eyes, take a break, engage in a grounding activity, or seek support from a teacher or therapist.</li> + </ul> + </div> + </details> + </section> + + <section id="signs-of-progress" class="content-section"> + <h2>Signs of Progress</h2> + <p>Progress in meditation is often subtle, non-linear, and unique to each individual. It's less about achieving specific states and more about cultivating wholesome qualities of mind.</p> + <ul> + <li><strong>Developmental Milestones by Experience Level:</strong> + <ul> + <li>Increased ability to stay present with the breath for longer, more consistent periods.</li> + <li>Quicker, more gentle recognition of mind-wandering and a smoother return to the breath.</li> + <li>A growing sense of inner calm, stability, and equanimity, both on and off the cushion.</li> + <li>Reduced reactivity to thoughts and emotions.</li> + <li>Increased self-awareness and understanding of one's own mental patterns.</li> + </ul> + </li> + <li><strong>Access Concentration (<span class="pali-term">Upacāra-samādhi<span class="tooltip-text">Upacāra-samādhi (Pāli): Access or neighborhood concentration, a level of mental collectedness preliminary to full absorption (jhāna).</span></span>) Markers:</strong> + <ul> + <li>Sustained, relatively effortless attention on the meditation object (the breath).</li> + <li>Significant reduction or temporary cessation of the Five Hindrances.</li> + <li>A sense of ease, lightness, and pleasantness in the body and mind.</li> + </ul> + </li> + <li><strong>Appearance of <span class="pali-term">Nimitta<span class="tooltip-text">Nimitta (Pāli): A mental sign, image, or light that can arise in deep meditation as concentration strengthens. It's a mark of progress towards jhāna.</span></span> (Meditation Sign):</strong> This is a more advanced sign, often appearing as a light, form, or distinct sensation when concentration deepens significantly. It should be approached with balanced observation, without grasping or aversion.</li> + <li>Shifts in perception of time (e.g., time seeming to pass quickly or slowly) and body (e.g., feeling lighter, boundaries dissolving).</li> + </ul> + <div class="mindful-moment"> + <h4>Acknowledge Your Journey</h4> + <p>Recognizing progress, however small, can be encouraging. Take a moment to appreciate your effort, consistency, and any shifts in awareness you've noticed. Every moment of practice is valuable.</p> + <div class="feeling-logger" aria-label="Log your current feeling (optional visual aid)"> + <span>Reflecting on practice:</span> + <button data-feeling="grateful" aria-label="Feeling Grateful">🙏</button> + <button data-feeling="encouraged" aria-label="Feeling Encouraged">😊</button> + <button data-feeling="patient" aria-label="Feeling Patient">🧘</button> + <button data-feeling="curious" aria-label="Feeling Curious">🧐</button> + </div> + </div> + </section> + + <section id="progressive-schedule" class="content-section"> + <h2>Progressive Training Schedule (Suggested)</h2> + <p>This is a general guideline. Consistency is more important than duration, especially when starting. Listen to your own experience and adjust as needed.</p> + <h4>Beginner (Weeks 1-4): Establishing a Foundation</h4> + <ul> + <li><strong>Daily Practice:</strong> Start with 5-10 minutes once or twice a day. Gradually increase to 15-20 minutes per session as comfort allows.</li> + <li><strong>Weekly Focus Areas:</strong> + <ul> + <li>Week 1: Finding the breath sensation, allowing natural breathing, establishing a comfortable posture.</li> + <li>Week 2: Gently anchoring attention, skillfully noticing and returning from mind-wandering.</li> + <li>Week 3: Tracking complete breath cycles (beginning, middle, end of in-breath and out-breath).</li> + <li>Week 4: Experimenting with a light noting technique ("in, out") or counting breaths if helpful for stability.</li> + </ul> + </li> + </ul> + <h4>Intermediate (Months 2-6): Deepening the Practice</h4> + <ul> + <li><strong>Daily Practice:</strong> Aim for 20-30 minutes, or longer if comfortable and sustainable. One or two sessions daily.</li> + <li>Focus on refining attention, observing more subtle sensations of the breath (Steps 1-2 of 16 Steps).</li> + <li>Begin to cultivate awareness of the whole body with the breath (Step 3), and calming the breath (Step 4).</li> + <li>Develop greater consistency in dealing with hindrances.</li> + </ul> + <h4>Advanced (6+ Months): Mastery Development</h4> + <ul> + <li><strong>Daily Practice:</strong> 30-45+ minutes, potentially multiple sessions. Longer retreat practice can be explored.</li> + <li>Systematically working with the 16 Steps of Ānāpānasati, progressing through the tetrads.</li> + <li>Cultivating factors of deep concentration (<span class="pali-term">jhānic<span class="tooltip-text">Jhānic (Pāli): Pertaining to jhāna, meditative absorption or deep states of concentration.</span></span> factors like pīti and sukha).</li> + <li>Potentially transitioning to more explicit insight (<span class="pali-term">vipassanā<span class="tooltip-text">Vipassanā (Pāli): Insight or clear seeing into the true nature of reality.</span></span>) practices, using the stability gained from Ānāpānasati as a foundation.</li> + </ul> + </section> + + <section id="integration-practices" class="content-section"> + <h2>Integration Practices: Bringing Mindfulness into Daily Life</h2> + <p>The benefits of Ānāpānasati are amplified when its principles are woven into the fabric of everyday life.</p> + <ul> + <li><strong>Mini-Breathwork Throughout the Day:</strong> Take 3-5 conscious, mindful breaths at various points during your day – e.g., before starting a new task, during a commute, when waiting in line. Notice the sensation of breath and the feeling of being present.</li> + <li><strong>Breath as an Emergency Anchor:</strong> In stressful or emotionally charged situations, immediately bring your attention to your breath for a few cycles. This can help ground you, create a pause before reacting, and access a sense of calm.</li> + <li><strong>The "Breathing Space" Meditation (3-Minute Practice):</strong> + <ol> + <li><em>Awareness (Acknowledge):</em> For about a minute, notice and acknowledge your current experience – thoughts, feelings, bodily sensations – without judgment.</li> + <li><em>Gathering (Focus):</em> For about a minute, gently redirect your full attention to the physical sensations of the breath, noticing its rhythm in the body.</li> + <li><em>Expanding (Broaden):</em> For about a minute, expand your awareness from the breath to include the whole body, noticing posture and any sensations. Then, widen further to the space around you, as if breathing with this larger awareness.</li> + </ol> + </li> + <li><strong>Conscious Breathing During Daily Activities:</strong> Practice bringing awareness to your breath while engaged in routine activities like walking, washing dishes, listening to someone speak, or working at your computer. This bridges formal practice with daily life.</li> + </ul> + </section> + + <section id="technical-aspects" class="content-section"> + <h2>Technical Aspects (Brief Overview)</h2> + <p>While Ānāpānasati is primarily a mental training, it has observable physiological correlates.</p> + <ul> + <li><strong>Physiological Changes During Ānāpānasati:</strong> Regular practice can influence heart rate variability (HRV), often increasing it, which is associated with better stress resilience. It can also lead to lower baseline heart rate and blood pressure. Respiratory patterns may become slower and more regular.</li> + <li><strong>Nervous System Regulation Through Breath Awareness:</strong> Mindful breathing, especially with a slightly prolonged exhale, can activate the parasympathetic nervous system (the "rest and digest" system), counteracting the effects of the sympathetic nervous system's "fight or flight" response.</li> + <li><strong>Optimizing CO2/O2 Balance for Meditation:</strong> While the primary instruction in Ānāpānasati is to observe the natural breath, the calm and regular breathing patterns that develop can subtly optimize the balance of carbon dioxide and oxygen in the body, contributing to feelings of alertness and tranquility. Over-controlling the breath is generally not advised in this specific practice, as the focus is on awareness.</li> + </ul> + </section> + + <section id="resources" class="content-section"> + <h2>Resources for Further Study</h2> + <ul> + <li><strong>Text Translations of the Ānāpānasati Sutta (MN 118):</strong> + <ul> + <li>Access to Insight (<a href="https://www.accesstoinsight.org" target="_blank" rel="noopener">accesstoinsight.org</a>) - Multiple translations available.</li> + <li>SuttaCentral (<a href="https://suttacentral.net" target="_blank" rel="noopener">suttacentral.net</a>) - Comparative translations and Pāli text.</li> + </ul> + </li> + <li><strong>Recommended Teachers and Traditions:</strong> (Guidance: Seek qualified teachers in established lineages) + <ul> + <li>Theravāda: Teachers like Bhikkhu Bodhi, Ajahn Sumedho, Joseph Goldstein, Sharon Salzberg, Gil Fronsdal often teach Ānāpānasati.</li> + <li>Zen: Teachers in Soto and Rinzai traditions (e.g., Thich Nhat Hanh's Plum Village tradition incorporates mindful breathing extensively).</li> + <li>Tibetan: Many teachers incorporate shamatha (calm-abiding) practices based on breath awareness.</li> + </ul> + </li> + <li><strong>Meditation Apps with Ānāpānasati Programs:</strong> + <ul> + <li>Insight Timer, Headspace, Calm, Waking Up, Plum Village App often have guided Ānāpānasati practices or courses. Search within the apps.</li> + </ul> + </li> + <li><strong>Scientific Research on Breath Meditation:</strong> + <ul> + <li>PubMed (<a href="https://pubmed.ncbi.nlm.nih.gov/" target="_blank" rel="noopener">pubmed.ncbi.nlm.nih.gov</a>) and Google Scholar (<a href="https://scholar.google.com/" target="_blank" rel="noopener">scholar.google.com</a>) - Search for terms like "mindfulness of breathing," "breath-focused meditation," "anapanasati research."</li> + </ul> + </li> + </ul> + </section> + + <section id="conclusion" class="content-section"> + <h2>Conclusion: Your Ongoing Journey with the Breath</h2> + <p><span class="pali-term">Ānāpānasati<span class="tooltip-text">Mindfulness of breathing.</span></span> is not merely a technique but a profound path of self-discovery and mental cultivation that unfolds over time. It offers a direct way to connect with the present moment, develop inner calm, and cultivate the wisdom that leads to liberation.</p> + <ul> + <li><strong>Customizing Practice to Personal Constitution:</strong> Pay attention to what works best for your unique temperament and life circumstances. Experiment with posture, timing, and techniques with gentle curiosity.</li> + <li><strong>Long-Term Progression Path:</strong> Be patient and persistent. The benefits of Ānāpānasati accumulate with regular, dedicated practice. It is a lifelong journey of refinement.</li> + <li><strong>Transitioning to Other Meditation Forms:</strong> The stability and clarity developed through Ānāpānasati provide an excellent foundation for other Buddhist meditation practices, such as <span class="pali-term">Mettā<span class="tooltip-text">Mettā (Pāli): Loving-kindness meditation.</span></span> (loving-kindness), <span class="pali-term">Karuṇā<span class="tooltip-text">Karuṇā (Pāli): Compassion meditation.</span></span> (compassion), or pure <span class="pali-term">Vipassanā<span class="tooltip-text">Vipassanā (Pāli): Insight meditation focusing directly on the three marks of existence.</span></span> (insight) focused on the three marks of existence.</li> + </ul> + <p class="text-center" style="margin-top: 30px;"><em>May your practice be a source of peace, clarity, and profound understanding. May each breath bring you closer to your own innate wisdom.</em></p> + </section> + </div> + + <footer class="page-footer"> + <p>© 2024-2025 Practical Guide to Ānāpānasati. Content by David Veksler, conceptual design assisted by AI Cheatsheet Architect. + <br>This guide is for informational purposes and does not replace guidance from a qualified meditation teacher. + </p> + <p><a href="https://cheatsheets.davidveksler.com/" target="_blank" rel="noopener">Back to All Cheatsheets</a> | + <a href="https://www.davidveksler.com" target="_blank" rel="noopener">DavidVeksler.com</a> + </p> + </footer> + + <script> + document.addEventListener('DOMContentLoaded', function () { + // --- Fluid Section Entrance --- + const sectionsToAnimate = document.querySelectorAll('.content-section, .breath-pacer-container-wrapper'); // Include wrapper for pacer + const observerOptions = { + root: null, rootMargin: '0px', threshold: 0.1 + }; + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + // observer.unobserve(entry.target); // Uncomment to animate only once + } else { + // entry.target.classList.remove('is-visible'); // Uncomment to re-animate on scroll out/in + } + }); + }, observerOptions); + sectionsToAnimate.forEach(section => { observer.observe(section); }); + + // --- Guided Path Navigation --- + const nav = document.getElementById('guidedPathNav'); + const pathMarker = document.getElementById('pathMarker'); + const navLinks = nav ? nav.querySelectorAll('ul li a') : []; + const contentSectionsForNav = Array.from(navLinks).map(link => { + const sectionId = link.getAttribute('href')?.substring(1); + return sectionId ? document.getElementById(sectionId) : null; + }).filter(Boolean); + const navList = nav ? nav.querySelector('ul') : null; + + function updateMarkerAndActiveLink() { + if (!navList || !pathMarker || contentSectionsForNav.length === 0) return; + let currentSectionId = null; + const scrollPosition = window.scrollY + window.innerHeight / 2.5; // Adjusted for better active state trigger + + contentSectionsForNav.forEach(section => { + if (section.offsetTop <= scrollPosition && (section.offsetTop + section.offsetHeight) > scrollPosition) { + currentSectionId = section.id; + } + }); + if (!currentSectionId && contentSectionsForNav.length > 0) { + for (let i = contentSectionsForNav.length - 1; i >= 0; i--) { if (contentSectionsForNav[i].offsetTop <= window.scrollY + 150) { currentSectionId = contentSectionsForNav[i].id; break; } } + if (!currentSectionId) currentSectionId = contentSectionsForNav[0].id; + } + + let activeLinkIndex = -1; + navLinks.forEach((link, index) => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${currentSectionId}`) { + link.classList.add('active'); + activeLinkIndex = index; + } + }); + + if (activeLinkIndex !== -1 && navLinks[activeLinkIndex]) { + const activeNavLink = navLinks[activeLinkIndex]; + const navListRect = navList.getBoundingClientRect(); + const linkRect = activeNavLink.getBoundingClientRect(); + if(navListRect && linkRect && pathMarker) { + const markerTop = (linkRect.top - navListRect.top) + (linkRect.height / 2) - (pathMarker.offsetHeight / 2); + pathMarker.style.top = `${markerTop}px`; + } + } else if (contentSectionsForNav.length > 0 && navLinks.length > 0 && pathMarker && navLinks[0]) { + navLinks[0].classList.add('active'); + const firstLinkRect = navLinks[0].getBoundingClientRect(); + const navListRect = navList.getBoundingClientRect(); + if(navListRect && firstLinkRect && pathMarker) { + const markerTop = (firstLinkRect.top - navListRect.top) + (navLinks[0].offsetHeight / 2) - (pathMarker.offsetHeight / 2); + pathMarker.style.top = `${markerTop}px`; + } + } + } + if (nav) { + window.addEventListener('scroll', updateMarkerAndActiveLink); + window.addEventListener('resize', updateMarkerAndActiveLink); + setTimeout(updateMarkerAndActiveLink, 200); // Initial call slightly delayed for layout settlement + } + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + const href = this.getAttribute('href'); + if (href.length > 1 && document.querySelector(href)) { + e.preventDefault(); + const targetElement = document.querySelector(href); + const offsetTop = targetElement.offsetTop - (document.querySelector('.page-header')?.offsetHeight || 0) - 10; // Adjust for sticky header + window.scrollTo({ top: offsetTop, behavior: 'smooth' }); + if (this.closest('#guidedPathNav')) { // Update nav immediately if clicked from there + navLinks.forEach(link => link.classList.remove('active')); + this.classList.add('active'); + if(nav) updateMarkerAndActiveLink(); + } + } + }); + }); + + // --- Enhanced Interactive Breath Pacer --- + const pacerVisualEl = document.getElementById('breathPacerVisual'); + const playPauseBtnEl = document.getElementById('playPausePacer'); + const presetSelectorEl = document.getElementById('pacerPreset'); + const audioToggleBtnEl = document.getElementById('toggleAudioPacer'); + + let audioCtxInst = null; + let pacerIntervalIdVal = null; + let currentPacerPhase = ''; + let pacerPhaseTimer = 0; + let pacerIsRunning = false; + let pacerAudioEnabled = false; + + const pacerTimingsConf = { + '4-0-6': { inhale: 4000, hold: 0, exhale: 6000, label: "Inhale (4s)" }, + '4-2-4': { inhale: 4000, hold: 2000, exhale: 4000, label: "Inhale (4s)" }, + '5-0-5': { inhale: 5000, hold: 0, exhale: 5000, label: "Inhale (5s)" } + }; + let currentPacerTiming = pacerTimingsConf[presetSelectorEl.value]; + + function playPacerChime() { + if (!pacerAudioEnabled || !audioCtxInst) return; + const oscillator = audioCtxInst.createOscillator(); + const gainNode = audioCtxInst.createGain(); + oscillator.connect(gainNode); + gainNode.connect(audioCtxInst.destination); + oscillator.type = 'sine'; + oscillator.frequency.setValueAtTime(660, audioCtxInst.currentTime); + gainNode.gain.setValueAtTime(0.25, audioCtxInst.currentTime); // Softer + gainNode.gain.exponentialRampToValueAtTime(0.0001, audioCtxInst.currentTime + 0.4); + oscillator.start(); + oscillator.stop(audioCtxInst.currentTime + 0.4); + } + + function updatePacerVisualState() { + pacerVisualEl.classList.remove('pacer-inhale'); // Reset class + pacerVisualEl.style.transform = 'scale(0.6)'; + if (currentPacerPhase === 'inhale') { + pacerVisualEl.textContent = `Inhale (${currentPacerTiming.inhale/1000}s)`; + pacerVisualEl.style.transform = 'scale(1)'; + pacerVisualEl.classList.add('pacer-inhale'); + playPacerChime(); + } else if (currentPacerPhase === 'hold') { + pacerVisualEl.textContent = `Hold (${currentPacerTiming.hold/1000}s)`; + // Visual stays scaled up from inhale + pacerVisualEl.style.transform = 'scale(1)'; + pacerVisualEl.classList.add('pacer-inhale'); // Keep aura for hold + } else if (currentPacerPhase === 'exhale') { + pacerVisualEl.textContent = `Exhale (${currentPacerTiming.exhale/1000}s)`; + pacerVisualEl.style.transform = 'scale(0.6)'; + playPacerChime(); + } + } + + function runPacerCycleLogic() { + if (!pacerIsRunning) return; + if (currentPacerPhase === 'inhale') { + updatePacerVisualState(); + pacerPhaseTimer = setTimeout(() => { + currentPacerPhase = currentPacerTiming.hold > 0 ? 'hold' : 'exhale'; + runPacerCycleLogic(); + }, currentPacerTiming.inhale); + } else if (currentPacerPhase === 'hold') { + updatePacerVisualState(); + pacerPhaseTimer = setTimeout(() => { + currentPacerPhase = 'exhale'; + runPacerCycleLogic(); + }, currentPacerTiming.hold); + } else if (currentPacerPhase === 'exhale') { + updatePacerVisualState(); + pacerPhaseTimer = setTimeout(() => { + currentPacerPhase = 'inhale'; + runPacerCycleLogic(); + }, currentPacerTiming.exhale); + } + } + + if(playPauseBtnEl) { + playPauseBtnEl.addEventListener('click', () => { + pacerIsRunning = !pacerIsRunning; + if (pacerIsRunning) { + playPauseBtnEl.textContent = 'Pause'; + currentPacerPhase = 'inhale'; + currentPacerTiming = pacerTimingsConf[presetSelectorEl.value]; + if (!audioCtxInst && pacerAudioEnabled) { + audioCtxInst = new (window.AudioContext || window.webkitAudioContext)(); + } + runPacerCycleLogic(); + } else { + playPauseBtnEl.textContent = 'Play'; + clearTimeout(pacerPhaseTimer); + pacerVisualEl.textContent = 'Paused'; + pacerVisualEl.style.transform = 'scale(0.6)'; + pacerVisualEl.classList.remove('pacer-inhale'); + } + }); + } + if(presetSelectorEl) { + presetSelectorEl.addEventListener('change', () => { + currentPacerTiming = pacerTimingsConf[presetSelectorEl.value]; + if (!pacerIsRunning) { + pacerVisualEl.textContent = 'Ready'; + pacerVisualEl.style.transform = 'scale(0.6)'; + pacerVisualEl.classList.remove('pacer-inhale'); + } else { + clearTimeout(pacerPhaseTimer); + currentPacerPhase = 'inhale'; // Restart with new timing + runPacerCycleLogic(); + } + }); + } + if(audioToggleBtnEl) { + audioToggleBtnEl.addEventListener('click', () => { + pacerAudioEnabled = !pacerAudioEnabled; + audioToggleBtnEl.textContent = `Audio: ${pacerAudioEnabled ? 'On' : 'Off'}`; + if (pacerAudioEnabled && !audioCtxInst && pacerIsRunning) { + audioCtxInst = new (window.AudioContext || window.webkitAudioContext)(); + } + }); + } + if(pacerVisualEl) pacerVisualEl.textContent = 'Ready'; // Initial state + + + // --- Enhanced Posture Assessor --- + const postureSvgEl = document.querySelector('.posture-silhouette-container svg'); + if (postureSvgEl) { + const svgPartsToWatch = postureSvgEl.querySelectorAll('.meditation-figure-part'); + const allPostureTipEls = document.querySelectorAll('.posture-assessor .posture-tip'); + let activePostureTipEl = null; + + function showPostureTip(tipElementId, svgPartToHighlight) { + allPostureTipEls.forEach(el => el.style.display = 'none'); + svgPartsToWatch.forEach(part => part.classList.remove('highlighted-part')); + + const tipToShow = document.getElementById(tipElementId); + if (tipToShow) { + tipToShow.style.display = 'block'; + activePostureTipEl = tipToShow; + } + if (svgPartToHighlight) { + svgPartToHighlight.classList.add('highlighted-part'); + } + } + + svgPartsToWatch.forEach(part => { + const tipTargetId = part.dataset.tipTarget; + part.addEventListener('mouseover', () => showPostureTip(tipTargetId, part)); + part.addEventListener('focus', () => showPostureTip(tipTargetId, part)); + }); + + document.addEventListener('click', function(event) { // Hide on click outside + const postureAssessorEl = document.querySelector('.posture-assessor'); + if (activePostureTipEl && postureAssessorEl && !postureAssessorEl.contains(event.target)) { + activePostureTipEl.style.display = 'none'; + svgPartsToWatch.forEach(p => p.classList.remove('highlighted-part')); + activePostureTipEl = null; + } + }); + + const learnMoreTogglesEls = document.querySelectorAll('.posture-assessor .learn-more-toggle'); + learnMoreTogglesEls.forEach(toggle => { + toggle.addEventListener('click', function() { + const detailsDiv = this.nextElementSibling; + const isExpanded = detailsDiv.style.display === 'block'; + detailsDiv.style.display = isExpanded ? 'none' : 'block'; + this.setAttribute('aria-expanded', String(!isExpanded)); + this.textContent = isExpanded ? 'Learn More' : 'Show Less'; + }); + toggle.addEventListener('keydown', function(event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); this.click(); }}); + }); + } + + // --- Mindful Moments - Feeling Logger --- + const feelingLoggersEls = document.querySelectorAll('.feeling-logger'); + feelingLoggersEls.forEach(logger => { + const buttons = logger.querySelectorAll('button'); + buttons.forEach(button => { + button.addEventListener('click', () => { + buttons.forEach(btn => btn.classList.remove('selected')); + button.classList.add('selected'); + }); + }); + }); + + console.log("Ānāpānasati Cheatsheet 'Ethereal Flow' Fully Initialized."); + }); + </script> + +</body> +</html> \ No newline at end of file