Made of little things.

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="theme-color" content="#f5f5f1" /><title>Body Journal</title></head>
<body><main id="app" class="app">
<div class="minimum-notice"><span class="mini-logo">✳</span><strong>A little more room.</strong><p>Enlarge this view to explore your body map. Your session stays here.</p></div>
<div class="app-shell">
<header class="topbar"><nav class="steps" aria-label="Assessment steps"><button class="step active" data-page="map" aria-label="Step 1: Body map"><span>1</span>Body map</button><button class="step" data-page="context" aria-label="Step 2: Context"><span>2</span>Context</button><button class="step" data-page="review" aria-label="Step 3: Review"><span>3</span>Review</button></nav><div class="header-status"><span class="prototype-tag">RESEARCH PROTOTYPE</span><button id="sessionStatus" class="text-button" title="Manage saved session">Restoring…</button><span id="caseStatus">Your story starts with one concern</span></div><button class="outline-button header-examples" id="examplesButton">Examples</button><button class="connection-button" id="connectionsButton" aria-label="AI connections"><span class="status-dot"></span><span>AI connection</span><span aria-hidden="true">↗</span></button><button class="primary-button" id="nextButton">Continue to context <span>→</span></button></header><aside id="exampleBanner" class="example-banner" hidden></aside>
<nav class="mobile-tabs" aria-label="Workspace panels"><button data-panel="profile">About you</button><button class="active" data-panel="body">Body</button><button data-panel="concerns">Concerns <span id="mobileCount">0</span></button></nav>
<section id="mapPage" class="map-page" data-panel="body">
<aside class="profile-panel" aria-label="About you"><div class="section-caption"><span>01 / ABOUT YOU</span><span>◎</span></div><h2>A starting point.</h2><p class="muted small">A few details help put your symptoms in context.</p><div class="profile-fields"><label class="field">Age <div class="unit-input"><input id="age" inputmode="numeric" type="number" min="18" max="120" placeholder="e.g. 34" /><span>years</span></div></label><label class="field">Sex assigned at birth<select id="sex"><option value="">Select or skip</option><option>Female</option><option>Male</option><option>Intersex</option><option>Prefer not to say</option></select></label><label class="field">Illustrated anatomy<select id="anatomy"><option value="auto">Match male / female illustration</option><option value="penis">Male anatomy</option><option value="vulva">Female anatomy</option><option value="none">Hide reproductive anatomy</option></select><span class="field-hint">Applies to skin and organs. You can override the sex-based default.</span><button type="button" id="focusPelvis" class="text-button">Focus on pelvis ↗</button></label><div class="field range-field"><label for="height">Height <strong><output id="heightValue">172</output> <span>cm</span></strong></label><input id="height" type="range" min="135" max="210" value="172" /><div class="range-ends"><span>135 cm</span><span>210 cm</span></div><label class="check-field"><input type="checkbox" id="heightConfirmed" /><span>Include this as my reported height</span></label></div><div class="field range-field"><label for="weight">Weight <strong><output id="weightValue">70</output> <span>kg</span></strong></label><input id="weight" type="range" min="40" max="160" value="70" /><div class="range-ends"><span>40 kg</span><span>160 kg</span></div><label class="check-field"><input type="checkbox" id="weightConfirmed" /><span>Include this as my reported weight</span></label></div></div><div class="quiet-note"><span>ⓘ</span><p>The body adapts as you go. It’s an illustration, and doesn’t need to look exactly like you.</p></div><button class="text-button profile-context" data-page="context">Add health background <span>↗</span></button><div class="session-note"><span>◇</span><div><strong>Your session, remembered</strong><span>Your work saves automatically in this browser. Manage or clear it here.</span><button id="draftsButton" class="text-button">Manage session ↗</button></div></div></aside>
<section class="body-panel" aria-label="Body workspace"><div class="inspection-toolbar"><div class="layer-switch"><label for="anatomyLayer">Layer</label><select id="anatomyLayer" aria-label="Anatomy layer"><option value="skin">Skin</option><option value="skeleton">Skeleton</option><option value="mouth">Mouth</option><option value="muscles">Muscles</option><option value="organs">Organs</option></select><button id="layerCredit" aria-label="About the reference anatomy" title="Reference anatomy and credits" hidden>ⓘ</button></div><button id="anatomyToggle" class="visibility-button" aria-controls="anatomyPanel" aria-expanded="true">Anatomy −</button></div><div id="bodyViewport" class="body-viewport" data-mode="rotate"><div id="webglFallback" class="webgl-fallback" hidden><strong>Your body map is still available.</strong><p>3D isn’t available on this device. Use “Choose a body area” to describe a location.</p></div></div><div class="scene-tools" role="toolbar" aria-label="Body tools"><button class="tool selected" data-mode="rotate" aria-label="Rotate body" aria-pressed="true" title="Rotate body"><span data-icon="rotate"></span><small>Rotate</small></button><button class="tool" data-mode="paint" aria-label="Mark a concern" aria-pressed="false" title="Paint a concern"><span data-icon="brush"></span><small>Mark</small></button><button class="tool" data-mode="pose" aria-label="Adjust pose" aria-pressed="false" title="Drag a limb"><span data-icon="move"></span><small>Pose</small></button><span class="tool-divider"></span><button class="tool compact" id="zoomIn" aria-label="Zoom in">+</button><button class="tool compact" id="zoomOut" aria-label="Zoom out">−</button></div><div class="brush-control" id="brushControl" hidden><label for="brushSize">Brush</label><input id="brushSize" aria-label="Brush size" type="range" min="2" max="40" value="22" /><button id="undoMark" aria-label="Undo last stroke">↶</button></div><span class="body-side left">R</span><span class="body-side right">L</span><div class="view-control" aria-label="Body view"><button class="selected" data-view="front">Front</button><button data-view="back">Back</button><button data-view="left">Side</button></div><div class="scene-hint"><span class="hint-dot"></span><span id="sceneHint">Drag to rotate · scroll or pinch to zoom</span></div><div class="pose-bar"><div class="pose-caption"><span class="section-caption">POSITION</span><button id="playPose" aria-label="Play activity animation" hidden>▶</button></div><div class="pose-options" id="poseOptions"></div></div></section>
<aside class="concerns-panel" aria-label="Your concerns"><div class="concerns-heading"><div><span class="section-caption">03 / YOUR CONCERNS</span><h2>Every detail helps.<span id="concernCount" class="count">0</span></h2></div><button class="round-button" id="newConcern" aria-label="Add concern">+</button></div><section id="concernGroups" aria-label="Observation groups" hidden></section><div id="concernContent"></div><div class="concern-actions"><button class="outline-button" id="chooseRegion"><span data-icon="target"></span>Choose a body area</button><button class="text-button" id="generalConcern"><span>+ Add a general symptom</span><span>↗</span></button></div></aside>
</section><section id="contextPage" class="secondary-page" hidden></section><section id="reviewPage" class="secondary-page" hidden></section>
</div><dialog id="modal"><div id="modalContent"></div></dialog><output id="toast" class="toast" role="status" aria-live="polite" hidden></output></main><script type="module" src="/src/main.ts"></script></body></html>