+<style>
+  html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b1020;color:#f8fafc;overflow:hidden;}
+  .wrap{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:.8rem;gap:.5rem;}
+  .top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;}
+  h1{margin:0;font-size:1rem;}
+  #label{font-size:.82rem;font-weight:800;color:#fbbf24;}
+  #stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
+  #frame{position:relative;height:100%;aspect-ratio:3/4;max-width:100%;border-radius:1rem;border:4px solid #334155;background:#1e293b;background-size:cover;background-position:center;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);}
+  #ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:#94a3b8;font-size:.78rem;text-align:center;padding:1rem;}
+  #ph .big{font-size:3rem;}
+  #acc{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);font-size:64px;line-height:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;display:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.45));}
+  .strip{display:flex;gap:.4rem;overflow-x:auto;padding:.15rem;}
+  .cos{flex:none;font:inherit;font-size:1.45rem;border:2px solid #334155;background:#1e293b;border-radius:.7rem;width:3rem;height:3rem;cursor:pointer;touch-action:manipulation;}
+  .cos.on{border-color:#fbbf24;}
+  .controls{display:flex;gap:.4rem;align-items:center;justify-content:center;flex-wrap:wrap;}
+  .btn{font:inherit;font-size:.8rem;font-weight:600;border:0;border-radius:9999px;padding:.45rem .95rem;background:#3b82f6;color:#fff;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;gap:.3rem;}
+  .ghost{background:transparent;border:1px solid #475569;color:#cbd5e1;}
+  .sz{font:inherit;font-weight:800;font-size:1rem;border:1px solid #475569;background:transparent;color:#cbd5e1;width:2.1rem;height:2.1rem;border-radius:.5rem;cursor:pointer;touch-action:manipulation;}
+  .hint{font-size:.68rem;color:#64748b;text-align:center;}
+  .hidden{display:none;}
+</style>
+<div class="wrap">
+  <div class="top"><h1>🎭 Change Your Costume</h1><span id="label"></span></div>
+  <div id="stage">
+    <div id="frame">
+      <div id="ph"><div class="big">🙂</div><div>Add your photo, then pick a costume below</div></div>
+      <div id="acc">🎩</div>
+    </div>
+  </div>
+  <div class="strip" id="strip"></div>
+  <div class="controls">
+    <label class="btn">📷 Photo<input type="file" accept="image/*" id="pick" class="hidden"></label>
+    <button class="sz" id="minus" type="button">−</button>
+    <button class="sz" id="plus" type="button">+</button>
+    <button class="btn ghost" id="reset" type="button">Clear</button>
+  </div>
+  <div class="hint">Drag the costume onto your photo · − / + to resize</div>
+</div>
+<script>
+(function(){
+  var COSTUMES=[
+    {name:'Cowboy',emoji:'🤠',color:'#b45309'},
+    {name:'Royal',emoji:'👑',color:'#a855f7'},
+    {name:'Dapper',emoji:'🎩',color:'#0f172a'},
+    {name:'Party',emoji:'🥳',color:'#ec4899'},
+    {name:'Wizard',emoji:'🧙',color:'#7c3aed'},
+    {name:'Graduate',emoji:'🎓',color:'#2563eb'},
+    {name:'Disguise',emoji:'🥸',color:'#0891b2'},
+    {name:'Festive',emoji:'🎅',color:'#dc2626'},
+    {name:'Sporty',emoji:'🧢',color:'#16a34a'},
+    {name:'Sunny',emoji:'👒',color:'#f59e0b'}
+  ];
+  var frame=document.getElementById('frame'),acc=document.getElementById('acc'),
+      ph=document.getElementById('ph'),strip=document.getElementById('strip'),
+      label=document.getElementById('label'),pick=document.getElementById('pick');
+  var pos={x:0.5,y:0.22},size=64;
+ 
+  function onTap(el,fn){
+    var sx=0,sy=0,armed=false;
+    el.addEventListener('pointerdown',function(e){ armed=true;sx=e.clientX;sy=e.clientY; });
+    el.addEventListener('pointercancel',function(){ armed=false; });
+    el.addEventListener('pointerup',function(e){
+      if(!armed) return; armed=false;
+      if(Math.abs(e.clientX-sx)<14&&Math.abs(e.clientY-sy)<14) fn();
+    });
+  }
+  function renderAcc(){
+    acc.style.left=(pos.x*100)+'%';
+    acc.style.top=(pos.y*100)+'%';
+    acc.style.fontSize=size+'px';
+  }
+  COSTUMES.forEach(function(c,i){
+    var b=document.createElement('button');
+    b.type='button'; b.className='cos'; b.textContent=c.emoji;
+    onTap(b,function(){
+      acc.textContent=c.emoji; acc.style.display='block';
+      frame.style.borderColor=c.color; label.textContent=c.name;
+      var btns=strip.querySelectorAll('.cos');
+      for(var k=0;k<btns.length;k++) btns[k].classList.toggle('on',btns[k]===b);
+      renderAcc();
+      acc.animate([{transform:'translate(-50%,-50%) scale(.5)'},{transform:'translate(-50%,-50%) scale(1.15)'},{transform:'translate(-50%,-50%) scale(1)'}],{duration:240,easing:'ease-out'});
+    });
+    strip.appendChild(b);
+  });
+ 
+  var dragging=false;
+  acc.addEventListener('pointerdown',function(e){
+    if(acc.style.display==='none') return;
+    dragging=true;
+    try{ acc.setPointerCapture(e.pointerId); }catch(_){}
+    e.preventDefault();
+  });
+  acc.addEventListener('pointermove',function(e){
+    if(!dragging) return;
+    var r=frame.getBoundingClientRect();
+    pos.x=Math.max(0,Math.min(1,(e.clientX-r.left)/r.width));
+    pos.y=Math.max(0,Math.min(1,(e.clientY-r.top)/r.height));
+    renderAcc();
+    e.preventDefault();
+  });
+  function endDrag(e){ dragging=false; try{ acc.releasePointerCapture(e.pointerId); }catch(_){} }
+  acc.addEventListener('pointerup',endDrag);
+  acc.addEventListener('pointercancel',endDrag);
+ 
+  onTap(document.getElementById('minus'),function(){ size=Math.max(24,size-12); renderAcc(); });
+  onTap(document.getElementById('plus'),function(){ size=Math.min(220,size+12); renderAcc(); });
+  onTap(document.getElementById('reset'),function(){
+    acc.style.display='none'; label.textContent=''; frame.style.borderColor='#334155';
+    var btns=strip.querySelectorAll('.cos');
+    for(var k=0;k<btns.length;k++) btns[k].classList.remove('on');
+  });
+ 
+  pick.addEventListener('change',function(e){
+    var file=e.target.files&&e.target.files[0]; if(!file) return;
+    var reader=new FileReader();
+    reader.onload=function(){
+      var img=new Image();
+      img.onload=function(){
+        try{
+          var max=760,sc=Math.min(1,max/Math.max(img.width,img.height));
+          var c=document.createElement('canvas');
+          c.width=Math.round(img.width*sc); c.height=Math.round(img.height*sc);
+          c.getContext('2d').drawImage(img,0,0,c.width,c.height);
+          frame.style.backgroundImage='url("'+c.toDataURL('image/jpeg',0.85)+'")';
+        }catch(err){ frame.style.backgroundImage='url("'+reader.result+'")'; }
+        ph.style.display='none';
+      };
+      img.onerror=function(){ frame.style.backgroundImage='url("'+reader.result+'")'; ph.style.display='none'; };
+      img.src=reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+ 
+  renderAcc();
+})();
+</script>