<!--
╔═══════════════════════════════════════════════════════════════════════════════════╗
║                                                                                                    ║
║   ███╗   ███╗███████╗███╗   ███╗  ██████╗  ██████╗ ██╗   ██╗                              ║
║   ████╗ ████║██╔════╝████╗ ████║██╔═══██╗██╔══██╗╚██╗ ██╔╝                              ║
║   ██╔████╔██║█████╗  ██╔████╔██║██║   ██║██████╔╝ ╚████╔╝                                ║
║   ██║╚██╔╝██║██╔══╝  ██║╚██╔╝██║██║   ██║██╔══██╗  ╚██╔╝                                 ║
║   ██║ ╚═╝ ██║███████╗██║ ╚═╝ ██║╚██████╔╝██║  ██║   ██║                                   ║
║   ╚═╝     ╚═╝╚══════╝╚═╝     ╚═╝ ╚═════╝ ╚═╝   ╚═╝   ╚═╝                                    ║
║                                                                                                    ║
║   ██╗      ██████╗ ███████╗███████╗    ██████╗ ██╗   ██╗    ███████╗██████╗             ║
║   ██║     ██╔═══██╗██╔════╝██╔════╝    ██╔══██╗╚██╗ ██╔╝    ██╔════╝██╔══██╗           ║
║   ██║     ██║   ██║███████╗███████╗    ██████╔╝ ╚████╔╝     █████╗  ██████╔╝            ║
║   ██║     ██║   ██║╚════██║╚════██║    ██╔══██╗  ╚██╔╝       ██╔══╝  ██╔═══╝             ║
║  ███████╗╚██████╔╝███████║███████║   ██████╔╝   ██║         ███████╗██║                 ║
║  ╚══════╝ ╚═════╝ ╚══════╝╚══════╝    ╚═════╝    ╚═╝        ╚══════ ╚═╝                  ║
║                                                                                                     ║
║   ─────────────────────────────────────────────────────────────────────────          ║
║                                                                                                     ║
║   A collection of 250 Bitcoin Ordinals exploring memory as an ephemeral                             ║
║   phenomenon through deterministic visual degradation.                                              ║
║                                                                                                     ║
║   • 27 personal photographs - special memories inscribed on-chain                                   ║
║   • 21 dithering algorithms - neurology of mnemonic corruption                                      ║
║   • 35 curated color palettes - subjective perceptions of the past                                  ║
║   • 100 years of evolution calculed in Bitcoin blocks - from 3×3 to 32×32 pixels toward oblivion    ║
║                                                                                                     ║
║   The paradox: immutable memory on blockchain, destined to disappear.                               ║
║   Dithering as metaphor for neural corruption of memory.                                            ║
║   Each algorithm represents a different "way of remembering incorrectly".                           ║
║                                                                                                     ║
║   Compressionism: The art of compression as neural expression.                                      ║
║                                                                                                     ║
║                                                                                                     ║
║   Artist: Elia Pieraccini (@E_Pieraccini_)                                                          ║
║   Year: 2026                                                                                        ║
║                                                                                                     ║
╚════════════════════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<html>
<head>
	<title>Memory Loss by EP</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<style>
		@font-face {
			font-family: 'RecursiveFont';
			src: url('/content/74d8b14b61735bb0d738108ea9a9530406ffcbdd4b65a4206e0cfbc1ac1500e7i0') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			font-family: 'RecursiveFont', monospace;
			cursor: none !important;
		}

		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: #000000;
			font-family: 'RecursiveFont', monospace;
		}

		#custom-cursor {
			position: fixed;
			width: 12px;
			height: 12px;
			pointer-events: none;
			z-index: 10000;
			image-rendering: pixelated;
			image-rendering: -moz-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			transition: background-color 0.3s ease;
			background-color: #FFFFFF;
			opacity: 1;
		}

		#container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#content-canvas {
			image-rendering: -webkit-optimize-contrast;
			image-rendering: -moz-crisp-edges;
			image-rendering: pixelated;
			-ms-interpolation-mode: nearest-neighbor;
		}

		#image-container {
			max-width: 95%;
			max-height: 95%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#content-image {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		#info-menu {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.95);
			display: none;
			z-index: 9999;
			overflow-y: auto;
			font-family: 'RecursiveFont', monospace;
		}

		#info-menu.active {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10vh 10vw;
		}

		.menu-header {
			width: 100%;
			max-width: 80vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 3vh;
		}

		.menu-title {
			font-size: clamp(1.2rem, 4vw, 2.5rem);
			font-weight: bold;
			letter-spacing: 0.05em;
			word-break: break-word;
			flex: 1;
			font-family: 'RecursiveFont', monospace;
		}

		.close-button {
			font-size: clamp(1.5rem, 5vw, 3rem);
			cursor: pointer;
			line-height: 1;
			padding: 0.5vh 1vw;
			transition: transform 0.2s;
			flex-shrink: 0;
			font-family: 'RecursiveFont', monospace;
		}

		.close-button:hover {
			transform: scale(1.2);
		}

		.tab-container {
			width: 100%;
			max-width: 80vw;
			display: flex;
			gap: 2vw;
			margin-bottom: 3vh;
			border-bottom-width: 0.3vh;
			border-bottom-style: solid;
		}

		.tab-button {
			flex: 1;
			padding: 2vh 0;
			font-size: clamp(0.9rem, 3vw, 1.8rem);
			background: none;
			border: none;
			cursor: pointer;
			transition: all 0.3s;
			position: relative;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: 'RecursiveFont', monospace;
		}

		.tab-button.active::after {
			content: '';
			position: absolute;
			bottom: -0.3vh;
			left: 0;
			width: 100%;
			height: 0.4vh;
		}

		.tab-content {
			display: none;
			width: 100%;
			max-width: 80vw;
			animation: fadeIn 0.3s;
			min-height: 60vh;
		}

		.tab-content.active {
			display: block;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(1vh);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.metadata-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 25vw), 1fr));
			gap: 3vh 2vw;
			width: 100%;
		}

		.metadata-item {
			padding: 2vh 2vw;
			border-radius: 1vh;
			border-width: 0.2vh;
			border-style: solid;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		.metadata-label {
			font-size: clamp(0.7rem, 2.5vw, 1.2rem);
			opacity: 0.7;
			margin-bottom: 1vh;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			word-break: break-word;
			hyphens: auto;
			font-family: 'RecursiveFont', monospace;
		}

		.metadata-value {
			font-size: clamp(0.85rem, 2.8vw, 1.6rem);
			font-weight: bold;
			margin-bottom: 0.5vh;
			word-break: break-word;
			overflow-wrap: break-word;
			hyphens: auto;
			line-height: 1.2;
			font-family: 'RecursiveFont', monospace;
		}

		.metadata-rarity {
			font-size: clamp(0.6rem, 2vw, 1rem);
			opacity: 0.6;
			word-break: break-word;
			font-family: 'RecursiveFont', monospace;
		}

		.evolution-status {
			padding: 3vh 3vw;
			border-radius: 1vh;
			border-width: 0.2vh;
			border-style: solid;
			margin-bottom: 3vh;
			overflow: hidden;
			width: 100%;
		}

		.evolution-controls {
			padding: 3vh 3vw;
			border-radius: 1vh;
			border-width: 0.2vh;
			border-style: solid;
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 2vh;
		}

		.controls-title {
			font-size: clamp(1rem, 3.5vw, 1.8rem);
			font-weight: bold;
			margin-bottom: 1vh;
			font-family: 'RecursiveFont', monospace;
		}

		.slider-container {
			display: flex;
			align-items: center;
			gap: 2vw;
			width: 100%;
		}

		.evolution-slider {
			flex: 1;
			height: 0.8vh;
			border-radius: 0.4vh;
			outline: none;
			-webkit-appearance: none;
			appearance: none;
		}

		.evolution-slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 2vh;
			height: 2vh;
			border-radius: 50%;
			cursor: pointer;
		}

		.evolution-slider::-moz-range-thumb {
			width: 2vh;
			height: 2vh;
			border-radius: 50%;
			cursor: pointer;
			border: none;
		}

		.slider-value {
			font-size: clamp(1rem, 3vw, 1.5rem);
			font-weight: bold;
			font-family: 'RecursiveFont', monospace;
			min-width: 6vw;
			text-align: right;
		}

		.button-group {
			display: flex;
			gap: 2vw;
			width: 100%;
		}

		.control-button {
			flex: 1;
			padding: 1.5vh 2vw;
			font-size: clamp(0.9rem, 2.5vw, 1.4rem);
			font-weight: bold;
			border: none;
			border-radius: 1vh;
			cursor: pointer;
			font-family: 'RecursiveFont', monospace;
			transition: transform 0.2s, opacity 0.3s;
		}

		.control-button:hover {
			transform: scale(1.05);
			opacity: 0.9;
		}

		.control-button:active {
			transform: scale(0.98);
		}

		.status-title {
			font-size: clamp(1rem, 3.5vw, 1.8rem);
			font-weight: bold;
			margin-bottom: 2vh;
			word-break: break-word;
			font-family: 'RecursiveFont', monospace;
		}

		.status-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 18vw), 1fr));
			gap: 2vh 2vw;
		}

		.status-item {
			text-align: center;
			overflow: hidden;
		}

		.status-label {
			font-size: clamp(0.7rem, 2.5vw, 1.2rem);
			opacity: 0.7;
			margin-bottom: 0.5vh;
			word-break: break-word;
			font-family: 'RecursiveFont', monospace;
		}

		.status-value {
			font-size: clamp(1.5rem, 5vw, 3rem);
			font-weight: bold;
			word-break: break-word;
			overflow-wrap: break-word;
			font-family: 'RecursiveFont', monospace;
		}

		.keyboard-instructions {
			width: 100%;
			max-width: 80vw;
			margin-top: 3vh;
			padding: 2vh 2vw;
			border-radius: 1vh;
			border-width: 0.2vh;
			border-style: solid;
		}

		.instructions-title {
			font-size: clamp(0.9rem, 3vw, 1.5rem);
			font-weight: bold;
			margin-bottom: 1.5vh;
			font-family: 'RecursiveFont', monospace;
			opacity: 0.9;
		}

		.instructions-grid {
			display: flex;
			flex-direction: column;
			gap: 1vh;
		}

		.instruction-item {
			display: flex;
			align-items: center;
			gap: 1.5vw;
			font-size: clamp(0.75rem, 2.5vw, 1.2rem);
			font-family: 'RecursiveFont', monospace;
		}

		.key-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 3vh;
			height: 3vh;
			padding: 0.5vh 1vw;
			border-radius: 0.5vh;
			font-weight: bold;
			font-size: clamp(0.8rem, 2.8vw, 1.4rem);
			border-width: 0.2vh;
			border-style: solid;
			font-family: 'RecursiveFont', monospace;
		}

		.instruction-text {
			opacity: 0.85;
			line-height: 1.3;
		}
	</style>
</head>
<body>

	<div id="container">
		<div id="image-container"></div>
	</div>
	<div id="custom-cursor"></div>

	<div id="info-menu">
		<div class="menu-header">
			<div class="menu-title">MEMORY LOSS</div>
			<div class="close-button">✕</div>
		</div>

		<div class="tab-container">
			<button class="tab-button active" data-tab="metadata">Metadata</button>
			<button class="tab-button" data-tab="evolution">Memory Info</button>
		</div>

		<div id="metadata-tab" class="tab-content active">
			<div class="metadata-grid">
				<div class="metadata-item">
					<div class="metadata-label">Photo Seed</div>
					<div class="metadata-value" id="meta-photo"></div>
					<div class="metadata-rarity" id="meta-photo-rarity"></div>
				</div>
				<div class="metadata-item">
					<div class="metadata-label">Dithering</div>
					<div class="metadata-value" id="meta-dithering"></div>
					<div class="metadata-rarity" id="meta-dithering-rarity"></div>
				</div>
				<div class="metadata-item">
					<div class="metadata-label">Palette</div>
					<div class="metadata-value" id="meta-palette"></div>
					<div class="metadata-rarity" id="meta-palette-rarity"></div>
				</div>
				<div class="metadata-item">
					<div class="metadata-label">Color Comparison</div>
					<div class="metadata-value" id="meta-color"></div>
					<div class="metadata-rarity" id="meta-color-rarity"></div>
				</div>
				<div class="metadata-item">
					<div class="metadata-label">Memory Loss</div>
					<div class="metadata-value" id="meta-memory"></div>
					<div class="metadata-rarity" id="meta-memory-rarity"></div>
				</div>
			</div>
		</div>
		<div id="evolution-tab" class="tab-content">
			<div class="evolution-status">
				<div class="status-title">Current Memory Loss</div>
				<div class="status-grid">
					<div class="status-item">
						<div class="status-label">Pixelation</div>
						<div class="status-value" id="status-pixelation">0</div>
					</div>
					<div class="status-item">
						<div class="status-label">Memory Loss</div>
						<div class="status-value" id="status-memory">0%</div>
					</div>
					<div class="status-item">
						<div class="status-label">Blocks Passed</div>
						<div class="status-value" id="status-blocks">0</div>
					</div>
				</div>
			</div>


			<div class="evolution-controls">
				<div class="controls-title">Predict Memory Loss</div>

				<div class="slider-container">
					<input type="range" id="evolution-slider" class="evolution-slider" min="0" max="100" value="0">
					<span id="evolution-value" class="slider-value">0%</span>
				</div>

				<div class="button-group">
					<button id="play-evolution" class="control-button">▶️ Play All</button>
					<button id="reset-evolution" class="control-button">Reset</button>
				</div>
			</div>
		</div>
		<div class="keyboard-instructions">
			<div class="instructions-title">Keyboard Shortcuts</div>
			<div class="instructions-grid">
				<div class="instruction-item">
					<span class="key-badge">S</span>
					<span class="instruction-text">Save high-resolution PNG</span>
				</div>
				<div class="instruction-item">
					<span class="key-badge">P</span>
					<span class="instruction-text">Save SVG to be re-inscribed as a child</span>
				</div>
			</div>
		</div>
	</div>

	<script src="/content/dc69e897a879cb6791e7a0010bc7401062dc7270bd31bbe1b9e4233168e27cfei0"></script>
	<script src="/content/05c6e5aa062dc78753ca744f68ebb19faa7e3216ba42e25b75628247e9cce9d3i0"></script>
	<script src="/content/fa4f1f1fcfb8e0ed56178983c1787bedec471e7232bb24a37ff07e91308201e6i0"></script>

	<script type="text/javascript">
		(async () => {
			const loadCompletionPromise = new Promise((resolve, reject) => {
				document.addEventListener('DOMContentLoaded', resolve);
				window.onload = () => {
					resolve();
				};
			});

			const loadSJCL = async () => {
				const response = await fetch('/content/e9446ce7a36676c295a010cd765a4d84d98dede4dd691884ab27ebbffe4cd23ci0');
				return response.text();
			}

			const loadHtmlToCanvas = async () => {
				const response = await fetch('/content/be2585187c2e016b654ecc1f207fa73c38e55eee404cdf709346c4511689d24ai0');
				return response.text();
			};

			const loadGenScript = async () => {
				const response = await fetch('/r/sat/1664158491322550/at/-1');
				const data = await response.json();
				const id = data.id;
				const generatorUrl = `/content/${id}`;
				const genScript = await fetch(generatorUrl);
				return genScript.text();
			}

			const [sjclScript, htmlToCanvasScript, genScript] = await Promise.all([loadSJCL(), loadHtmlToCanvas(), loadGenScript()]);
			const sjclScriptElement = document.createElement('script');
			sjclScriptElement.type = 'text/javascript';
			sjclScriptElement.text = sjclScript;
			const htmlToCanvasScriptElement = document.createElement('script');
			htmlToCanvasScriptElement.type = 'text/javascript';
			htmlToCanvasScriptElement.text = htmlToCanvasScript;
			const genScriptElement = document.createElement('script');
			genScriptElement.type = 'text/javascript';
			genScriptElement.text = genScript;

			{
				await loadCompletionPromise;
				document.body.appendChild(sjclScriptElement);
				document.body.appendChild(htmlToCanvasScriptElement);
				document.body.appendChild(genScriptElement);
			}
		})();
	</script>
</body>
</html>