Build a clean, single-file (HTML+CSS+JS) responsive navigation bar with an organic SVG blob indicator.

Core Specifications:
1. Semantic Navigation Markup:
   - Construct a semantic <nav> container containing 5 interactive navigation links: "Home", "Features", "Showcase", "Pricing", and "Contact".
   - Ensure all touch targets meet or exceed 44x44px for accessible mobile interaction.
   - Implement clear :focus-visible outlines for keyboard accessibility.

2. SVG Organic Blob Indicator:
   - Position an inline <svg> element beneath the navigation items containing a curved organic blob path (e.g. cubic Bézier path data: "M20,10 C45,5 75,15 90,30 C105,45 85,75 60,85 C35,95 10,70 15,40 Z").
   - Give the blob a soft colorful gradient fill that contrasts harmoniously against the page background.

3. Motion & Interaction:
   - When the user hovers or clicks a navigation link, compute the destination link's horizontal offset and bounding rectangle.
   - Translate the SVG blob smoothly to align with the active item using CSS transform: translate3d() with a 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) spring ease.
   - Transition the active link text color to maintain WCAG 4.5:1 contrast against the blob fill.

4. Architecture & Delivery:
   - Strictly single-file HTML+CSS+JS.
   - Zero external libraries, CDNs, or assets. Pure standard web technologies.

Enhance the single-file Morphing SVG Organic Blob Navbar with dynamic SVG path morphing and active item state tracking.

Technical Additions:
1. Dynamic Path Morphing Architecture:
   - Define an array of 5 unique organic SVG path coordinates ('d' attributes) corresponding to the 5 menu destinations: an elongated droplet, an asymmetrical kidney bean shape, a smooth fluid oval, a stretched organic pill, and a soft waterdrop.
   - When switching active items, simultaneously animate the blob container's horizontal position (transform: translateX) and interpolate the SVG path's 'd' attribute using the Web Animations API (WAAPI) or a requestAnimationFrame path tweening loop.

2. Visual Polish & Liquid Glow:
   - Apply an inline SVG <filter> with feDropShadow or subtle feGaussianBlur glow to produce an organic tactile ambient depth.
   - Implement smooth color temperature shifts where the blob gradient shifts slightly in hue across different menu items.

3. Keyboard Traversal & Accessibility:
   - Support arrow key navigation (ArrowLeft and ArrowRight) to move focus sequentially across navigation items.
   - Maintain aria-current="page" on the active item and synchronize aria-selected attributes.
   - Include a prefers-reduced-motion media query that replaces path morphing with an instantaneous position shift.

4. Constraints:
   - Pure vanilla JavaScript and CSS3. Zero external dependencies, font packages, or external images.

Architect an advanced single-file Morphing SVG Organic Blob Navbar featuring an authentic SVG gooey filter pipeline and elastic spring kinematics.

Engineering Architecture:
1. SVG Gooey Matrix Filter Pipeline:
   - Embed an inline SVG <filter id="gooey"> comprising:
     * <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
     * <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="gooey" />
     * <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
   - Apply this gooey filter to a parent container containing both the primary active blob and secondary dynamic detachment droplets.

2. Liquid Detachment & Snap Physics:
   - When the user transitions from Item A to Item B, spawn a trailing droplet that stretches elastically between both items, creating a liquid neck bridge before snapping cleanly into the destination item.
   - Implement a damped harmonic oscillator physics loop (stiffness k = 0.14, damping c = 0.8) to simulate realistic overshoot and wobble upon arrival.

3. Interactive Micro-Interactions:
   - Implement an idle organic pulsation: subtle continuous sinusoidal breathing (scale oscillation between 0.98 and 1.03) when the user is inactive.
   - On pointer press (pointerdown), compress the blob horizontally (squash) and stretch it along the travel vector upon release.

4. Performance & Compatibility:
   - Use will-change: transform and contain: paint on animated layers.
   - Ensure zero layout thrashing by reading layout geometries once upon resize and caching bounding client rects.
   - Single-file HTML+CSS+JS, strictly zero external dependencies.

Engineer a production-ready, generative Morphing SVG Organic Blob Navigation System using real-time Catmull-Rom spline path synthesis, magnetic pointer distortion, and responsive drawer metamorphosis.

Advanced Specifications:
1. Generative Catmull-Rom Spline Synthesizer:
   - Rather than static path strings, generate the SVG path in JavaScript by calculating closed cubic Bézier control points through 8 radial anchor vertices:
     * x(i) = cx + (radius + noise(i)) * cos(angle(i))
     * y(i) = cy + (radius + noise(i)) * sin(angle(i))
   - Modulate noise offsets using harmonic sine oscillators with distinct frequencies and phases to yield continuous organic fluid movement.

2. Pointer Proximity Magnetic Attraction:
   - Track cursor coordinates via PointerEvents. When the pointer approaches within a 120px threshold of the active blob, compute an attraction force vector that pulls nearby spline vertices toward the cursor.
   - If the cursor hovers an adjacent item, stretch the blob into an asymmetrical teardrop anticipating the click.

3. Responsive Drawer Metamorphosis (Mobile Viewport < 550px):
   - Seamlessly transform the horizontal desktop navbar into a floating circular action trigger (FAB) that expands into a full-screen organic modal drawer on tap.
   - Morph the SVG boundary of the drawer using the spline synthesizer, creating living fluid contours along the sheet edges.

4. Code Quality & Profiling:
   - Pre-allocate Float32Array coordinate buffers to prevent Garbage Collection pauses.
   - Full ARIA compliance (role="menubar", role="menuitem", aria-current).
   - Single self-contained HTML file. Absolutely zero external CDNs, fonts, or libraries.

Construct the ultimate "Organic Lava Lamp Biosphere Navbar": an ambient generative ecosystem combining autonomous micro-droplets, Web Audio procedural liquid feedback, theme switching, and device orientation parallax.

Masterpiece Features:
1. Autonomous Micro-Droplet Ecosystem:
   - Complement the primary navigation indicator with 3 autonomous floating satellite droplets that orbit and bounce within the navbar perimeter using 2D Verlet integration physics.
   - When the active blob travels past a satellite, merge them together via the SVG gooey filter pipeline, increasing the active blob's volume before discharging the satellite behind.

2. Procedural Web Audio API Sound Feedback:
   - Synthesize soft organic liquid droplets on menu clicks using pure Web Audio API (AudioContext):
     * Primary Droplet: Sine oscillator initiating at 650Hz and exponentially sweeping downward to 140Hz in 0.12s, coupled with an exponential gain decay.
     * Liquid Splash: Tuned bandpass filtered white noise burst (1200Hz center frequency, Q = 8, 0.04s duration).
     * Absolutely zero external audio samples or audio files.

3. Atmospheric Multi-Theme Engine:
   - Provide an integrated floating organic theme switcher that smoothly interpolates CSS variables and SVG gradient stops between 3 handcrafted palettes:
     * Warm Cream & Navy (Current design: #FFF2E3 base, #50577A primary)
     * Terracotta Amber (#FDF6F0 base, #C85A32 primary)
     * Abyssal Bioluminescence (#0B132B base, #48E5C2 primary)

4. Gyroscope Parallax Gravity (Mobile):
   - On mobile devices supporting DeviceOrientationEvent, translate device pitch and tilt (gamma and beta angles) into a subtle gravity bias vector, naturally pooling the SVG blob liquid toward the tilted edge.

5. Accessibility & Standards:
   - Min 44px touch targets throughout. WCAG 2.1 AA compliant contrast. Single-file HTML+CSS+JS with zero external assets.