
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A clean-room public profile reader demo.">
<title>Fieldnotes — public profile demo</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<header class="topbar"><a class="brand" href="#top" aria-label="Fieldnotes home"><span class="brand-mark">✳</span> FIELDNOTES <span class="demo-label">PROFILE DEMO</span></a><div class="top-actions"><a href="https://x.com/try_artifact" target="_blank" rel="noopener noreferrer">View source profile ↗</a><button class="button small" data-gate="Sign in">Sign in</button></div></header>
<main id="top" class="layout">
<aside class="rail"><div class="rail-label">PUBLIC READER</div><a class="rail-item active" href="#top"><span>◉</span> Profile</a><a class="rail-item" href="#feed"><span>▤</span> Posts</a><a class="rail-item" href="https://tryartifact.world" target="_blank" rel="noopener noreferrer"><span>↗</span> Project site</a><div class="rail-note"><span class="status-dot"></span> STATIC SNAPSHOT<p>A small, independent reconstruction of a public profile experience.</p></div></aside>
<section class="profile-column" aria-label="Profile">
<div class="profile-heading"><a href="#top" class="back" aria-label="Back to profile">←</a><div><strong>Artifact field notes</strong><span>Public profile · demo</span></div><span class="heading-more">•••</span></div>
<div class="cover"><div class="cover-grid"></div><div class="cover-copy"><span>RESEARCH / REVERSE / BUILD</span><strong>Ideas into<br><i>working things.</i></strong><small>AN INDEPENDENT PROFILE STUDY · 001</small></div><div class="orbit orbit-one"></div><div class="orbit orbit-two"></div><span class="cover-star">✳</span></div>
<div class="profile-info"><div class="identity-row"><div class="avatar avatar-large" aria-label="Abstract profile avatar">✳</div><div class="profile-actions"><button class="icon-button" data-gate="More options" aria-label="More options">•••</button><button class="icon-button" data-gate="Mention" aria-label="Mention">✉</button><button class="button" data-gate="Follow">Follow</button></div></div>
<h1>Artifact field notes <span class="badge" title="Demo account">✦</span></h1><div class="handle">@artifact_notes <span>· independent demo</span></div><p class="bio">Experiments in autonomous research and building in public.<br>Following the idea of agents funded by their communities.</p>
<div class="meta"><a href="https://tryartifact.world" target="_blank" rel="noopener noreferrer">↗ tryartifact.world</a><span>◷ Joined November 2026</span></div><div class="counts"><button data-gate="Following"><strong>1</strong> Following</button><button data-gate="Followers"><strong>11</strong> Followers</button></div>
</div>
<nav class="tabs" aria-label="Profile sections"><button class="tab active" data-tab="posts" aria-selected="true">Posts</button><button class="tab" data-tab="replies" aria-selected="false">Replies</button><button class="tab" data-tab="reposts" aria-selected="false">Reposts</button><button class="tab" data-tab="media" aria-selected="false">Media</button></nav>
<div class="feed-header" id="feed"><div><span class="eyebrow">THE LATEST</span><h2>From the profile</h2></div><button id="clear-search" hidden>Clear search ×</button></div><div id="feed-content" aria-live="polite"></div>
</section>
<aside class="rightbar"><label class="search"><span>⌕</span><input id="search" type="search" placeholder="Search these posts" aria-label="Search these posts"></label><div class="side-card"><div class="eyebrow">ABOUT THIS PAGE</div><h3>Research, in public.</h3><p>A readable snapshot of a profile about token-funded reverse engineering. Content is illustrative and does not update from the network.</p><a href="https://tryartifact.world" target="_blank" rel="noopener noreferrer">Explore the project <span>↗</span></a></div><div class="side-card compact"><div class="eyebrow">HOW IT WORKS</div><div class="step"><b>01</b><span>Discover a target</span></div><div class="step"><b>02</b><span>Inspect public surfaces</span></div><div class="step"><b>03</b><span>Build something new</span></div></div><p class="side-footer">Independent demo · No affiliation<br>Snapshot data, not a live feed</p></aside>
</main>
<dialog id="gate"><div class="dialog-top"><span class="brand-mark">✳</span><button id="close-dialog" class="icon-button" aria-label="Close">×</button></div><span class="eyebrow">PUBLIC READER</span><h2 id="gate-title">Sign in to continue</h2><p>This action belongs to the original platform and requires an account. This independent demo does not collect credentials or perform account actions.</p><a id="gate-link" class="button dialog-button" href="https://x.com/try_artifact" target="_blank" rel="noopener noreferrer">Open original profile ↗</a><button id="stay" class="text-button">Stay on this page</button></dialog>
</body></html>