You are an expert Graphics & WebGL Engineer, GLSL Shader Specialist, and Three.js Technical Artist.
    
    Your objective is to generate a complete, production-grade, self-contained, single-file HTML application simulating an interactive, photorealistic ocean environment with realistic wave physics, procedural foam, dynamic atmospheric sky,
  clouds, celestial bodies, and an optional coastline/beach.
    
    ---
    
    ### CRITICAL REQUIREMENTS & CONSTRAINTS
    
    1. **Single File Delivery**:
       - The entire implementation MUST be delivered as a single `.html` file containing HTML, inline `<style>`, and inline `<script type="module">`.
       - No external build steps, no bundlers, and no local assets.
    
    2. **Libraries via CDN**:
       - Use Three.js **v0.160.0** via CDN (ESM import map or unpkg/cdnjs ESM scripts):
         ```html
         <script type="importmap">
           {
             "imports": {
               "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
               "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
             }
           }
         </script>
         ```
       - Use `OrbitControls` from `three/addons/controls/OrbitControls.js`.
       - Use `lil-gui` (v0.19+) for the control UI via ESM (`https://unpkg.com/lil-gui@0.19/dist/lil-gui.esm.min.js`).
    
    3. **Strictly NO External Textures or Assets**:
       - **Zero external images, textures, skyboxes, or HDRIs.**
       - All textures, normal maps, noise textures, and sky gradients MUST be generated mathematically in GLSL or synthesized at runtime using HTML5 2D Canvas (`CanvasTexture` / `DataTexture`) with procedural Perlin/Simplex/Fractal noise
  algorithms.
    
    4. **Modern Three.js Standards**:
       - Set `renderer.toneMapping = THREE.ACESFilmicToneMapping`.
       - Set `renderer.toneMappingExposure = 1.0`.
       - Set `renderer.outputColorSpace = THREE.SRGBColorSpace`.
       - Implement responsive window resize listeners updating renderer dimensions and camera aspect ratio.
    
    ---
    
    ### CORE SIMULATION ARCHITECTURE & TECHNICAL SPECIFICATIONS
    
    #### 1. Ocean Surface & Wave Physics (Custom GLSL ShaderMaterial)
    - **Geometry**: A dense planar grid (e.g., `PlaneGeometry` with at least 256x256 segments, or radial concentric rings centered around the camera) projected horizontally on the XZ plane.
    - **Wave Synthesis**:
      - Implement a multi-octave **Gerstner Wave (Trochoidal wave)** algorithm in the vertex shader.
      - Combine at least 6 to 8 harmonic wave octaves with varying directions, amplitudes, steepness, frequencies, and speeds.
      - The vertex shader must compute:
        - Displaced position `(x, y, z)` where `y` represents the wave crests/troughs and horizontal displacement models the sharp cresting characteristic of ocean swells.
        - Analytical tangent and binormal vectors to compute exact surface normals, or compute normals using partial derivatives/finite differences.
        - Crest sharpness / Jacobian determinant to detect wave breaking zones for foam rendering.
    - **Optical & Photorealistic Shading (Fragment Shader)**:
      - **Schlick's Fresnel Approximation**: Dynamically blend between refracted deep ocean color (deep navy/indigo), shallow water color (cyan/turquoise), and reflected atmospheric sky color based on view angle `dot(N, V)`.
      - **Subsurface Scattering (SSS) Approximation**: Simulate sunlight piercing through wave peaks and thin crests using a directional transmission term.
      - **Sun Specular Reflection**: High-exponent Blinn-Phong or GGX microfacet specular highlight creating an elongated glitter path (sun road) across the water.
      - **Dynamic Procedural Foam**:
        - Synthesize multi-scale procedural noise (Worley/Voronoi or fractal Brownian motion) to map ocean whitecaps and froth.
        - Modulate foam coverage based on wave height, crest curvature (Jacobian), and wind-induced whitecap threshold.
        - Include subtle persistence/decay illusion over wave cycles.
    
    #### 2. Atmospheric Sky, Celestial Bodies & Volumetric Clouds
    - **Dynamic Sky Dome / Hemispherical Shader**:
      - Implement an atmospheric scattering shader (Rayleigh and Mie scattering approximation) that dynamically transitions based on sun angle:
        - Noon: Brilliant azure sky with horizon haze.
        - Golden Hour & Sunset: Vivid orange, magenta, and crimson gradients.
        - Twilight & Night: Deep indigo transitioning to black.
    - **Celestial Bodies**:
      - **Sun**: Dynamic 3D position controlled by time-of-day / azimuth / elevation sliders. Renders with an intense core, atmospheric halo/corona, and syncs directly with scene directional light and ocean specular reflections.
      - **Moon & Stars**: For night mode, render a moon with realistic soft glow and a procedural starry starfield using hash/fractal noise.
    - **Procedural Clouds**:
      - Implement dynamic clouds using raymarched 3D fractal noise or a dual-layer 2D scrolling fBm shader across the upper sky dome.
      - Clouds should respond to sun direction: backlit silver linings during golden hour, dark undersides during overcast settings, and realistic wind drift over time.
    
    #### 3. Optional Coastline & Shoreline Wash (Toggleable)
    - Provide a toggleable shoreline module:
      - A sloped sandy beach terrain mesh intersecting the ocean plane.
      - **Depth / Shallow Water Attenuation**: In the ocean shader, soften the intersection boundary between water and sand using smooth depth fade.
      - **Shore Break & Swash**: Animated shoreline wave roll-up with wet sand darkening effect and accumulation of bubbly edge foam that recedes with the wave period.
    
    #### 4. Camera & Navigation
    - `OrbitControls` with smooth inertia damping (`enableDamping = true`, `dampingFactor = 0.05`).
    - Set appropriate zoom limits (`minDistance`, `maxDistance`).
    - Set `maxPolarAngle` slightly below $\pi/2$ (e.g., $88^\circ$ or $1.55$ rad) to prevent the camera from plunging below water level, maintaining immersion.
    - Include a quick camera preset selector (e.g., "Shoreline Vista", "High Aerial Overview", "Water-Level Sailor View", "Sunset Horizon").
    
    #### 5. Robust UI Controls (`lil-gui`)
    Expose an organized, collapsible UI panel categorized as follows:
    - **Environment & Time**:
      - Time of Day (0.0 to 24.0 hours slider with auto-cycle toggle).
      - Sun Elevation & Azimuth.
      - Atmospheric Turbidity / Haze density.
      - Cloud Density & Wind Drift Speed.
    - **Ocean Physics**:
      - Wind Speed (scales overall wave energy).
      - Swell Height (wave amplitude multiplier).
      - Wave Choppiness / Crest Steepness.
      - Water Clarity / Attenuation depth.
      - Subsurface Scattering Strength.
    - **Foam & Rendering**:
      - Foam Threshold & Intensity.
      - Exposure / Tone Mapping level.
      - Toggle Coastline / Beach visibility.
      - Camera View Presets dropdown.
    
    ---
    
    ### CODE QUALITY & STABILITY REQUIREMENTS
    - Avoid deprecated Three.js syntax (e.g., do NOT use `THREE.sRGBEncoding`, use `THREE.SRGBColorSpace`).
    - Provide clean, modular code:
      - Separation between shader chunks, scene initialization, procedural texture utilities, control binding, and the main animation loop.
      - Use `requestAnimationFrame` with delta time calculation to ensure framerate-independent physics and wave speed.
    - Write robust, resilient WebGL shaders with fallbacks to guarantee no compile errors or black screens across modern browsers.
    - Output ONLY the complete, raw HTML code inside a single ```html codeblock with no placeholders or truncated code.
