add og image
Ā· 1 year ago
5745a2e1d38ec1505444d84e5ec043bf89d6cce4
Parent:
543d3d994
2 files changed +2039 ā1048
Diff
--- a/anapanasati-mindfulness-of-breathing.html +++ b/anapanasati-mindfulness-of-breathing.html @@ -1,1188 +1,2179 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <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)"> + <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="https://cheatsheets.davidveksler.com/anapanasati-mindfulness-of-breathing.html" /> + <meta name="author" content="David Veksler" /> <!-- 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"> --> + <meta property="og:type" content="website" /> + <meta property="og:url" content="https://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="https://cheatsheets.davidveksler.com/images/anapanasati-mindfulness-of-breathing-og.png" + /> <!-- 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"> --> + <meta property="twitter:card" content="summary_large_image" /> + <meta + property="twitter:url" + content="https://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="https://cheatsheets.davidveksler.com/images/anapanasati-mindfulness-of-breathing-og.png" + /> <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 */ + :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)); } - - /* --- "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); + 100% { + background: linear-gradient(135deg, var(--primary-bg-light-pulse), var(--primary-bg)); } - .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); + } + + /* --- "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%; } - .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); + 100% { + background-position: 100% 100%; } - .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; + } + + 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); } - .content-section.is-visible .posture-assessor, + } + .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; + 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); } - .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 --- */ + } + + /* --- 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 { - 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; + flex-direction: row; + align-items: flex-start; } - .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); + .posture-silhouette-container { + flex: 0 0 200px; } - .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 */ + .posture-tips-container { + flex: 1; } - 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); + } + @media (max-width: 900px) { + body { + padding-left: 0; } - - - /* --- 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; + display: none; /* Or transform to hamburger menu */ } - #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; + .container { + max-width: 100%; + padding: 15px; } - #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; + } + @media (max-width: 768px) { + body { + font-size: 16px; } - #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; + h1 { + font-size: 2.2em; } - #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; + .hero-section { + padding: 50px 15px; } - #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); + .cta-button { + padding: 14px 28px; + font-size: 1.1em; } - #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); + .content-section { + padding: 20px; + margin-bottom: 40px; } - #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; + h2 { + font-size: 1.8em; } - .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; + h3 { + font-size: 1.4em; } - - - /* 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; } + .posture-assessor { + padding: 15px; + } /* Already column */ + .breath-pacer-visual-wrapper { + width: 140px; + height: 140px; } - @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: 480px) { + h1 { + font-size: 2em; } - @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; } + .hero-section p { + font-size: 1.1em; } - @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; } + .pali-term .tooltip-text { + width: 180px; + margin-left: -90px; + font-size: 0.85em; } - + } </style> -</head> -<body> - + </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> + <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> + <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> + <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="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="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> + <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>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> + <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> + <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>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> + <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><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> + "Breathing in short, he discerns, 'I am breathing in short'; or breathing out short, he discerns, 'I + am breathing out short.'" </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> + <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> - </section> + </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> - <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> + <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><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> + <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> - <h4>Intermediate (Months 2-6): Deepening the Practice</h4> + </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><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> + <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> - <h4>Advanced (6+ Months): Mastery Development</h4> + </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><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> + <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> - </section> + </div> + </details> - <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> + <details class="troubleshooting-tree"> + <summary>Pain Management During Sitting</summary> + <div> + <p><strong>Strategies:</strong></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> + <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> + <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> - </section> + </div> + </details> - <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> + <details class="troubleshooting-tree"> + <summary>Dealing with Strong Emotions During Practice</summary> + <div> + <p><strong>Approaches:</strong></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> + <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> - </section> - - <section id="resources" class="content-section"> - <h2>Resources for Further Study</h2> + </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><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> + <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> - </section> + </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="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> + <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><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> + <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> - <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> + </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> - <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. + <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> - <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> + <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"> + <div> + <a + href="https://www.linkedin.com/in/davidveksler/" + title="David Veksler on LinkedIn" + target="_blank" + rel="noopener noreferrer" + class="mx-2 link-secondary" + > + <i class="bi bi-linkedin"></i> LinkedIn + </a> + <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2 link-secondary"> + <i class="bi bi-collection"></i> All Cheatsheets + </a> + </div> </footer> <script> - document.addEventListener('DOMContentLoaded', function () { + document.addEventListener("DOMContentLoaded", function () { // --- Fluid Section Entrance --- - const sectionsToAnimate = document.querySelectorAll('.content-section, .breath-pacer-container-wrapper'); // Include wrapper for pacer + const sectionsToAnimate = document.querySelectorAll(".content-section, .breath-pacer-container-wrapper"); // Include wrapper for pacer const observerOptions = { - root: null, rootMargin: '0px', threshold: 0.1 + 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 - } - }); + 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); }); + 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; + 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 (!navList || !pathMarker || contentSectionsForNav.length === 0) return; + let currentSectionId = null; + const scrollPosition = window.scrollY + window.innerHeight / 2.5; // Adjusted for better active state trigger - 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`; - } + 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 + 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(); - } - } - }); + 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'); + 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 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)" } + "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); + 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(); - } + 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 (!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 (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 (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 (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 - + if (pacerVisualEl) pacerVisualEl.textContent = "Ready"; // Initial state // --- Enhanced Posture Assessor --- - const postureSvgEl = document.querySelector('.posture-silhouette-container svg'); + 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'); - } + 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; } - - 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; - } + 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"; }); - - 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(); }}); + 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'); - }); + 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 + </body> +</html> Binary files /dev/null and b/images/anapanasati-mindfulness-of-breathing-og.png differ