commit b68e215b4ec74e3f9d8e9151b3498711acab3daa · dunkirk.sh/aoc-2025

+127 -18

vis/08/generate.ts

···

       201
        
       			max-width: 800px;

     

       202
        
       			border-radius: 4px;

     

       203
        
       		}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       204
        
       		.control-row {

     

       205
        
       			display: flex;

     

       206
        
       			gap: 15px;

     

       207
        
       			align-items: center;

     

       208
       -
       			margin-bottom: 10px;

     

       209
        
       			flex-wrap: wrap;

     

       210
        
       			justify-content: center;

     

       211
        
       		}

     
···

       243
        
       			text-align: center;

     

       244
        
       			font-size: 13px;

     

       245
        
       			color: #a6adc8;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       246
        
       		}

     

       247
        
       		.legend {

     

       248
        
       			display: flex;

     
···

       320
        
       					<button id="next">Next →</button>

     

       321
        
       					<button id="reset">↺ Reset</button>

     

       322
        
       				</div>

     

       323
       -
       				<div class="control-row">

     

       324
       -
       					<label for="speed">Speed:</label>

     

       325
       -
       					<input type="range" id="speed" min="0" max="1000" value="900" step="5">

     

       326
       -
       					<span class="info" id="stepInfo">Step: 0 / ${stages.length - 1}</span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       327
        
       				</div>

     

       328
        
       				<div class="legend">

     

       329
        
       					<div class="legend-item"><div class="legend-box junction"></div> Isolated Junction (small)</div>

     
···

       686
        
       		const prevBtn = document.getElementById('prev');

     

       687
        
       		const nextBtn = document.getElementById('next');

     

       688
        
       		const resetBtn = document.getElementById('reset');

     

       689
       -
       		const speedSlider = document.getElementById('speed');

     

       690
       -
       		const stepInfo = document.getElementById('stepInfo');

     

       691
        
       		const statsInfo = document.getElementById('statsInfo');

     

       692
        
       

     

       693
        
       		function updateUI() {

     

       694
        
       			const stage = stages[currentStage];

     

       695
       -
       			stepInfo.textContent = \`Step: \${currentStage} / \${stages.length - 1}\`;

     

       696
        
       			

     

       697
        
       			const part1Result = stages[Math.min(1000, stages.length - 1)].product;

     

       698
        
       			const part2Result = stage.part2Product || 0;

     
···

       702
        
       			prevBtn.disabled = currentStage === 0;

     

       703
        
       			nextBtn.disabled = currentStage === stages.length - 1;

     

       704
        
       			

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       705
        
       			updateConnections(stage);

     

       706
        
       		}

     

       707
        
       

     
···

       713
        
       		prevBtn.addEventListener('click', () => goToStage(currentStage - 1));

     

       714
        
       		nextBtn.addEventListener('click', () => goToStage(currentStage + 1));

     

       715
        
       		resetBtn.addEventListener('click', () => goToStage(0));

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       716
        
       

     

       717
        
       		playBtn.addEventListener('click', () => {

     

       718
        
       			isPlaying = !isPlaying;

     
···

       742
        
       		function animate(time) {

     

       743
        
       			requestAnimationFrame(animate);

     

       744
        
       

     

       745
       -
       			// Auto-advance if playing

     

       746
        
       			if (isPlaying) {

     

       747
       -
       				const speed = 1000 - parseInt(speedSlider.value);

     

       748
       -
       				if (time - lastTime > speed) {

     

       749
       -
       					if (currentStage < stages.length - 1) {

     

       750
       -
       						goToStage(currentStage + 1);

     

       751
       -
       					} else {

     

       752
       -
       						isPlaying = false;

     

       753
       -
       						playBtn.textContent = '▶ Play';

     

       754
       -
       					}

     

       755
       -
       					lastTime = time;

     

       756
        
       				}

     

       757
        
       			}

     

       758

···

       201
        
       			max-width: 800px;

     

       202
        
       			border-radius: 4px;

     

       203
        
       		}

     

       204
       +
       		.timeline-container {

     

       205
       +
       			background: rgba(17, 17, 27, 0.9);

     

       206
       +
       			border: 1px solid #313244;

     

       207
       +
       			padding: 20px;

     

       208
       +
       			margin: 10px auto;

     

       209
       +
       			max-width: 800px;

     

       210
       +
       			border-radius: 4px;

     

       211
       +
       		}

     

       212
       +
       		.timeline-label {

     

       213
       +
       			color: #a6adc8;

     

       214
       +
       			font-size: 12px;

     

       215
       +
       			margin-bottom: 10px;

     

       216
       +
       			display: flex;

     

       217
       +
       			justify-content: space-between;

     

       218
       +
       			align-items: center;

     

       219
       +
       		}

     

       220
       +
       		.timeline-markers {

     

       221
       +
       			position: relative;

     

       222
       +
       			margin-top: 8px;

     

       223
       +
       			font-size: 11px;

     

       224
       +
       			color: #6c7086;

     

       225
       +
       			height: 30px;

     

       226
       +
       		}

     

       227
       +
       		.timeline-marker {

     

       228
       +
       			position: absolute;

     

       229
       +
       			text-align: center;

     

       230
       +
       			transform: translateX(-50%);

     

       231
       +
       			white-space: nowrap;

     

       232
       +
       		}

     

       233
       +
       		.timeline-marker.start {

     

       234
       +
       			left: 0%;

     

       235
       +
       			transform: translateX(0);

     

       236
       +
       		}

     

       237
       +
       		.timeline-marker.end {

     

       238
       +
       			right: 0%;

     

       239
       +
       			transform: translateX(0);

     

       240
       +
       			text-align: right;

     

       241
       +
       		}

     

       242
       +
       		.timeline-marker.highlight {

     

       243
       +
       			color: #a6e3a1;

     

       244
       +
       			font-weight: bold;

     

       245
       +
       		}

     

       246
       +
       		.timeline-slider {

     

       247
       +
       			width: 100% !important;

     

       248
       +
       			-webkit-appearance: none;

     

       249
       +
       			appearance: none;

     

       250
       +
       			height: 12px;

     

       251
       +
       			background: linear-gradient(to right, #313244 0%, #313244 100%);

     

       252
       +
       			outline: none;

     

       253
       +
       			border-radius: 6px;

     

       254
       +
       			cursor: pointer;

     

       255
       +
       			position: relative;

     

       256
       +
       		}

     

       257
       +
       		.timeline-slider::-webkit-slider-thumb {

     

       258
       +
       			-webkit-appearance: none;

     

       259
       +
       			appearance: none;

     

       260
       +
       			width: 24px;

     

       261
       +
       			height: 24px;

     

       262
       +
       			background: #a6e3a1;

     

       263
       +
       			cursor: grab;

     

       264
       +
       			border-radius: 50%;

     

       265
       +
       			border: 3px solid #11111b;

     

       266
       +
       			box-shadow: 0 2px 8px rgba(166, 227, 161, 0.4);

     

       267
       +
       			transition: all 0.2s ease;

     

       268
       +
       		}

     

       269
       +
       		.timeline-slider::-moz-range-thumb {

     

       270
       +
       			width: 24px;

     

       271
       +
       			height: 24px;

     

       272
       +
       			background: #a6e3a1;

     

       273
       +
       			cursor: grab;

     

       274
       +
       			border-radius: 50%;

     

       275
       +
       			border: 3px solid #11111b;

     

       276
       +
       			box-shadow: 0 2px 8px rgba(166, 227, 161, 0.4);

     

       277
       +
       			transition: all 0.2s ease;

     

       278
       +
       		}

     

       279
       +
       		.timeline-slider::-webkit-slider-thumb:hover {

     

       280
       +
       			background: #b4e7b9;

     

       281
       +
       			transform: scale(1.1);

     

       282
       +
       			box-shadow: 0 4px 12px rgba(166, 227, 161, 0.6);

     

       283
       +
       		}

     

       284
       +
       		.timeline-slider::-moz-range-thumb:hover {

     

       285
       +
       			background: #b4e7b9;

     

       286
       +
       			transform: scale(1.1);

     

       287
       +
       			box-shadow: 0 4px 12px rgba(166, 227, 161, 0.6);

     

       288
       +
       		}

     

       289
       +
       		.timeline-slider:active::-webkit-slider-thumb {

     

       290
       +
       			cursor: grabbing;

     

       291
       +
       			transform: scale(0.95);

     

       292
       +
       		}

     

       293
       +
       		.timeline-slider:active::-moz-range-thumb {

     

       294
       +
       			cursor: grabbing;

     

       295
       +
       			transform: scale(0.95);

     

       296
       +
       		}

     

       297
        
       		.control-row {

     

       298
        
       			display: flex;

     

       299
        
       			gap: 15px;

     

       300
        
       			align-items: center;

     

       301
       +
       			margin-bottom: -1rem;

     

       302
        
       			flex-wrap: wrap;

     

       303
        
       			justify-content: center;

     

       304
        
       		}

     
···

       336
        
       			text-align: center;

     

       337
        
       			font-size: 13px;

     

       338
        
       			color: #a6adc8;

     

       339
       +
       			position: fixed;

     

       340
       +
       			bottom: 20px;

     

       341
       +
       			left: 50%;

     

       342
       +
       			transform: translateX(-50%);

     

       343
       +
       			z-index: 1;

     

       344
        
       		}

     

       345
        
       		.legend {

     

       346
        
       			display: flex;

     
···

       418
        
       					<button id="next">Next →</button>

     

       419
        
       					<button id="reset">↺ Reset</button>

     

       420
        
       				</div>

     

       421
       +
       				<div class="timeline-label">

     

       422
       +
       					<span>Timeline</span>

     

       423
       +
       					<span id="timelineStep">Step 0 of ${stages.length - 1}</span>

     

       424
       +
       				</div>

     

       425
       +
       				<input type="range" id="timeline" class="timeline-slider" min="0" max="${stages.length - 1}" value="0" step="1">

     

       426
       +
       				<div class="timeline-markers">

     

       427
       +
       					<div class="timeline-marker start">Start<br>0</div>

     

       428
       +
       					<div class="timeline-marker highlight" style="left: ${(1000 / (stages.length - 1)) * 100}%;">Part 1<br>1000</div>

     

       429
       +
       					<div class="timeline-marker highlight end">Part 2<br>${stages.length - 1}</div>

     

       430
        
       				</div>

     

       431
        
       				<div class="legend">

     

       432
        
       					<div class="legend-item"><div class="legend-box junction"></div> Isolated Junction (small)</div>

     
···

       789
        
       		const prevBtn = document.getElementById('prev');

     

       790
        
       		const nextBtn = document.getElementById('next');

     

       791
        
       		const resetBtn = document.getElementById('reset');

     

       792
       +
       		const timelineSlider = document.getElementById('timeline');

     

       793
       +
       		const timelineStep = document.getElementById('timelineStep');

     

       794
        
       		const statsInfo = document.getElementById('statsInfo');

     

       795
        
       

     

       796
        
       		function updateUI() {

     

       797
        
       			const stage = stages[currentStage];

     

       798
       +
       			timelineStep.textContent = \`Step \${currentStage} of \${stages.length - 1}\`;

     

       799
        
       			

     

       800
        
       			const part1Result = stages[Math.min(1000, stages.length - 1)].product;

     

       801
        
       			const part2Result = stage.part2Product || 0;

     
···

       805
        
       			prevBtn.disabled = currentStage === 0;

     

       806
        
       			nextBtn.disabled = currentStage === stages.length - 1;

     

       807
        
       			

     

       808
       +
       			// Update timeline slider and gradient

     

       809
       +
       			timelineSlider.value = currentStage;

     

       810
       +
       			const percent = (currentStage / (stages.length - 1)) * 100;

     

       811
       +
       			timelineSlider.style.background = \`linear-gradient(to right, #a6e3a1 0%, #a6e3a1 \${percent}%, #313244 \${percent}%, #313244 100%)\`;

     

       812
       +
       			

     

       813
        
       			updateConnections(stage);

     

       814
        
       		}

     

       815
        
       

     
···

       821
        
       		prevBtn.addEventListener('click', () => goToStage(currentStage - 1));

     

       822
        
       		nextBtn.addEventListener('click', () => goToStage(currentStage + 1));

     

       823
        
       		resetBtn.addEventListener('click', () => goToStage(0));

     

       824
       +
       

     

       825
       +
       		// Timeline slider scrubbing

     

       826
       +
       		timelineSlider.addEventListener('input', (e) => {

     

       827
       +
       			goToStage(parseInt(e.target.value));

     

       828
       +
       		});

     

       829
        
       

     

       830
        
       		playBtn.addEventListener('click', () => {

     

       831
        
       			isPlaying = !isPlaying;

     
···

       855
        
       		function animate(time) {

     

       856
        
       			requestAnimationFrame(animate);

     

       857
        
       

     

       858
       +
       			// Auto-advance if playing (zero delay - advance every frame)

     

       859
        
       			if (isPlaying) {

     

       860
       +
       				if (currentStage < stages.length - 1) {

     

       861
       +
       					goToStage(currentStage + 1);

     

       862
       +
       				} else {

     

       863
       +
       					isPlaying = false;

     

       864
       +
       					playBtn.textContent = '▶ Play';

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       865
        
       				}

     

       866
        
       			}

     

       867

+127 -18

vis/08/index.html

···

       62
        
       			max-width: 800px;

     

       63
        
       			border-radius: 4px;

     

       64
        
       		}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       65
        
       		.control-row {

     

       66
        
       			display: flex;

     

       67
        
       			gap: 15px;

     

       68
        
       			align-items: center;

     

       69
       -
       			margin-bottom: 10px;

     

       70
        
       			flex-wrap: wrap;

     

       71
        
       			justify-content: center;

     

       72
        
       		}

     
···

       104
        
       			text-align: center;

     

       105
        
       			font-size: 13px;

     

       106
        
       			color: #a6adc8;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       107
        
       		}

     

       108
        
       		.legend {

     

       109
        
       			display: flex;

     
···

       181
        
       					<button id="next">Next →</button>

     

       182
        
       					<button id="reset">↺ Reset</button>

     

       183
        
       				</div>

     

       184
       -
       				<div class="control-row">

     

       185
       -
       					<label for="speed">Speed:</label>

     

       186
       -
       					<input type="range" id="speed" min="0" max="1000" value="900" step="5">

     

       187
       -
       					<span class="info" id="stepInfo">Step: 0 / 7845</span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       188
        
       				</div>

     

       189
        
       				<div class="legend">

     

       190
        
       					<div class="legend-item"><div class="legend-box junction"></div> Isolated Junction (small)</div>

     
···

       547
        
       		const prevBtn = document.getElementById('prev');

     

       548
        
       		const nextBtn = document.getElementById('next');

     

       549
        
       		const resetBtn = document.getElementById('reset');

     

       550
       -
       		const speedSlider = document.getElementById('speed');

     

       551
       -
       		const stepInfo = document.getElementById('stepInfo');

     

       552
        
       		const statsInfo = document.getElementById('statsInfo');

     

       553
        
       

     

       554
        
       		function updateUI() {

     

       555
        
       			const stage = stages[currentStage];

     

       556
       -
       			stepInfo.textContent = `Step: ${currentStage} / ${stages.length - 1}`;

     

       557
        
       			

     

       558
        
       			const part1Result = stages[Math.min(1000, stages.length - 1)].product;

     

       559
        
       			const part2Result = stage.part2Product || 0;

     
···

       563
        
       			prevBtn.disabled = currentStage === 0;

     

       564
        
       			nextBtn.disabled = currentStage === stages.length - 1;

     

       565
        
       			

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       566
        
       			updateConnections(stage);

     

       567
        
       		}

     

       568
        
       

     
···

       574
        
       		prevBtn.addEventListener('click', () => goToStage(currentStage - 1));

     

       575
        
       		nextBtn.addEventListener('click', () => goToStage(currentStage + 1));

     

       576
        
       		resetBtn.addEventListener('click', () => goToStage(0));

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       577
        
       

     

       578
        
       		playBtn.addEventListener('click', () => {

     

       579
        
       			isPlaying = !isPlaying;

     
···

       603
        
       		function animate(time) {

     

       604
        
       			requestAnimationFrame(animate);

     

       605
        
       

     

       606
       -
       			// Auto-advance if playing

     

       607
        
       			if (isPlaying) {

     

       608
       -
       				const speed = 1000 - parseInt(speedSlider.value);

     

       609
       -
       				if (time - lastTime > speed) {

     

       610
       -
       					if (currentStage < stages.length - 1) {

     

       611
       -
       						goToStage(currentStage + 1);

     

       612
       -
       					} else {

     

       613
       -
       						isPlaying = false;

     

       614
       -
       						playBtn.textContent = '▶ Play';

     

       615
       -
       					}

     

       616
       -
       					lastTime = time;

     

       617
        
       				}

     

       618
        
       			}

     

       619

···

       62
        
       			max-width: 800px;

     

       63
        
       			border-radius: 4px;

     

       64
        
       		}

     

       65
       +
       		.timeline-container {

     

       66
       +
       			background: rgba(17, 17, 27, 0.9);

     

       67
       +
       			border: 1px solid #313244;

     

       68
       +
       			padding: 20px;

     

       69
       +
       			margin: 10px auto;

     

       70
       +
       			max-width: 800px;

     

       71
       +
       			border-radius: 4px;

     

       72
       +
       		}

     

       73
       +
       		.timeline-label {

     

       74
       +
       			color: #a6adc8;

     

       75
       +
       			font-size: 12px;

     

       76
       +
       			margin-bottom: 10px;

     

       77
       +
       			display: flex;

     

       78
       +
       			justify-content: space-between;

     

       79
       +
       			align-items: center;

     

       80
       +
       		}

     

       81
       +
       		.timeline-markers {

     

       82
       +
       			position: relative;

     

       83
       +
       			margin-top: 8px;

     

       84
       +
       			font-size: 11px;

     

       85
       +
       			color: #6c7086;

     

       86
       +
       			height: 30px;

     

       87
       +
       		}

     

       88
       +
       		.timeline-marker {

     

       89
       +
       			position: absolute;

     

       90
       +
       			text-align: center;

     

       91
       +
       			transform: translateX(-50%);

     

       92
       +
       			white-space: nowrap;

     

       93
       +
       		}

     

       94
       +
       		.timeline-marker.start {

     

       95
       +
       			left: 0%;

     

       96
       +
       			transform: translateX(0);

     

       97
       +
       		}

     

       98
       +
       		.timeline-marker.end {

     

       99
       +
       			right: 0%;

     

       100
       +
       			transform: translateX(0);

     

       101
       +
       			text-align: right;

     

       102
       +
       		}

     

       103
       +
       		.timeline-marker.highlight {

     

       104
       +
       			color: #a6e3a1;

     

       105
       +
       			font-weight: bold;

     

       106
       +
       		}

     

       107
       +
       		.timeline-slider {

     

       108
       +
       			width: 100% !important;

     

       109
       +
       			-webkit-appearance: none;

     

       110
       +
       			appearance: none;

     

       111
       +
       			height: 12px;

     

       112
       +
       			background: linear-gradient(to right, #313244 0%, #313244 100%);

     

       113
       +
       			outline: none;

     

       114
       +
       			border-radius: 6px;

     

       115
       +
       			cursor: pointer;

     

       116
       +
       			position: relative;

     

       117
       +
       		}

     

       118
       +
       		.timeline-slider::-webkit-slider-thumb {

     

       119
       +
       			-webkit-appearance: none;

     

       120
       +
       			appearance: none;

     

       121
       +
       			width: 24px;

     

       122
       +
       			height: 24px;

     

       123
       +
       			background: #a6e3a1;

     

       124
       +
       			cursor: grab;

     

       125
       +
       			border-radius: 50%;

     

       126
       +
       			border: 3px solid #11111b;

     

       127
       +
       			box-shadow: 0 2px 8px rgba(166, 227, 161, 0.4);

     

       128
       +
       			transition: all 0.2s ease;

     

       129
       +
       		}

     

       130
       +
       		.timeline-slider::-moz-range-thumb {

     

       131
       +
       			width: 24px;

     

       132
       +
       			height: 24px;

     

       133
       +
       			background: #a6e3a1;

     

       134
       +
       			cursor: grab;

     

       135
       +
       			border-radius: 50%;

     

       136
       +
       			border: 3px solid #11111b;

     

       137
       +
       			box-shadow: 0 2px 8px rgba(166, 227, 161, 0.4);

     

       138
       +
       			transition: all 0.2s ease;

     

       139
       +
       		}

     

       140
       +
       		.timeline-slider::-webkit-slider-thumb:hover {

     

       141
       +
       			background: #b4e7b9;

     

       142
       +
       			transform: scale(1.1);

     

       143
       +
       			box-shadow: 0 4px 12px rgba(166, 227, 161, 0.6);

     

       144
       +
       		}

     

       145
       +
       		.timeline-slider::-moz-range-thumb:hover {

     

       146
       +
       			background: #b4e7b9;

     

       147
       +
       			transform: scale(1.1);

     

       148
       +
       			box-shadow: 0 4px 12px rgba(166, 227, 161, 0.6);

     

       149
       +
       		}

     

       150
       +
       		.timeline-slider:active::-webkit-slider-thumb {

     

       151
       +
       			cursor: grabbing;

     

       152
       +
       			transform: scale(0.95);

     

       153
       +
       		}

     

       154
       +
       		.timeline-slider:active::-moz-range-thumb {

     

       155
       +
       			cursor: grabbing;

     

       156
       +
       			transform: scale(0.95);

     

       157
       +
       		}

     

       158
        
       		.control-row {

     

       159
        
       			display: flex;

     

       160
        
       			gap: 15px;

     

       161
        
       			align-items: center;

     

       162
       +
       			margin-bottom: -1rem;

     

       163
        
       			flex-wrap: wrap;

     

       164
        
       			justify-content: center;

     

       165
        
       		}

     
···

       197
        
       			text-align: center;

     

       198
        
       			font-size: 13px;

     

       199
        
       			color: #a6adc8;

     

       200
       +
       			position: fixed;

     

       201
       +
       			bottom: 20px;

     

       202
       +
       			left: 50%;

     

       203
       +
       			transform: translateX(-50%);

     

       204
       +
       			z-index: 1;

     

       205
        
       		}

     

       206
        
       		.legend {

     

       207
        
       			display: flex;

     
···

       279
        
       					<button id="next">Next →</button>

     

       280
        
       					<button id="reset">↺ Reset</button>

     

       281
        
       				</div>

     

       282
       +
       				<div class="timeline-label">

     

       283
       +
       					<span>Timeline</span>

     

       284
       +
       					<span id="timelineStep">Step 0 of 7845</span>

     

       285
       +
       				</div>

     

       286
       +
       				<input type="range" id="timeline" class="timeline-slider" min="0" max="7845" value="0" step="1">

     

       287
       +
       				<div class="timeline-markers">

     

       288
       +
       					<div class="timeline-marker start">Start<br>0</div>

     

       289
       +
       					<div class="timeline-marker highlight" style="left: 12.746972594008923%;">Part 1<br>1000</div>

     

       290
       +
       					<div class="timeline-marker highlight end">Part 2<br>7845</div>

     

       291
        
       				</div>

     

       292
        
       				<div class="legend">

     

       293
        
       					<div class="legend-item"><div class="legend-box junction"></div> Isolated Junction (small)</div>

     
···

       650
        
       		const prevBtn = document.getElementById('prev');

     

       651
        
       		const nextBtn = document.getElementById('next');

     

       652
        
       		const resetBtn = document.getElementById('reset');

     

       653
       +
       		const timelineSlider = document.getElementById('timeline');

     

       654
       +
       		const timelineStep = document.getElementById('timelineStep');

     

       655
        
       		const statsInfo = document.getElementById('statsInfo');

     

       656
        
       

     

       657
        
       		function updateUI() {

     

       658
        
       			const stage = stages[currentStage];

     

       659
       +
       			timelineStep.textContent = `Step ${currentStage} of ${stages.length - 1}`;

     

       660
        
       			

     

       661
        
       			const part1Result = stages[Math.min(1000, stages.length - 1)].product;

     

       662
        
       			const part2Result = stage.part2Product || 0;

     
···

       666
        
       			prevBtn.disabled = currentStage === 0;

     

       667
        
       			nextBtn.disabled = currentStage === stages.length - 1;

     

       668
        
       			

     

       669
       +
       			// Update timeline slider and gradient

     

       670
       +
       			timelineSlider.value = currentStage;

     

       671
       +
       			const percent = (currentStage / (stages.length - 1)) * 100;

     

       672
       +
       			timelineSlider.style.background = `linear-gradient(to right, #a6e3a1 0%, #a6e3a1 ${percent}%, #313244 ${percent}%, #313244 100%)`;

     

       673
       +
       			

     

       674
        
       			updateConnections(stage);

     

       675
        
       		}

     

       676
        
       

     
···

       682
        
       		prevBtn.addEventListener('click', () => goToStage(currentStage - 1));

     

       683
        
       		nextBtn.addEventListener('click', () => goToStage(currentStage + 1));

     

       684
        
       		resetBtn.addEventListener('click', () => goToStage(0));

     

       685
       +
       

     

       686
       +
       		// Timeline slider scrubbing

     

       687
       +
       		timelineSlider.addEventListener('input', (e) => {

     

       688
       +
       			goToStage(parseInt(e.target.value));

     

       689
       +
       		});

     

       690
        
       

     

       691
        
       		playBtn.addEventListener('click', () => {

     

       692
        
       			isPlaying = !isPlaying;

     
···

       716
        
       		function animate(time) {

     

       717
        
       			requestAnimationFrame(animate);

     

       718
        
       

     

       719
       +
       			// Auto-advance if playing (zero delay - advance every frame)

     

       720
        
       			if (isPlaying) {

     

       721
       +
       				if (currentStage < stages.length - 1) {

     

       722
       +
       					goToStage(currentStage + 1);

     

       723
       +
       				} else {

     

       724
       +
       					isPlaying = false;

     

       725
       +
       					playBtn.textContent = '▶ Play';

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       726
        
       				}

     

       727
        
       			}

     

       728