<!-- SAGA-STAGING · part 1 -->
===== FILE: public/saga-staging/avatar-gallery.html =====
<!DOCTYPE html>
<html><head><meta charset='utf-8'><meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Epistolaries</title>
<style>
*{box-sizing:border-box;}
body{margin:0;background:#050508;color:#f0e8d8;font-family:Georgia,serif;overflow:hidden;height:100vh;}
#canvas{position:fixed;top:0;left:0;}
#vignette{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);}
#ui{position:fixed;bottom:0;left:0;right:0;padding:20px 16px 24px;
  background:linear-gradient(transparent, rgba(5,5,8,0.92) 40%);}
#name{font-size:32px;font-weight:normal;text-align:center;letter-spacing:8px;
  margin-bottom:4px;text-transform:uppercase;color:#f0e8d8;
  text-shadow:0 0 30px rgba(255,215,0,0.3);}
#words{font-size:15px;text-align:center;color:#c8a860;margin-bottom:6px;
  font-style:italic;letter-spacing:3px;min-height:22px;}
#desc{font-size:12px;text-align:center;color:#666;max-width:320px;margin:0 auto 14px;line-height:1.5;}
#avatars{display:flex;gap:6px;overflow-x:auto;padding:6px 2px;justify-content:flex-start;
  scrollbar-width:none;}
#avatars::-webkit-scrollbar{display:none;}
.abtn{min-width:58px;height:58px;border-radius:50%;border:1px solid #333;
  background:rgba(20,20,28,0.8);color:#888;font-size:9px;cursor:pointer;flex-shrink:0;
  font-family:Georgia,serif;letter-spacing:1px;transition:all 0.3s;}
.abtn.active{border-color:#c8a860;color:#f0e8d8;background:rgba(40,32,20,0.9);
  box-shadow:0 0 16px rgba(200,168,96,0.4);transform:scale(1.1);}
#nav{display:flex;justify-content:space-between;align-items:center;
  max-width:400px;margin:12px auto 0;padding:0 8px;}
.nbtn{background:none;border:none;color:#c8a860;font-size:28px;cursor:pointer;
  padding:8px 16px;font-family:Georgia,serif;}
.nbtn:active{transform:scale(0.92);}
#views{display:flex;gap:12px;justify-content:center;}
.vbtn{padding:6px 18px;border-radius:20px;border:1px solid #444;
  background:transparent;color:#888;cursor:pointer;font-size:12px;
  font-family:Georgia,serif;letter-spacing:2px;}
.vbtn.active{background:rgba(200,168,96,0.15);color:#c8a860;border-color:#c8a860;}
#count{text-align:center;font-size:10px;color:#444;margin-top:10px;letter-spacing:4px;}
#hint{text-align:center;font-size:10px;color:#333;margin-top:4px;letter-spacing:2px;}
</style></head><body>
<canvas id='canvas'></canvas>
<div id='vignette'></div>
<div id='ui'>
<div id='name'>SENTINEL</div>
<div id='words'></div>
<div id='desc'></div>
<div id='avatars'></div>
<div id='nav'>
<button class='nbtn' id='prev'>&#8249;</button>
<div id='views'>
<button class='vbtn active' data-v='front'>FRONT</button>
<button class='vbtn' data-v='side'>SIDE</button>
<button class='vbtn' data-v='back'>BACK</button>
</div>
<button class='nbtn' id='next'>&#8250;</button>
</div>
<div id='count'>I &mdash; X</div>
<div id='hint'>SWIPE OR TAP TO MEET THEM</div>
</div>
<script src='/saga/three.min.js'></script>
<script src='/saga-solid/avatars.js?v=33'></script>
<script>
var AVATARS = [
  {id:'sentinel', name:'Sentinel', words:'', desc:'The guardian. First of the twenty.'},
  {id:'architect', name:'Architect', words:'', desc:'The builder. Draws what will stand.'},
  {id:'nomad', name:'Nomad', words:'', desc:'The wanderer. Home is the horizon.'},
  {id:'oracle', name:'Oracle', words:'', desc:'The seer. Sees what has not yet been.'},
  {id:'forgemaster', name:'Forgemaster', words:'density', desc:'The maker. Weight given form.'},
  {id:'courier', name:'Courier', words:'direction', desc:'The messenger. Always going somewhere.'},
  {id:'mender', name:'Mender', words:'gentleness', desc:'The healer. Mends what is broken.'},
  {id:'spinner', name:'Spinner', words:'release', desc:'The dancer. Lets go of everything.'},
  {id:'keeper', name:'Keeper', words:'presence', desc:'The vigil. Stays when others leave.'},
  {id:'stargazer', name:'Stargazer', words:'', desc:'The wonderer. Faces the sky.'},
];
var ROMAN = ['I','II','III','IV','V','VI','VII','VIII','IX','X'];
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x050508);
scene.fog = new THREE.Fog(0x050508, 8, 20);
var camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 0.1, 100);
var renderer = new THREE.WebGLRenderer({canvas:document.getElementById('canvas'), antialias:true});
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
scene.add(new THREE.AmbientLight(0xffffff, 0.35));
var key = new THREE.DirectionalLight(0xfff0d8, 1.0);
key.position.set(3, 6, 4); key.castShadow = true;
key.shadow.mapSize.width = 1024; key.shadow.mapSize.height = 1024;
scene.add(key);
var rim = new THREE.DirectionalLight(0x6688cc, 0.5);
rim.position.set(-4, 3, -3); scene.add(rim);
var under = new THREE.PointLight(0xc8a860, 0.4, 10);
under.position.set(0, 0.5, 2); scene.add(under);
var ground = 