Synthwave sunset · mimo-v2.6-flash

Let me build the single-file index.html synthwave scene.

Plan:
- Canvas full screen, resize handling.
- Elements: sky gradient, starfield (twinkling), sun with gradient + horizontal scanline bands cut out, horizon line, perspective grid below horizon animating toward viewer, sun reflection on ground plane below horizon (distinct from sun: blurred shimmering bands of sun colors, wavy), mountains maybe (decorative, procedural — allowed).
- Loop 10-20 seconds that repeats without distracting reset jump: e.g., a 16s loop where grid phase is periodic (grid offset loops exactly), sun moves down toward horizon and... to loop without jump, sun must return. Hmm: "Move the sun slowly down toward the horizon while keeping the composition visible" and "loop 10-20s repeats without distracting reset jump". So sun should descend during loop then return smoothly? Or sun oscillates: descends over the loop and eases back up? That would be visible reverse motion. Alternative: sun descends monotonically but loop reset is masked... Better: make sun position a smooth periodic function — e.g., sun descends for most of the loop then gently rises back near the end (like a subtle bob), or use a sine so it descends and returns. A common approach: loop time L=16s; sun y = start + amplitude * (1-cos(2π t/L))/2 — descends for half, ascends for half. That's a slow bob, no jump. But requirement "move down toward horizon" — over the first half it moves down. To make it mostly descending, could use asymmetric easing: descend over 0..0.7 of loop, ascend over 0.7..1 quickly? That's a jump-ish. Better smooth: use a periodic function that spends more time descending: phase with sine still symmetric. Could use sun descends over loop then wraps — but a jump.

Alternative: grid is periodic and truly loops; sun uses a slow periodic bob that reads as drift down and up. I think a sine bob is acceptable and no distracting reset jump. But verify task says "sun movement" sampled.

Actually maybe better: sun y = horizonOffset base + amp*(0.5 - 0.5*cos(2π t/L)) plus continuous slow drift? No—must be periodic.

I'll do: sunDescend over 0→0.65 of loop using smoothstep, then return over 0.65→1.0 with smoothstep. That gives asymmetric: slow descent most of the loop, quicker but smooth rise at end. The rise is smooth (ease), not a jump. Total derivative continuous at boundaries with smoothstep. Good: spends 65% descending, 35% returning gently. Composition keeps sun above horizon (min height above horizon, e.g., sun center stays at least radius+... above horizon).

Grid: perspective grid. Standard: horizontal lines at z positions, moving toward viewer: zOffset increases with time, lines with z = (i + offset) etc. Map z to screen y: y = horizon + (H - horizon) * (1/z-ish). For seamless loop, offset must be integer-complete over loop: offset goes 0→N over L seconds and grid repeats (line spacing pattern repeats when offset increments by one line spacing). If lines are uniform in 1/z, moving offset by 1 repeats exactly. So grid phase = (t/L)*linesPerLoop where linesPerLoop integer, e.g., 12 → each loop advances 12 line units, exact repeat.

Also vertical lines: static perspective rays converging to vanishing point — those don't move, fine.

Sun scanlines: draw sun clipped circle with gradient, then cut horizontal bands by drawing sky-colored (or transparent) horizontal stripes over the lower portion of the sun with increasing thickness. Use globalCompositeOperation or draw background-colored rects with 'destination-out' on offscreen? Simpler: draw sun to offscreen canvas, erase bands with destination-out, then composite. Or since sun sits over sky gradient, drawing sky gradient stripes would mismatch. Use offscreen canvas for sun: draw radial/linear gradient circle, then destination-out horizontal bands (bands only in lower half, thicker downward), then drawImage.

Sun colors: classic synthwave: yellow → orange → magenta/pink at bottom.

Reflection below horizon: vertical mirrored gradient bands of sun colors on ground plane, with wavy horizontal shimmer lines and scanline flicker, clipped to region below horizon, using a soft vertical gradient from horizon downward (magenta/orange glow fading), plus animated horizontal streaks offset by sine — distinct from second sun: no circular disc. Also grid lines should interact: draw reflection behind grid maybe with screen blending.

Also mountains: simple polygon ridges near horizon in dark purple with neon outline — decorative, procedural. Optional; nice. Keep composition: stars above horizon, sun behind mountains? Sun sets behind mountains/horizon.

Controls: Pause/Resume toggle button, Restart button. Restart resets t to 0 (and pauses? no, keeps playing). Also maybe show loop time. Restart comparing starting composition: store initial state = t=0, so restart returns exactly.

Loop length: 14 seconds.

Timing: use requestAnimationFrame with elapsed accumulated while playing (so pause stops). dt clamped.

Stars: generate once with seeded random (so restart composition identical? stars static anyway). Twinkle uses t so restart returns to same twinkle phase. Star positions fixed by seed; regenerate on resize? Keep normalized positions.

Grid travel speed: over 14s, 12 lines pass → check visually.

Let me also add horizon glow line, and scanline overlay CRT effect (subtle) - decorative.

Let me write code carefully.

Canvas layout:
- horizonY = H * 0.58 maybe.
- Sun: cx = W/2, radius = min(W,H)*0.16. Sun cy from e.g. horizonY - r*3.2 (high) down to horizonY - r*0.5 (partially behind horizon? "keeping composition visible" — stay above, maybe bottom slightly crossing horizon is fine as it "moves down toward horizon"). I'll keep sun bottom just touching/above horizon: cyMax such that cy + r <= horizonY + small... Actually sun setting behind horizon looks good but then reflection makes sense. But requirement: reflection distinct from "a second sun in the sky" — implies sun stays in sky, reflection below. Let sun descend so its center goes from horizonY - 3.0r to horizonY - 1.15r, keeping most visible.

Reflection: region below horizon. Colors sampled from sun palette: top of reflection near horizon = sun bottom color (magenta/orange), fading down to grid dark. Draw a vertical gradient rectangle (with slight horizontal falloff from center via composite). Plus animated horizontal shimmer bars: rows with varying alpha, moving, colored orange/pink, width modulated by sin — like light path on water. Also a vertical column glow centered at sun x. Distinct: no disc shape; a vertical streak reflection like on water.

Draw order: sky gradient → stars → mountains → sun → horizon glow → ground gradient/reflection → grid (grid lines over reflection with additive blend) → scanline overlay → vignette.

Reflection should be "below the horizon ... on the ground plane" and grid extends to horizon — reflection visible between grid lines; draw reflection first then grid lines with lighter blend so both visible.

Ground: below horizon base color dark purple to near-black.

Grid drawing:
- vanishing point: (W/2, horizonY).
- vertical rays: for i in -N..N, x at bottom edge = W/2 + i * spacingBottom; line from (W/2 + i*spacingBottom*t? ) Perspective: line from vanishing point to (W/2 + i*step, H). Actually ray endpoints at bottom: xEnd = W/2 + i * (W/ (2*?)) ... Use x_end = W/2 + i * spacing where spacing = W/8, i from -12..12. Lines from (W/2, horizonY) to (x_end, H). Fine.
- Horizontal lines: depth mapping. Use k = 1/ (z). For line j with z = j + phase, j=1..: y = horizonY + (H - horizonY) * (f / (z)) where f controls. Let's define perspective: y = horizonY + groundH * (1 / z) with z from zNear... Simpler: y = horizonY + groundH * p where p = frac-based. Classic: y_i = horizon + groundH * (i / (i + something))? Let's use: for depth d = j - phase (j = 0..), where phase in [0,1) advances; line y = horizonY + groundH * (d / (d + c)) with c ~ 1.2? At d=0 → y=horizon; as d→∞ → y = horizon+groundH. Hmm that maps far lines near horizon: lines with small d near horizon? d=0 at horizon, increasing d goes to bottom — but as time advances phase increases, d decreases → lines move toward horizon (backward). We want forward travel: lines move toward viewer = toward bottom. So d should decrease... wait line approaching viewer goes down the screen. So a line's d decreases over time toward... if d→0 maps to horizon, that's away. So invert: y = horizon + groundH * (1/(1+d))? d=0 → bottom... hmm let's define: line at integer offset n (n=1,2,...), phase p in [0,1) increasing with time, distance z = n - p (decreasing over time until passes to next line). y = horizon + groundH * (K / (K + z))? As z decreases, y increases → moves toward bottom → toward viewer. When z crosses 0 (line at n, p reaches 1): line n has z=0 → y = horizon+groundH = bottom, and simultaneously line n+1 has z=1... but we need continuity: when p wraps 1→0, lines reindex: line n disappears at bottom, line n+1 becomes n. With wrap, positions are identical since (n - p) for p∈[0,1) covers z ∈ (n-1, n]; at p→1, z→n-1; after wrap p=0, new indexing: line (n) now has z = n. Hmm need care.

Standard approach: z_i = i + p for i = 1..N, y = horizon + groundH * K/(K + z). As p increases from 0→1, z increases → y decreases → lines move toward horizon = backward travel. Use z_i = i - p, i = 1..N, p∈[0,1): at p=0, z=1..N; p→1: z→0..N-1. y = horizon + groundH * K/(K+z): z→0 gives y=bottom. So lines move downward toward viewer; at p wrap, line that had z≈0 (bottom, gone) is dropped and a new line appears at z≈N (near horizon) with y≈ horizon + groundH*K/(K+N) — but before wrap, lines were at z = 0..N-1 (i.e., set {0,1,...,N-1} offset), after wrap set {1,...,N}. The line at z=0 before wrap is at y=bottom exactly; after wrap it's gone and z=N-1→... wait after wrap values are 1..N, before wrap (p≈1) values ≈ 0..N-1. Shift: every line moves from z to z+1, which is a discontinuity — lines jump backward!

Hmm. Correct: as time advances, each line's z decreases (moves closer). Line at z: when z reaches 0 (bottom edge) it should be removed, and a new line appears at the far end z = Zmax. Continuous motion: z_i(t) = z0_i - v t. Lines are identical so we just need the set of z values to be periodic: {z_i} = {i - p : i} but when p wraps, need new line appearing at Zmax. So use finite lines: i from 1 to N, z_i = i - p... At p=0: z ∈ {1..N}. At p=0.9: {0.1..N-0.9}. At p=1 (=p=0): {1..N}. The line at z=0.1 (nearly bottom) at p=0.9 jumps to z=1.01? no at wrap it becomes... the line that was at 0.1 disappears (there's no line at 0.1 after wrap; nearest is 1.0). So a line vanishes at z=0.1 and a new one appears at z=N (≈far). Actually z=N at p=0 vs z=N-0.9: hmm at wrap, all lines shift by +0.9 backward. That's the jump.

Correct periodic construction: lines exist for z ∈ ..., i.e., an infinite set with spacing 1: z_i = i - p for all integers i. Restrict to visible: 0 < z ≤ Zmax (below horizon excluded: z>0 means y<horizon+... actually z→∞ is horizon). So lines with z from just above 0 up to Zmax. As p increases, all z decrease; line crossing z=0 leaves (at bottom), and a new line enters at z = Zmax + something? With infinite set {i - p}, at p∈[0,1) the visible set changes continuously: a line exits at 0 continuously, but a new line enters at Zmax when? Lines at z = i - p for large i: as p increases, a line crosses Zmax downward... entering when i - p ≤ Zmax, i.e., i ≤ Zmax + p. The count increases discretely at p = frac(Zmax). To keep smooth, just set Zmax = ∞ effectively (lines pile up near horizon and we stop drawing when spacing < 1px). Since y = horizon + groundH*K/(K+z), as z grows y→horizon asymptotically; draw while (y_prev - y) > threshold. With infinite set, drawing lines i from floor(p)+1 up while spacing > 1px. The topmost drawn line jumps when threshold crossed, but it's ~1px at horizon — invisible. And at bottom, line exits exactly at z=0 → y = bottom edge (offscreen bottom). Perfect, no jump.

Also mapping: y = horizon + groundH * K/(K+z): z=0 → y = horizon+groundH = H (bottom) ✓. z→∞ → horizon ✓. Line spacing near horizon tiny ✓. Perspective correctness: y-h ∝ 1/(z+K), standard.

Speed: p advances linesPerLoop per loop: p = (t/loopLen)*LINES_PER_LOOP (mod 1 used implicitly). Choose LINES_PER_LOOP = 10, loopLen = 14s → line every 1.4s at bottom — decent travel. Maybe 12.

But wait: sun descent function and grid both periodic with loopLen → whole scene repeats exactly. Stars twinkle: use t/loopLen periodic too (sin of 2π t/loop) so full repeat. Good.

Reflection shimmer also periodic with loop.

Now asymmetric sun descent: f(u) = smoothstep over u∈[0,0.62] descend, then smoothstep back over [0.62,1]. Ensure derivative 0 at boundaries: smoothstep has zero derivative at ends ✓. So no visible hitch.

Sun also maybe slight horizontal drift? Keep centered or slight sine x drift — keep centered for composition with reflection column centered... could drift slightly (±3% width) periodic sine, and reflection follows. Nice touch. I'll add small drift.

Controls: buttons top-left overlay: Pause/Resume (toggle label), Restart. Maybe also show loop time display. Styling: neon.

Pause: stop accumulating time; also stop rAF? Keep rAF running but don't advance t (so no redraw needed—but fine to keep rendering; better skip rendering when paused to save CPU — but first frame after pause already drawn). I'll keep rAF but only update/render when playing, and render once on state changes. Simplest: always render, but t only advances when playing. Rendering static scene is fine. Actually rendering while paused consumes CPU but harmless. I'll render only if playing || needsRender flag.

Restart: t = 0, keep playing state, needsRender.

Also handle resize with devicePixelRatio.

Mountains: procedural ridge polygon using seeded noise, two layers, drawn at horizon, dark purple fill with neon top stroke (magenta/cyan). Sun sits behind mountains (draw sun before mountains) so sun sets behind ridge? Sun bottom stays above horizon but mountains rise above horizon → sun would be occluded at bottom. Nice effect. Keep sun descent limited so enough visible: cyMax = horizonY - r*1.05 + something... if mountains height ~ 0.12*groundH? Let mountains peak up to ~8% of H above horizon. Sun bottom at descend end: horizonY - 0.15*r? Let's compute: cy range: cyStart = horizonY - r*2.9, cyEnd = horizonY - r*1.1. At end, sun bottom = horizonY + r*... cy + r = horizonY ... wait cyEnd = horizon - 1.1r → bottom = horizon - 0.1r, still above horizon by 0.1r. With mountains peaking ~0.1*H above horizon, they'd cover lower part of sun. Sun r ≈ 0.16*min(W,H) ≈ maybe 100px on 800H; mountains 0.08*800=64px — covers a good chunk. Might be too occluding. Make mountains modest: peaks up to 0.05*H = 40px, and place sun x center; ridge with a valley at center? Simpler: keep mountains on sides (peaks higher at edges, low near center) — procedural with center dip: height(u) = base(u) * (0.35 + 0.65*|u-0.5|*2)? That makes valley at center so sun visible. Good.

Reflection: draw after mountains & horizon, clipped below horizon.

Reflection implementation:
1. Fill ground base: linear gradient horizon → bottom: #2a0f4d → #0b0418.
2. Sun color column: vertical gradient centered at sunX, width ~ r*3, from horizon down to horizon + groundH*0.75, colors: at horizon bright #ffd36e/#ff7a3d fading to #ff2e88 → transparent. Use createLinearGradient vertical + horizontal alpha falloff — need radial-ish: use a second pass with 'screen' composite and radial gradient ellipse. Approach: create radial gradient at (sunX, horizonY) with radiusX = r*3.5, radiusY = groundH*0.8 using ctx.save(); ctx.translate; ctx.scale(1, gy/gx); radial gradient — doable: translate(sunX, horizonY), scale(sx, sy), then arc radius 1 gradient. Simpler: draw multiple horizontal shimmer bars with alpha and color from sun palette — this reads as water reflection anyway and is clearly "stylized reflection of sun's colors".

I'll do both: soft vertical column glow (linear gradient rect with horizontal falloff approximated by drawing stacked rects of decreasing width? meh) plus shimmer bars.

Easier column: draw N horizontal bars, for each row y_i (i from 0..M over ground region), alpha = falloff(i) * (0.6+0.4*sin(...)), color interpolating sun palette by depth, width = columnWidth * (0.5 + 0.5*noise) modulated per row and animated. This creates broken reflection streaks — very stylized and distinct. Plus base soft glow: a linear gradient rect from horizon (sun palette mid) fading down with low alpha over full width (like horizon glow on ground).

Colors palette:
- Sky top: #0b021f → mid #2a0a4e → horizon #5b1067 with pink glow near horizon.
- Sun gradient: top #fff3a0 → #ffb347 → #ff5f6d → #ff2e9a bottom.
- Grid: cyan #4dfcff near horizon → magenta #ff2ec4 at bottom? typical: cyan lines with magenta major. I'll do horizontal lines magenta/pink, vertical lines cyan, both with glow (shadowBlur).
- Mountains: fill #14042e, stroke #ff4fd8.
- Horizon line: bright cyan/white glow.

CRT scanline overlay: subtle repeating horizontal lines via CSS overlay? All in canvas: draw thin dark lines alpha 0.06 every 3px — costs little. Or CSS ::after with repeating-linear-gradient on body over canvas — CSS inline, allowed. Do CSS overlay for scanlines + vignette, cheap.

Stars: 160 stars, positions from seeded PRNG, only above horizon - small margin; twinkle: alpha = 0.35+0.65*(0.5+0.5*sin(2π*(t/loop)*k_i + phase_i)) with k_i integer for periodicity (k ∈ {1,2,3}). Some colored (cyan/white/pink).

Grid glow: shadowBlur may be costly with many lines but fine (few dozen). Use moderate.

Also add subtle "travel" dust particles? Not needed.

Performance: fine.

Write the file.

Details for grid draw:

```js
const groundTop = horizonY, groundH = H - horizonY;
const K = 1.4;
// horizontal lines
let p = gridPhase; // 0..LINES
let iStart = Math.floor(p) + 1;
for (let i = iStart; ; i++) {
  const z = i - p;
  const y = groundTop + groundH * (K / (K + z));
  ...
  if (groundTop - ... spacing < 1.2) break
}
```
Wait z = i - p where p grows unbounded; use p = gridPhaseMod? With infinite i indexing, use p raw and i from floor(p)+1: z = i - p ∈ (0,1] for first line ✓, and grows. But then "line exits at z→0" — first line z∈(0,1]; y for z=0.001 → near bottom H ✓. Continuous ✓. Break condition: when spacing between consecutive y < 1.5px: spacing = y(z) - y(z+1); break when < 1.3. Also cap i to avoid infinite loop: max 400 iterations.

Line thickness: thicker at bottom: lw = 1 + 2.2 * (K/(K+z))? At z=0 lw ~ 3.2, near horizon ~1. Use lw = 0.8 + 2.4 * (K/(K+z)).

Alpha similarly stronger near bottom.

Vertical rays: endpoints at bottom: xs = W/2 + j*spacingBottom, j from -MAXJ..MAXJ with spacingBottom = W/7? Lines drawn from (W/2 + j*spacingBottom*? ) — for perspective ray through bottom point, top end at vanishing point (W/2, horizon). Actually rays should also span; draw from (vx, horizonY) to (xEnd, H). But lines near horizon crowd center — that's correct perspective.

Color: gradient along line: at horizon cyan dim, at bottom magenta bright. createLinearGradient(vx, horizon, xEnd, H).

Sun drawing with scanlines (offscreen canvas, recreated on resize):

```js
function drawSun(c, cx, cy, r){
  off.width/height sized; ...
}
```
Offscreen: size = 2r x 2r + padding for glow. Draw:
- glow: radial gradient circle larger (r*1.6) low alpha warm.
- disc: linear gradient top→bottom through palette.
- bands: destination-out rects in lower ~55%: band y positions computed from a pattern: starting at y0 = cy - r*0.1, gap increases downward: bandH from 2 to 10, gap from 4 to 16. Deterministic loop until past r.

Standard synthwave sun: solid top, bands starting mid with increasing thickness/gap. Then blit with slight additive glow: draw offscreen with 'lighter'? Just draw normally plus shadowBlur maybe. Draw glow separately on main canvas before disc.

Also sun should be clipped to not go below horizon? If sun bottom above horizon always, fine. Also mountains over sun.

Reflection colors: define palette array ['#ffe08a','#ffb347','#ff6b5e','#ff2e9a','#c026d3'] and interpolate by depth d∈[0,1].

Reflection bars: for i in 0..M (M ≈ groundH/7): y = horizon + 4 + i*(groundH/M)*... let row spacing = groundH/M. t-based animation: phase_i = i*0.7 + (t/loop)*2π*? Must be periodic: use u = (t % loop)/loop, angle = 2π*u. offset = sin(angle*2 + i*0.9) etc. Use integer multiples of 2π*u for strict periodicity: e.g. sin(2π u *2 + i*0.9).

Bar: width w = colW * (0.45 + 0.55*abs(sin(...))) where colW shrinks with depth? Reflection column width near horizon ~ sun diameter*1.4, narrowing? On water it stays similar width. Keep colW = r*3.2, alpha falloff exp(-d*3.2).

Also horizontal falloff: draw each bar centered at sunX with w, maybe split into two segments for broken look: draw main bar and skip random gaps: use pattern via sin(i*13.7) thresholds. Simpler: alpha varies per row with pseudo-noise giving broken streaks.

Add a bright compact glow right below horizon: strong narrow bars.

Also "visually distinct from a second sun in the sky": ensure no circular shape; bars + column only. Good.

Horizon glow line: full-width gradient line with bright center near sunX.

Loop display: small HUD showing "loop 14.0s" maybe. Buttons.

Restart compare: identical since t=0 and deterministic.

Now write code. Also handle DPR: set canvas.width = W*dpr, ctx.setTransform(dpr,0,0,dpr,0,0), use CSS px in code.

Sun offscreen canvas: create at size based on r in device pixels? Simpler: draw sun procedurally each frame on main canvas with bands: draw gradient disc clipped to circle, then erase bands — but erasing on main canvas would erase sky. Use offscreen sun canvas sized in device px: s = ceil(r*2*1.35*dpr). Rebuild when resize (r changes). Draw in offscreen with its own transform.

Implementation:

```js
let sunCanvas = document.createElement('canvas');
function buildSun(){
  const pad = 0.35; // extra for glow
  const size = Math.ceil(r*(2+2*pad));
  sunCanvas.width = size*dpr... 
}
```
Inside: center at size/2 (CSS units, with ctx scaled by dpr). Draw glow radial (r*1.9). Disc gradient. Bands destination-out: for bands use local coords relative center.

Then main: ctx.drawImage(sunCanvas, cx - size/2, cy - size/2, size, size).

Bands: iterate y from -r*0.15 to r: bandH = 3 + 9*t, gap = 5 + 16*t where t = (y - start)/(r - start). Also maybe bands start slightly above middle.

Actually classic: bands cut from about 40% down. I'll start at y = -r*0.05.

Let me also ensure bands region below is what makes it read. Fine.

Sky gradient colors:
- 0: '#07021a'
- 0.45: '#1b0542'
- 0.8: '#4a0b5e'
- 1 (horizon): '#8a1b6d' with glow? Plus horizontal pink glow band at horizon.

Sun descends "toward horizon": start cy = horizon - 2.7r, end cy = horizon - 1.15r.

Check composition visible: r = 0.17*min(W,H). On 1200x800: min=800, r=136. horizon=0.58*800=464. cy start = 464-367=97 → top of sun = -39, offscreen! Too high. Reduce: cy start = horizon - 2.2r = 464-299=165, top = 29 ✓ visible. End cy = horizon - 1.2r = 464-163=301, bottom = 437 < 464 ✓. Descent = 136px. Also stars need room above: sun occupies center; stars fine around.

Hmm r=136 gives sun diameter 272 on 800 height — decent. Use r = 0.16*min(W,H) = 128.

For mobile portrait (e.g., 400x800): min=400, r=64, horizon=464, cy start = 464-141=323... fine.

Grid ground height = 336px on desktop.

Mountains height max 0.06*H = 48px above horizon.

Loop: 14s, LINES_PER_LOOP = 12? Line every 1.17s reaching bottom; with 12 lines/loop speed feels fast. Maybe 9 lines per loop → 1.55s per line. Perspective near bottom lines move fast anyway. I'll pick 10.

Sun descent timing: u = (t mod L)/L. descend until 0.65, return 0.65→1.0. Return duration 0.35*L=4.9s rise — visible reverse but smooth. Alternative accepted.

Hmm, would rising sun be "distracting"? It's smooth and periodic — requirement is no distracting reset jump. Fine.

Buttons UI: bottom-center or top-right. Style neon.

Also add a "hint" text? Not needed.

Let me write the file now.

Details for grid draw: (see above)

Also add HUD text: time/loop progress bar maybe. Keep minimal: buttons Pause/Resume, Restart.

Let me write.

For mountain ridge: seeded PRNG (mulberry32 with fixed seed), generate ridge points: for layer k, points across width with value = sum of sines with seeded phases: h(x) = A * (0.5+0.5*sin(...)) etc. Use a few harmonics:

```js
function ridge(x01, layer, seed){
  let v = 0;
  for (let h=1; h<=4; h++){
    v += Math.sin(x01*Math.PI*2*h*freq + phase[h]) / h;
  }
}
```
Precompute arrays per layer of points (N=64) so consistent across frames/resize? Recompute on resize; deterministic seed.

Center dip: multiply amplitude by (0.3 + 0.7*min(1, |x01-0.5|*2.6)) — valley near center. Hmm mountains typically frame sides. Good.

Layers: back layer amplitude 0.055H, color #2a0a52, stroke #7b2ff7 dim; front layer amplitude 0.035H? Actually front should be lower and darker, drawn over back: amplitude 0.04H, fill #12032c, stroke #ff4fd8.

Wait mountains sit on horizon; height above horizon = amp * shaped. Fine.

Draw sun before mountains.

Let's write the code.

Also star drawing: small rects/arcs, some with glow (shadowBlur for a few brightest).

CRT overlay CSS:
```css
#overlay{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px); mix-blend-mode:... }
```
Keep subtle: rgba(0,0,0,0.12) 0 1px, transparent 1px 3px; plus vignette radial-gradient.

Buttons container: position fixed top 16px left 16px, flex gap, neon buttons; pointer-events auto.

HUD: show "t = 3.2s / 14.0s" small.

Write file now.

JS structure:

```js
const canvas = ..., ctx = ...;
let W,H,dpr,horizonY,r,sunStartY,sunEndY;
let stars=[], mountains=[]; // built on resize
const LOOP = 14, LINES = 10;
let t = 0, playing = true, last = performance.now(), needsRender = true;
```

Resize: compute W,H from innerWidth/innerHeight; set canvas size; rebuild stars (normalized positions stored once — keep star base seeds fixed so composition stable across resize; regenerate using same seeds), mountains.

Stars: generate once with seeded rng: {x01, y01 (0..0.92 of horizon), size, twk (1..3 integer), phase, color}. On resize just use normalized.

Sun build on resize.

Render(dtless) using t.

Animation loop:
```js
function frame(now){
  const dt = Math.min(0.05, (now-last)/1000); last = now;
  if (playing){ t += dt; needsRender = true; }
  if (needsRender){ render(); needsRender = false; }
  requestAnimationFrame(frame);
}
```
When paused, needsRender false → no render. Good.

Restart: t=0; needsRender=true.

Buttons: pauseBtn toggles playing; label 'Pause'/'Resume'. If paused and user restarts, still render once.

Reflection bars detail:

```js
function drawReflection(cx){
  const u = (t % LOOP)/LOOP;
  const ang = u*Math.PI*2;
  const gH = H - horizonY;
  // base ground gradient
  // 1) column glow: stacked rows
  const rows = Math.ceil(gH/6);
  const colW = r*3.4;
  for (let i=0;i<rows;i++){
    const d = i/(rows-1);           // 0 at horizon
    const y = horizonY + 2 + i*6;
    const wob = Math.sin(ang*3 + i*0.55)*0.5 + Math.sin(ang*2 - i*0.23)*0.5;
    let w = colW * (0.55 + 0.3*Math.sin(d*9 + wob) ) * (1 - 0.25*d);
    ...
  }
}
```
Hmm, needs to look like broken reflection: alpha per row = base(d) * (0.35 + 0.65*n) where n = 0.5+0.5*sin(ang*2 + i*1.7 + Math.sin(i*3.1)) → some rows dim. Also add a few bright "hot" rows right below horizon.

Color by depth: interpolate through palette by d (0→warm yellow, →orange, →pink, →magenta, fade to transparent).

Then also a soft overall glow: linear gradient full width: horizon color rgba(255,80,150,0.35) → transparent at 0.45*gH, composite 'screen' maybe. Add before bars.

Rows of height 6 might create banding with grid — fine, stylized.

Alpha falloff: alpha = (1-d)^1.8 * 0.9 * flicker.

Also draw reflection clipped so within ground: naturally.

Bars drawn with 'lighter' composite for glow.

Grid drawn after with 'lighter' too? Grid lines with shadowBlur cyan look good on top. Use normal composite with high alpha, or lighter for neon. I'll use 'lighter'.

Order: ground base (source-over) → horizon glow → reflection bars (lighter) → grid (lighter) → horizon line (lighter).

Sun disc drawn in sky.

Let me write out the code fully now, then test with browser: reload, screenshot at a few times, check console, pause/resume/restart.

Note the browser tool: coordinates 1200x800 viewport. Screenshots available. Can't easily sample "several moments" unless I wait — I can use browser action "screenshot" after some delay; there's motion action? "motion" — capture motion frames maybe. I'll take screenshots at intervals by running actions sequentially (each call takes time). Also I could expose a debug hook: window.__setTime(s) to jump time for verification — useful for sampling moments. I'll add a hidden debug API: window.__synth = { setTime, getState } for verification, harmless.

Let's write.

Palette function:

```js
const SUN_COLORS = [[1,[255,243,160]],[0.75,[255,179,71]],[0.5,[255,95,109]],[0.25,[255,46,154]],[0,[192,38,211]]];
```
For reflection, depth d: at horizon (d=0) = bottom of sun (magenta) then going down shift toward... reflection of sun: nearest horizon shows sun's bottom color (magenta), farther down the water shows... typically reflection shows reversed sun colors: near horizon = sun bottom (pink), further = orange/yellow? Actually on water, reflection mirrors: the part of sun nearest horizon (bottom, magenta) appears nearest horizon, and top of sun (yellow) appears farthest... but the reflection column extends toward viewer so farther = toward viewer = top of sun? In a mirror reflection on ground plane, points farther from horizon correspond to points higher in the reflected image... For simplicity: near horizon magenta → deeper down orange/yellow then fade. That reads nicely (bright warm streak fading). I'll do: d=0: #ff5f6d/ish hot pink-orange; small d: #ffb347; mid: #ff2e9a; deep: fades purple. Eh, choose: color = mix by d: 0→ '#ffe08a'? Actually classic neon reflection: bright yellow-white at horizon fading to magenta. I'll do: d 0 → #ffd36e, 0.15 → #ff9a3d, 0.4 → #ff4f9a, 0.7 → #d329c9, 1 → transparent-ish #6a1b9a.

But horizon-adjacent should be brightest — yes d=0 yellow bright.

Implement lerpColor with stops.

Also reflection must be distinct from a second sun: bars only, no disc ✓.

Grid vertical lines spacing: from vanishing point: bottom x positions: W/2 + j*(W/6) for j=-9..9 → at bottom covers beyond edges ✓. But rays: from (W/2, horizonY) to (xEnd, H). Lines for |j| large nearly horizontal-ish? No, they're straight lines; endpoints beyond screen, still fine.

Actually better perspective: rays should be drawn only from horizon to bottom ✓.

Draw rays first (so horizontal lines overlay)? Typically horizontal lines over verticals. I'll draw rays then horizontal lines.

Grid color: rays: gradient cyan(dim at horizon)→ magenta bright at bottom? Classic synthwave: cyan/teal lines. I'll do rays cyan (#39f0ff), horizontal lines hot pink (#ff3ea5) with slight glow — nice contrast.

Glow: ctx.shadowColor / shadowBlur = 8. With lighter composite shadowBlur can be heavy but number of lines ~ maybe 60 near horizon... spacing threshold 1.6px over 336px ground: number of lines: y(z) spacing... roughly until spacing<1.6, maybe 40 lines. shadowBlur on 40 lines fine.

Reduce: use spacing threshold 2px → ~30 lines.

Let me now write index.html.

Also loop progress in HUD: update text each render.

Edge: dpr scaling for shadowBlur — shadowBlur is in transformed units? shadowBlur is not affected by transform scale in most browsers? Actually shadowBlur is in device pixels? Per spec shadow offsets are transformed, blur is... Chrome applies transform to shadowBlur? Not certain; fine either way.

Write the code.

One more: "Move the sun slowly down toward the horizon while keeping the composition visible." — check end position visible ✓.

Also stars twinkle periodic with LOOP.

Now code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Horizon — Synthwave</title>
<style>...</style>
</head>
<body>
<canvas id="scene"></canvas>
<div class="crt"></div>
<div class="vignette"></div>
<div class="hud">
  <button id="toggle">Pause</button>
  <button id="restart">Restart</button>
  <span id="clock">0.0s / 14.0s</span>
</div>
<script>...</script>
</body>
</html>
```

CSS: body margin 0 overflow hidden background #05010f; canvas fixed inset 0 w/h 100%; hud buttons neon.

Now JS in detail. I'll write it carefully.

```js
(function(){
const cv = document.getElementById('scene');
const ctx = cv.getContext('2d');
const LOOP = 14.0;
const LINES_PER_LOOP = 10;
let W=0,H=0,dpr=1,horizonY=0,r=0,sunHigh=0,sunLow=0;
let stars=[], ridges=[], sunCv=null, sunSize=0;
let t=0, playing=true, last=0, dirty=true;

function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;let x=Math.imul(a^a>>>15,1|a);x=x+Math.imul(x^x>>>7,61|x)^x;return((x^x>>>14)>>>0)/4294967296}}

function buildStars(){
  const rnd = mulberry32(20240711);
  stars = [];
  for(let i=0;i<170;i++){
    stars.push({x:rnd(), y:rnd(), s:rnd()<0.12?1.8:0.6+rnd()*1.1, tw:1+Math.floor(rnd()*3), ph:rnd()*Math.PI*2, c:rnd()});
  }
}
```
star y01 maps to y = y01*(horizonY-10)+6.

Ridges:

```js
function buildRidges(){
  const rnd = mulberry32(99117);
  const layers = [
    {amp:0.075, fill:'#2b0b57', stroke:'rgba(140,80,255,0.55)', lw:1.5, harm:[...], dip:0.55},
    {amp:0.045, fill:'#140431', stroke:'rgba(255,79,216,0.85)', lw:1.8, ...}
  ];
}
```
Ridge profile: for x01: 
```js
function profile(x, L){
  let v = 0;
  for (let k=0;k<L.h.length;k++){ const {f,a,p} = L.h[k]; v += a*Math.sin(x*Math.PI*2*f + p); }
  v = 0.5 + 0.5*v; // 0..1 normalized-ish (sum a = 1)
  const dip = 0.30 + 0.70*Math.min(1, Math.abs(x-0.5)*2.4);
  return v*dip;
}
```
Build array of 80 points on resize: y = horizonY - amp*H*profile.

Draw ridge path across width.

Sun build:

```js
function buildSun(){
  sunSize = Math.ceil(r*2.9);
  sunCv = document.createElement('canvas');
  sunCv.width = Math.ceil(sunSize*dpr); sunCv.height = same;
  const c = sunCv.getContext('2d');
  c.setTransform(dpr,0,0,dpr,0,0);
  const cx=sunSize/2, cy=sunSize/2;
  // glow
  let g = c.createRadialGradient(cx,cy,r*0.6, cx,cy,r*1.45);
  g.addColorStop(0,'rgba(255,120,180,0.55)'); g.addColorStop(1,'rgba(255,60,150,0)');
  c.fillStyle=g; c.beginPath(); c.arc(cx,cy,r*1.45,0,7); c.fill();
  // disc
  g = c.createLinearGradient(0,cy-r,0,cy+r);
  g.addColorStop(0,'#fff6b8'); g.addColorStop(0.35,'#ffcf5c'); g.addColorStop(0.62,'#ff7a4d'); g.addColorStop(0.85,'#ff2e9a'); g.addColorStop(1,'#c026d3');
  c.fillStyle=g; c.beginPath(); c.arc(cx,cy,r,0,7); c.fill();
  // bands (destination-out)
  c.globalCompositeOperation='destination-out';
  let y = cy - r*0.05, i=0;
  while (y < cy + r){
    const u = (y-(cy-r))/(2*r);
    const bh = 2 + 9*u*u*1.6; // grows
    const gap = 3 + 16*u*u*1.6;
    c.fillRect(0, y, sunSize, bh);
    y += bh + gap; i++;
    if(i>80) break;
  }
  c.globalCompositeOperation='source-over';
}
```
Tune: bands should get thicker/gappier downward. u from ~0.475 to 1.

Hmm at u=0.475: bh = 2+9*0.226*1.6 ≈ 5.3, gap = 3+ 16*.226*1.6 ≈ 9.2. At u=1: bh=2+14.4=16.4, gap=3+25.6=28.6. Reasonable: from y start, number of bands ~ maybe 8. ok.

Main render:

```js
function render(){
  const u = (t % LOOP)/LOOP;
  ...
}
```

Sky:
```js
const sg = ctx.createLinearGradient(0,0,0,horizonY);
sg.addColorStop(0,'#06021a'); ... 
```

Sun position: 
```js
const e = descendEase(u); // 0..1
const cy = sunHigh + (sunLow-sunHigh)*e;
const cx = W/2 + Math.sin(u*Math.PI*2)*W*0.02;
```
descendEase:
```js
function smooth(x){ x=Math.min(1,Math.max(0,x)); return x*x*(3-2*x); }
function descendEase(u){ const D=0.66; return u<D ? smooth(u/D) : 1-smooth((u-D)/(1-D)); }
```

Sun draw: ctx.drawImage(sunCv, cx-sunSize/2, cy-sunSize/2, sunSize, sunSize).

Wait: sunCv contains glow radius 1.45r within sunSize=2.9r ✓.

Sun behind mountains ✓, above horizon ✓.

Horizon glow: 
```js
const hglow = ctx.createLinearGradient(0,horizonY-40,0,horizonY+60);
'rgba(255,60,160,0)' → 'rgba(255,110,190,0.55)' at horizon → transparent
```
Draw over sky+ground after ground fill.

Ground fill:
```js
const gg = ctx.createLinearGradient(0,horizonY,0,H);
gg.addColorStop(0,'#3a0b58'); gg.addColorStop(0.35,'#1d0640'); gg.addColorStop(1,'#08031a');
```

Reflection: as described, composite 'lighter'.

Grid.

Horizon line: bright thin line: fillRect(0,horizonY-1,W,2) with gradient horizontally: center white-cyan bright → edges magenta dim. Use linear gradient x.

CRT overlay CSS handles scanlines over everything (including sun — that's fine/typical).

Wait: requirement "sun broken by horizontal scanline bands" — that's the sun's own bands ✓ plus CRT overlay.

HUD clock updates in render.

Debug API:
```js
window.__synth = { setTime(s){t=s; dirty=true;}, getState(){return {t, playing, sunCY:..., horizonY, u}} };
```
sunCY compute in render, store in var.

Resize handler: compute layout, build stars? stars normalized, keep. rebuild ridges and sun.

layout():
```js
dpr = Math.min(2, window.devicePixelRatio||1);
W = window.innerWidth; H = window.innerHeight;
cv.width = Math.round(W*dpr); cv.height = Math.round(H*dpr);
cv.style.width = W+'px'; cv.style.height = H+'px';
ctx.setTransform(dpr,0,0,dpr,0,0);
horizonY = Math.round(H*0.56);
r = Math.min(W,H)*0.16;
sunHigh = horizonY - r*2.25;
sunLow = horizonY - r*1.18;
buildRidges(); buildSun(); dirty = true;
```
Check on 1200x800: H=800 → horizon 448, r=128, sunHigh=448-288=160, top=32 ✓; sunLow=448-151=297, bottom=425 ✓ (23px above horizon). Mountains amp 0.075*800=60 → peaks up to 60px above horizon at sides; with dip factor 0.30 min at center → center peaks ~18px → doesn't touch sun bottom (23px above) ✓ mostly. Second layer 0.045*800=36, center dip → ~11px ✓.

Reflection rows region: horizonY..H (352px).

Grid: groundH = 352.

Star region above horizon: y = 6 + y01*(horizonY-30).

Now sample verification: use window.__synth.setTime to jump: t=0 screenshot, t=5, t=10 etc. But setTime while playing continues — fine, screenshot right after.

Let's write the file.

Grid code:

```js
function drawGrid(){
  const gH = H - horizonY;
  const K = 1.35;
  const vx = W/2;
  const p = t / LOOP * LINES_PER_LOOP;
  // vertical rays
  ctx.lineWidth = 1.4;
  const step = W/5.5;
  ctx.shadowBlur = 6;
  for(let j=-10;j<=10;j++){
    const xEnd = vx + j*step;
    const g = ctx.createLinearGradient(vx,horizonY,xEnd,H);
    g.addColorStop(0,'rgba(60,240,255,0.15)');
    g.addColorStop(0.5,'rgba(60,240,255,0.55)');
    g.addColorStop(1,'rgba(160,255,255,0.9)');
    ctx.strokeStyle = g; ctx.shadowColor='rgba(60,240,255,0.9)';
    ctx.beginPath(); ctx.moveTo(vx,horizonY+1); ctx.lineTo(xEnd,H); ctx.stroke();
  }
  ctx.shadowBlur = 10; ctx.shadowColor='rgba(255,60,170,0.9)';
  let i = Math.floor(p)+1, prevY = H+10, guard=0;
  while(guard++ < 500){
    const z = i - p;
    const f = K/(K+z);
    const y = horizonY + gH*f;
    if (prevY - y < 2) break;
    prevY = y;
    const lw = 0.8 + 2.6*f;
    const a = 0.25 + 0.75*f;
    ctx.strokeStyle = `rgba(255,62,165,${a.toFixed(3)})`;
    ctx.lineWidth = lw;
    ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke();
    i++;
  }
  ctx.shadowBlur=0;
}
```
Wait prevY logic: first line y close to H (z small). We compare spacing between consecutive lines: y(i) - y(i+1) where y increases as z decreases. i increases → z increases → y decreases. So spacing = y_i - y_{i+1} > 0. prevY starts H+10 (approx first y ≈ H). ok.

Note when p is large (t up to LOOP, p up to 10), i starts at 11.. z = i-p ∈(0,1] ✓ fine.

Loop seamlessness: at u→1, p→10; at u=0 p=0. Lines drawn are a shift-invariant infinite family so visual identical? At p=10: z = i-10 for i=11.. → z ∈ (0,1],[1,2]... same set as p=0: z = i for i=1.. → {1,2,...}? p=0: z={1,2,3,...}; p=10: z = {1,2,3,...} ✓ identical. But drawn set is truncated by spacing threshold: same values → same set ✓. 

Sun descent ease at u=0 and u=1 both 0 ✓ (return to start). Star twinkle sin(2π u * tw + ph): at u=0 and 1 equal ✓. Reflection uses ang = 2π u ✓. Sun x drift sin(2π u) ✓.

Everything periodic with LOOP ✓.

Reflection code:

```js
function drawReflection(cx){
  const gH = H - horizonY;
  const u = (t % LOOP)/LOOP, ang = u*Math.PI*2;
  ctx.save();
  ctx.globalCompositeOperation='lighter';
  // soft wash
  const wg = ctx.createLinearGradient(0,horizonY,0,horizonY+gH*0.6);
  wg.addColorStop(0,'rgba(255,80,170,0.30)');
  wg.addColorStop(0.5,'rgba(190,40,190,0.12)');
  wg.addColorStop(1,'rgba(80,10,120,0)');
  ctx.fillStyle=wg; ctx.fillRect(0,horizonY,W,gH*0.6);
  // streaks
  const rows = Math.max(24, Math.floor(gH/5));
  const rowH = gH/rows;
  const colW = r*3.6;
  for(let i=0;i<rows;i++){
    const d = i/rows;
    const y = horizonY + i*rowH;
    const flick = 0.5+0.5*Math.sin(ang*2 + i*1.9 + Math.sin(i*0.7)*2);
    const wob = 0.5+0.5*Math.sin(ang*3 - i*0.9 + 1.3);
    const nz = 0.5+0.5*Math.sin(i*2.3 + Math.cos(i*0.51)*3);
    let w = colW*(0.35+0.65*nz)*(1-0.35*d)*(0.75+0.35*wob);
    let a = Math.pow(1-d,1.7)*0.85*(0.35+0.65*flick);
    if(d<0.08) a = Math.min(1, a+0.35); // hot near horizon
    ctx.fillStyle = colorAt(d, a);
    ctx.fillRect(cx - w/2, y, w, rowH*0.72);
  }
  ctx.restore();
}
```
colorAt(d,a): stops:
0: [255,224,140], 0.12: [255,150,80], 0.35: [255,79,154], 0.6: [211,41,201], 1: [120,30,160].

Interpolate and return rgba.

But reflection column centered at cx (sun x) ✓; note reflection should stay under sun.

Also maybe reflection should only be in middle region — bars width limited ✓.

Hmm: rows fill entire horizon width wash — that's ground glow, fine ("reflection of the sun's colors on the ground plane").

Draw order in render:
1. sky gradient (0..horizonY) — fill full canvas first? fill rect 0,0,W,H with sky gradient top portion then ground. I'll: fillRect sky for 0..horizonY, ground for horizonY..H.
2. stars (clip above horizon automatically by y range).
3. sun.
4. ridges (2 layers back then front... draw back first then sun? Sun behind mountains: sun before both ridges).
Order: sky → stars → sun → ridge back → ridge front → ground fill? Ground fill after ridges would cover ridge bottoms — ridges sit above horizon so no overlap; but ground fill is below horizon. Fine either order. I'll: sky, stars, sun, ridges, ground, horizon glow, reflection, grid, horizon line.

Wait horizon glow should be over ground and sky near horizon, drawn before reflection ✓.

Ridges drawn before ground: ridge fill goes above horizon only, but their fill path closes along horizon line — I'll close path to horizonY+2 to avoid gaps.

Also the "second sun" caution: reflection has no disc ✓.

Let me write final file now. Also add subtle twinkling done.

Buttons handlers. Also spacebar to toggle pause? Nice extra: keydown ' ' → toggle, 'r' → restart.

Now write.

Also HUD shows time; update in render.

I'll write the file and test.

For ridges path: points array of {x01,y}. Build:
```js
function buildRidges(){
  const rnd = mulberry32(99117);
  const mk=(ampH, harms, dip)=>{
    const h = harms.map(()=>({f: 1+Math.floor(rnd()*4), a:0, p: rnd()*Math.PI*2}));
    // assign amplitudes summing 1
    ...
  };
}
```
Simpler: fixed harmonic frequencies per layer with seeded phases:

```js
function makeRidge(seedAmp, phaseSeed){
  const rnd = mulberry32(phaseSeed);
  const phases = [rnd()*6.28, rnd()*6.28, rnd()*6.28, rnd()*6.28];
  const N = 90, pts = [];
  for(let i=0;i<=N;i++){
    const x = i/N;
    let v = Math.sin(x*Math.PI*2*1.3+phases[0])*0.5
          + Math.sin(x*Math.PI*2*3.1+phases[1])*0.28
          + Math.sin(x*Math.PI*2*6.7+phases[2])*0.14
          + Math.sin(x*Math.PI*2*11.3+phases[3])*0.08;
    v = 0.5 + 0.5*v/1.0; // roughly 0..1
    v = Math.pow(v, 1.3);
    const dip = 0.32 + 0.68*Math.min(1, Math.abs(x-0.5)*2.2);
    pts.push({x, h: v*dip*seedAmp});
  }
  return pts;
}
```
v range: sum of amps=1 → v ∈[-1,1] → 0.5+0.5v ∈ [0,1] ✓.

Draw: moveTo(0, horizonY+2) then for pts lineTo(x*W, horizonY - h*H)... amplitude seedAmp already scaled: h computed as fraction; multiply by ampPx = 0.075*H stored separately: store v (0..1) and use ampPx at draw time (resize-friendly). Also draw right edge then close.

Also stroke top edge with neon: path along pts only.

Store ridges as {v:[...], fill, stroke, lw, ampFactor}.

Ridge drawing:
```js
function drawRidge(rd){
  ctx.beginPath();
  ctx.moveTo(0, horizonY+1);
  for(const p of rd.v) ctx.lineTo(p.x*W, horizonY - p.h*rd.amp*H);
  ctx.lineTo(W, horizonY+1); ctx.closePath();
  ctx.fillStyle = rd.fill; ctx.fill();
  ctx.beginPath();
  rd.v.forEach((p,i)=> i? ctx.lineTo(p.x*W, horizonY-p.h*rd.amp*H) : ctx.moveTo(p.x*W, horizonY-p.h*rd.amp*H));
  ctx.strokeStyle=rd.stroke; ctx.lineWidth=rd.lw; ctx.shadowColor=rd.stroke; ctx.shadowBlur=8; ctx.stroke(); ctx.shadowBlur=0;
}
```

Amp factors: back 0.085, front 0.05.

But back ridge drawn before sun? Sun should be in front of far ridge? Sun behind mountains: draw sun first, then ridges cover sun bottom edges ✓. But far ridge covering sun looks like sun behind mountains — good.

Now the ground fill after ridges covers nothing above horizon ✓.

OK write it.

Let me estimate grid near-horizon line count: spacing threshold 2px, gH=352, f = K/(K+z). y-h = 352*f. Need y(z)-y(z+1) ≥ 2 → 352*K*(1/(K+z) - 1/(K+z+1)) = 352*K/((K+z)(K+z+1)) ≥ 2 → with K=1.35: 475/((1.35+z)(2.35+z)) ≥ 2 → (1.35+z)(2.35+z) ≤ 237 → z² +3.7z +3.17 ≤237 → z ≤ ~13. So ~14 lines drawn. That's few — spacing at bottom large. Hmm only 14 horizontal lines total over ground. That's okay visually? At z=1: y-h = 352*1.35/2.35=203 (mid). z=0: 352 (bottom). z=0.5: 352*1.35/1.85=257. Spacing between consecutive near bottom ~150px — quite sparse! Perspective grids usually have denser lines near viewer... no, near viewer lines are widely spaced (that's perspective ✓). 14 lines with LINES_PER_LOOP=10 means as p advances lines sweep; visible count constant ~14. Seems plausible: at bottom, spacing 150px, next 100, 70... total 352 over 14 lines. Hmm the first line at z∈(0,1] — as p varies, bottom line moves from y=352 (z=0) up to y=203 (z=1), then a new line starts at bottom? No! With continuous set {i-p}, when p crosses integer, lines shift: set of z values is always {…}: z_i = i-p covers all values ≡ -p mod 1. When p: 0.99→1.01, line with z=0.01 (y=347) becomes... at p=1.01, i=2 gives z=0.99 (y=205)? Let's check: p=0.99, i=1: z=0.01 → y=347. p=1.01, i=1: z=-0.01 → excluded? if we start i = floor(p)+1 = 2: z=0.99 → y=205. So the line at y=347 vanished and none appeared at bottom — but that's correct? At p=1.01, is there a line near bottom? z must be >0: nearest is i=2 → z=0.99 → y=205. So the bottom region 205..352 has no lines?! While at p=0.99 lines at 347 and 204. So a line disappears at bottom rather than continuing off-screen. That means lines don't reach the bottom edge — they vanish at y≈? The minimum z drawn: we start i at floor(p)+1 giving z ∈ (0,1]. As p→1⁻, z_min → 0+ → y→352 ✓ bottom. So at p=0.99 z_min=0.01 → y=347 ✓ near bottom. At p=1.01, floor(p)=2, i starts at 3?? floor(1.01)=2 → i=3, z = 3-1.01 = 1.99 → y=... wait I mis-indexed: iStart = floor(p)+1 = 3, z = 3-1.01=1.99. Then min z = 1.99 → y = 352*1.35/3.34 = 143! Big jump: lines at 143, ... and bottom 143..352 empty.

That's wrong. Correct: z_i = i - p for i ∈ ℤ, and we draw those with z > 0 — for i = floor(p)+1: z = floor(p)+1-p ∈ (0,1] ✓. At p=1.01: floor=1, iStart=2, z=2-1.01=0.99 ✓. I said floor(1.01)=1, +1 = 2 ✓ (I mistakenly wrote 2→3). Let me redo: floor(1.01)=1 → iStart=2 → z=0.99 → y = 352*1.35/2.34=204. But at p=0.99: floor=0 → iStart=1 → z=0.01 → y=347.

So across p 0.99→1.01: line set shifts: previously z values {0.01, 1.01, 2.01,...}, after {0.99, 1.99, ...}. So z=0.01 line (at bottom) disappeared and all others shifted by -0.02? No: previously 1.01→ now 0.99: same line continuing ✓ (moved from y=203 to 204? y(1.01)=352*1.35/2.36=202, y(0.99)=352*1.35/2.34=204 — hmm y increased? y = 352*K/(K+z): z decreasing → y increasing → line moves down ✓ correct direction).

But the line at z=0.01/y=347 vanished at p=1: after wrap, nearest line is z=0.99/y=204. So there's a discontinuity: a line at y=347 disappears instantly. The set of lines should be translation-invariant mod spacing: at p=0.99 lines at z ∈ {0.01,1.01,2.01,...}; at p=1.01 (= p=0.01 mod 1) lines at {0.99, 1.99,...} = {0.99, 1.99, 2.99,...}. Compare sets: {0.01,1.01,2.01} vs {0.99,1.99,2.99}: difference of 0.98, not equal! Because p mod 1 differs: p=0.99 vs p=0.01 — those are different phases, so sets differ by phase 0.98 — of course, continuous over time. The wrap happens at p integer: p=0.999 vs p=1.001: sets {0.001, 1.001, ...} and {0.999, 1.999, ...} = shift by 0.998 ≈ ... hmm {0.999,1.999} vs {0.001,1.001}: these differ: is {0.999,1.999,2.999} ≈ {0.001+1? } = {1.001, 2.001, 3.001}? 0.999 vs 1.001: differ by 0.002 ✓ close! So the set after wrap = {0.999, 1.999, 2.999,...} and before = {0.001, 1.001, 2.001, ...}. After: 0.999≈1.001 ✓, 1.999≈2.001 ✓ — matches! And the before-set's element 0.001 (y≈351, bottom) has no counterpart after (after min is 0.999). Wait but after-set 0.999 corresponds to before 1.001, and before 0.001 (bottom line) — after wrap there should be a line near bottom too: is there? after min z = 0.999 → y=204. Before, line at z=0.001 → y=351.

So indeed a line vanishes at the bottom edge. Because I'm truncating at z>0 with i starting at floor(p)+1: the natural infinite set includes negative z too (which map to y > bottom, offscreen). y = horizon + gH*K/(K+z) for z negative → y > horizon+gH = H (below screen) ✓ offscreen. So just include z > z_min where z_min such that y > H: K+z<... y>H requires K/(K+z)>1 → z<0. So include z down to, say, -0.5 (well offscreen, y = horizon + gH*K/(K-0.5) = huge). So start i at floor(p) (giving z ∈ (-0... ]: i=floor(p) → z = floor(p)-p ∈ [-1, 0]) which is offscreen, and lines continue to y>H — but drawing a line at y>H is fine (clipped). However line spacing check: spacing measured in screen px would be weird for offscreen. Simplest: compute y for z from -0.6 upward, skip drawing if y > H (but then near-bottom line at y between ... it's fine: lines with y>H are below screen, invisible; the line that matters crosses screen continuously ✓). And start loop from i0 = floor(p) - 1 to be safe, skip if y >= H, break when spacing < 2 for y < H.

Actually with z ranging over all integers minus p, the visible lines (y ≤ H) are z ≥ 0 exactly. y at z=0 → H exactly (bottom edge). z slightly >0 → y slightly < H ✓. So line at z=0.001 is at y=351 (visible), and after wrap min z (with i0=floor(p)) = floor(p)-p ∈[-1,0]: at p=1.001, floor=1 → z= -0.001 → y = H*K/(K-0.001) slightly > H (just below screen, invisible), next i=2 → z=0.999 → y=204.

Hmm so between y=H and y=204 there's a gap after wrap, whereas before wrap lines at 351 and 203. So a line at 351 disappears crossing the bottom — that's fine! It moved off-screen. But did it? Before wrap at p=0.999, lines: z = 0.001 (y=351) and 1.001 (y=203). Just before, at p=0.99, lines at y(0.01)=347, y(1.01)=202. So the bottom line moves 347→351 ✓ downward toward viewer ✓ and after wrap it's at z=-0.001 → y just below H → continues off screen ✓ then next i: at p=1.05: z for i=2 is 0.95 → y=210. So sequence: bottom line disappears at y=352 and lines above continue moving down. But hold on — the line at z=1.001 (y=203) after wrap becomes z=0.999 (y=204) ✓ continuous, and it continues down to 351 over the next cycle... and meanwhile what new line appears at top? At p=1.001 the highest drawn... there's no top appearance issue because the family is infinite: as p increases, all lines move down, and the topmost visible line emerges from the horizon region only when spacing > 2 threshold — a line crosses the threshold from invisible (spacing<2) to visible — but our break stops drawing at spacing<2, and next frame one more line becomes >2 spacing and gets drawn — appearing at ~2px below horizon with alpha near 0.35... slight pop but at 2px near horizon it's imperceptible.

Wait but is it? The line appears at y where spacing=2: from formula y-h where spacing 2: solve 352*1.35/((1.35+z)(2.35+z)) = 2 → z ≈ 13 → y-h = 352*1.35/14.35 = 33px below horizon. It appears at 33px below horizon with alpha 0.25+0.75*f, f = 1.35/14.35 = 0.094 → alpha 0.32, lw 1.05. Appearing at 0.32 alpha at 33px below horizon — a visible pop of one line. Hmm. Better: don't break on spacing; instead cap by count (e.g., 120 lines) and let alpha fade with distance to horizon: alpha = base * smoothstep so topmost lines fade to 0. Then appearance happens where alpha≈0 → invisible ✓.

So: draw lines while count < 150 and spacing > 0.6px, with alpha = (0.25+0.75f) * fade, fade = clamp((H - y)/(gH*0.12)? no — fade near horizon: fade = smoothstep(0, 24, y-horizonY) so lines fade in over first 24px below horizon. And also lines extremely close to horizon crowd: with spacing threshold 0.6 they'd be dense: z where spacing 0.6: (1.35+z)(2.35+z) = 352*1.35/0.6 = 792 → z² ≈ 792 → z≈28 → y-h = 4.6px. So lines from 4.6px below horizon down: count ≈ z from 0..28 ≈ 28 lines. Fine, and the near-horizon ones are faded by the 24px fade. Line entering at y-h=4.6px has fade≈0 ✓ smooth.

Count: 28 lines + rays 21 = 50 strokes with shadowBlur → fine.

LINES_PER_LOOP: lines pass bottom: with p advancing LINES per loop, a full line-cycle takes LOOP/LINES = 1.4s. Visually near bottom each line traverses y 203→352 in the time z goes 1→0: z decreases at rate LINES/LOOP = 0.714/s → 1.4s for that stretch — decent forward motion. Maybe increase to 12 lines/loop (1.17s per line). I'll use 12 for a faster feel. Let's keep 10... forward travel should be noticeable; 12. Eh, either. I'll go 11? Choose 12.

Sun descent: over 0.66*14 = 9.2s down, 4.8s up.

Now HUD clock: show `${t.toFixed(1)}s / 14.0s`.

Write file.

Also CSS overlay scanlines over canvas: repeating-linear-gradient every 3px with rgba(0,0,0,0.14)? That might darken; use 0.10. Vignette: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55)).

Buttons: font-family monospace, letter-spacing, background rgba(10,0,30,0.6), border 1px solid #ff3ea5, color #ffd6f0, padding 8px 14px, border-radius 4px, hover glow. Active state color.

Also add small title label "NEON HORIZON" maybe. Keep.

Write the code now.

Then test: open file, screenshot, check console errors, use setTime to sample, click buttons.

Let me write the file.

Now let me write the complete file.