+<style>
+  html, body { margin: 0; height: 100%; background: #0E0A1F; color: #F4EEE3; font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
+  .wrap { position: relative; width: 100%; height: 100%; user-select: none; touch-action: none; }
+  .title { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); margin: 0; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 1.25rem; opacity: 0.92; z-index: 3; pointer-events: none; }
+  .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  /* Default: an opaque cover hides the image. A 0px-radius radial mask
+     is degenerate (iOS Safari renders it transparent, leaking the
+     image), so the mask is only applied via .on while pressing. The
+     cover is a soft dark gradient instead of flat black. */
+  .cover {
+    position: absolute; inset: 0;
+    background: radial-gradient(120% 80% at 50% 18%, #2A1D54 0%, #1B1338 45%, #0E0A1F 100%);
+    --x: 50%; --y: 50%; --r: 0px;
+  }
+  .cover.on {
+    -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent 99%, black 100%);
+    mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent 99%, black 100%);
+  }
+  .hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; letter-spacing: 0.01em; color: #F4EEE3; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); padding: 10px 16px; border-radius: 9999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; z-index: 2; text-align: center; }
+  .hint.hidden { opacity: 0; transition: opacity 0.25s; }
+</style>
+<div class="wrap" id="wrap">
+  <p class="title">Hold to peek</p>
+  <img class="photo" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=720" alt="" referrerpolicy="no-referrer" />
+  <div class="cover" id="cover"></div>
+  <p class="hint" id="hint">🔦 Press and drag to reveal</p>
+</div>
+<script>
+(function(){
+  var wrap = document.getElementById('wrap');
+  var cover = document.getElementById('cover');
+  var hint = document.getElementById('hint');
+  var RADIUS = 110;
+  var pressing = false;
+ 
+  function rect(){ return wrap.getBoundingClientRect(); }
+  function setSpot(x, y, r) {
+    cover.style.setProperty('--x', x + 'px');
+    cover.style.setProperty('--y', y + 'px');
+    cover.style.setProperty('--r', r + 'px');
+  }
+  function start(ev){
+    pressing = true;
+    hint.classList.add('hidden');
+    cover.classList.add('on');
+    move(ev);
+  }
+  function move(ev){
+    if (!pressing) return;
+    var r = rect();
+    var p = ev.touches ? ev.touches[0] : ev;
+    var x = (p.clientX || 0) - r.left;
+    var y = (p.clientY || 0) - r.top;
+    setSpot(x, y, RADIUS);
+  }
+  function end(){
+    pressing = false;
+    // Drop the mask entirely so the cover is solid black again.
+    cover.classList.remove('on');
+  }
+  wrap.addEventListener('pointerdown', start);
+  wrap.addEventListener('pointermove', move);
+  wrap.addEventListener('pointerup', end);
+  wrap.addEventListener('pointerleave', end);
+  wrap.addEventListener('pointercancel', end);
+})();
+</script>
+<script>/*ll-media-controls*/
+(function(){
+  function wire(){
+    var ll = window.liveloop; if(!ll || !ll.declareMedia) return;
+    var nodes = [].slice.call(document.querySelectorAll('video,audio')).filter(function(el){
+      return !(el.id && el.id.indexOf('ll-')===0) && !el.hasAttribute('data-ll-unmanaged');
+    });
+    if(!nodes.length) return;
+    var hasVideo = nodes.some(function(el){ return el.tagName==='VIDEO'; });
+    ll.declareMedia({ sound:true, playback:hasVideo });
+    var paused=false;
+    function play(el){ try{ var p=el.play&&el.play(); if(p&&p.catch)p.catch(function(){}); }catch(e){} }
+    function applyMuted(m){ nodes.forEach(function(el){ try{ el.muted=m; }catch(e){} if(!m&&!paused) play(el); }); }
+    function applyPaused(p){ paused=p; nodes.forEach(function(el){ try{ if(p){ el.pause&&el.pause(); } else { play(el); } }catch(e){} }); }
+    applyMuted(!!ll.muted);
+    if(ll.onMute) ll.onMute(applyMuted);
+    if(ll.onPause) ll.onPause(applyPaused);
+  }
+  if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', wire); } else { wire(); }
+})();
+</script>