<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BOLSA RESONANCIA · ROLODEX RUN</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&amp;family=IBM+Plex+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">
<style>
:root{--ink:#06090C;--panel:#0F1820;--line:#1F3340;--mag:#FF2D78;--teal:#3DE0E0;--amber:#FFB13D;--bone:#F5E6D3;--green:#3DF08A;--red:#FF4B5C;--purple:#9F7DE0;--dim:#5B7383;--disp:'Chakra Petch',sans-serif;--mono:'IBM Plex Mono',monospace;}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:#000;color:var(--bone);font-family:var(--mono);overflow:hidden;}
body{background:radial-gradient(900px 500px at 50% -10%,rgba(255,45,120,.13),transparent 60%),var(--ink);padding:16px 20px;display:flex;flex-direction:column;gap:10px;height:100vh;}
.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:9px;}
.brand{font-family:var(--disp);font-weight:700;letter-spacing:.12em;font-size:20px;}
.brand b{color:var(--mag);}
.live{font-family:var(--disp);font-size:11px;letter-spacing:.18em;color:var(--green);display:flex;align-items:center;gap:7px;}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.25;}}
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;}
.tickline{display:inline-block;animation:scroll 28s linear infinite;font-size:13px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tk{margin:0 20px;} .up{color:var(--green);} .down{color:var(--red);}
.main{flex:1;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;min-height:0;}
.col{background:linear-gradient(165deg,var(--panel),var(--ink));border:1px solid var(--line);border-radius:8px;padding:14px;overflow:hidden;display:flex;flex-direction:column;}
.lbl{font-family:var(--disp);font-size:10px;letter-spacing:.2em;color:var(--amber);text-transform:uppercase;margin-bottom:10px;}
/* rolodex */
.rolo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.card3d{width:230px;height:140px;border-radius:10px;background:linear-gradient(150deg,#13131a,#000);border:1px solid var(--line);position:relative;box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .18s;}
.card3d.flip{animation:flip .28s;}
@keyframes flip{0%{transform:rotateX(0) translateY(0);}50%{transform:rotateX(-55deg) translateY(-16px);}100%{transform:rotateX(0) translateY(0);}}
.card3d .glyph{position:absolute;top:12px;right:16px;font-size:22px;color:var(--purple);}
.card3d .lab{position:absolute;top:14px;left:16px;font-family:var(--disp);font-size:12px;letter-spacing:.18em;color:var(--dim);}
.card3d .num{position:absolute;bottom:30px;left:16px;font-family:var(--disp);font-size:19px;letter-spacing:.14em;color:var(--bone);}
.card3d .foot{position:absolute;bottom:11px;left:16px;font-size:9px;letter-spacing:.18em;color:var(--teal);}
.counter{font-family:var(--disp);font-size:13px;color:var(--amber);letter-spacing:.12em;}
/* center balance */
.bal{font-family:var(--disp);font-weight:700;font-size:38px;color:var(--green);letter-spacing:.02em;text-align:center;margin-top:6px;}
.balsub{font-size:11px;color:var(--dim);text-align:center;margin-top:3px;}
.linkfeed{margin-top:12px;font-size:11px;line-height:1.7;color:var(--teal);flex:1;overflow:hidden;}
.linkfeed .ln{opacity:0;animation:fade .25s forwards;}
@keyframes fade{to{opacity:1;}}
.dest{margin-top:8px;font-size:11px;color:var(--bone);border-top:1px solid var(--line);padding-top:8px;line-height:1.6;}
.dest b{color:var(--mag);}
/* feed col */
.feed{font-size:11px;line-height:1.8;color:var(--teal);flex:1;overflow:hidden;}
.feed .ln{opacity:0;animation:fade .3s forwards;}
.meeze{font-size:11px;color:var(--purple);margin-top:8px;border-top:1px solid var(--line);padding-top:8px;line-height:1.6;}
.bar{display:flex;gap:9px;flex-wrap:wrap;}
.btn{font-family:var(--disp);font-weight:600;letter-spacing:.07em;font-size:12px;cursor:pointer;background:transparent;color:var(--bone);border:1px solid var(--line);border-radius:3px;padding:10px 16px;text-transform:uppercase;}
.btn:hover{border-color:var(--teal);color:var(--teal);}
.btn.go{border-color:var(--mag);color:var(--mag);}
.btn.go:hover{background:var(--mag);color:var(--ink);}
.btn.fund{border-color:var(--amber);color:var(--amber);}
.btn.fund:hover{background:var(--amber);color:var(--ink);}
.confirm{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:9;}
.confirm.on{display:flex;animation:fade .3s;}
.confirm .big{font-family:var(--disp);font-weight:700;font-size:50px;color:var(--green);letter-spacing:.07em;text-align:center;}
.confirm .amt{font-family:var(--disp);font-size:28px;color:var(--amber);}
.foot{font-size:8px;color:#15212a;text-align:center;letter-spacing:.1em;}
</style>
</head>
<body>
<div class="top">
  <div class="brand">BOLSA <b>RESONANCIA</b> · 71.000</div>
  <div class="live"><span class="dot"></span>LIVE · MADRID OPEN · MEDELLÍN 04:11</div>
</div>

<div class="ticker"><div class="tickline" id="tickline"><span class="tk">SAN.MC <span class="up">▲ 1.63%</span></span><span class="tk">BBVA.MC <span class="up">▲ 1.54%</span></span><span class="tk">ITX.MC <span class="up">▲ 1.18%</span></span><span class="tk">IBE.MC <span class="up">▲ 1.96%</span></span><span class="tk">TEF.MC <span class="down">▼ 0.27%</span></span><span class="tk">REP.MC <span class="up">▲ 0.45%</span></span><span class="tk">GALP.LS <span class="up">▲ 2.13%</span></span><span class="tk">EDP.LS <span class="up">▲ 0.92%</span></span><span class="tk">JMT.LS <span class="up">▲ 1.73%</span></span><span class="tk">BTC <span class="up">▲ 1.91%</span></span><span class="tk">XAU <span class="up">▲ 0.01%</span></span><span class="tk">CAO <span class="up">▲ 2.07%</span></span><span class="tk">COF <span class="up">▲ 1.44%</span></span><span class="tk">LIT <span class="up">▲ 1.62%</span></span><span class="tk">SAN.MC <span class="down">▼ 1.34%</span></span><span class="tk">BBVA.MC <span class="up">▲ 0.55%</span></span><span class="tk">ITX.MC <span class="up">▲ 0.74%</span></span><span class="tk">IBE.MC <span class="up">▲ 0.19%</span></span><span class="tk">TEF.MC <span class="up">▲ 1.24%</span></span><span class="tk">REP.MC <span class="up">▲ 0.25%</span></span><span class="tk">GALP.LS <span class="down">▼ 0.12%</span></span><span class="tk">EDP.LS <span class="up">▲ 0.65%</span></span><span class="tk">JMT.LS <span class="up">▲ 0.00%</span></span><span class="tk">BTC <span class="down">▼ 1.40%</span></span><span class="tk">XAU <span class="up">▲ 1.83%</span></span><span class="tk">CAO <span class="up">▲ 1.59%</span></span><span class="tk">COF <span class="down">▼ 0.88%</span></span><span class="tk">LIT <span class="up">▲ 0.46%</span></span></div></div>

<div class="main">
  <!-- LEFT: rolodex -->
  <div class="col">
    <div class="lbl">Card rolodex</div>
    <div class="rolo">
      <div class="card3d" id="card">
        <div class="lab">CARD 00</div>
        <div class="glyph">響</div>
        <div class="num" id="cardnum">0000 0000 0000 0000</div>
        <div class="foot" id="cardstat">— READY —</div>
      </div>
      <div class="counter" id="counter">0 / 41 LINKED</div>
      <button class="btn go" onclick="flipCard()">▸ Flip / Link card</button>
    </div>
  </div>

  <!-- CENTER: funding pool -->
  <div class="col">
    <div class="lbl">Funding pool</div>
    <div class="bal" id="bal">€0</div>
    <div class="balsub" id="balsub">pool: assembling · the chart resonates</div>
    <div class="linkfeed" id="linkfeed"></div>
    <div class="dest" id="dest">PAYOUT → <b>ISHMARA · LA PATRONA</b> (alias)<br>channel: [REDACTED] · standby</div>
  </div>

  <!-- RIGHT: decode + meezes -->
  <div class="col">
    <div class="lbl">Decode feed</div>
    <div class="feed" id="feed"></div>
    <div class="meeze" id="meeze">⊹ MEEZE-1 · desk · ears up<br>⊹ MEEZE-2 · door · watching</div>
  </div>
</div>

<div class="bar">
  <button class="btn go" onclick="autoLink()">⟳ Auto-link all 41</button>
  <button class="btn fund" onclick="fund()">⚑ Fund &amp; route payout</button>
  <button class="btn" onclick="doorShadow()">▦ Door shadow (tension)</button>
  <button class="btn" onclick="reset()">↺ Reset</button>
</div>
<div class="foot">PROP / DEMO SCREEN · KQFM · SANCTUARY SOUND · ALL DATA SIMULATED · NO REAL ACCOUNTS · FOR FILM USE</div>

<div class="confirm" id="confirm">
  <div class="big">TRANSFER CONFIRMED</div>
  <div class="amt" id="confamt">€0</div>
  <div style="color:var(--dim);font-size:13px;letter-spacing:.2em">SOMEONE ANSWERED · 71.000 MHz</div>
</div>

<script>
const NAMES=["SAN.MC","BBVA.MC","ITX.MC","IBE.MC","TEF.MC","REP.MC","GALP.LS","EDP.LS","JMT.LS","BTC","XAU","CAO","COF","LIT"];
function pct(){return(Math.random()*4-1.5);}
function buildTicker(){let p=[];for(let k=0;k<2;k++)NAMES.forEach(n=>{const v=pct();const c=v>=0?'up':'down';const a=v>=0?'▲':'▼';p.push(`<span class="tk">${n} <span class="${c}">${a} ${Math.abs(v).toFixed(2)}%</span></span>`);});document.getElementById('tickline').innerHTML=p.join('');}
buildTicker();setInterval(buildTicker,28000);

let linked=0, pool=0;
const PER=174212; // per-card fake contribution
function fmt(n){return '€'+Math.floor(n).toLocaleString('es-ES');}
function pad(n){return String(n).padStart(2,'0');}
function fakeNum(i){return `0000 0000 0000 ${pad(i)}${pad(i)}`;}

function flipCard(){
 if(linked>=41){return;}
 linked++;
 const card=document.getElementById('card');
 card.classList.remove('flip');void card.offsetWidth;card.classList.add('flip');
 document.querySelector('.card3d .lab').textContent='CARD '+pad(linked);
 document.getElementById('cardnum').textContent=fakeNum(linked);
 document.getElementById('cardstat').textContent='✓ LINKED';
 document.getElementById('counter').textContent=linked+' / 41 LINKED';
 pool+=PER;
 document.getElementById('bal').textContent=fmt(pool);
 const lf=document.getElementById('linkfeed');
 const d=document.createElement('div');d.className='ln';d.textContent=`> CARD ${pad(linked)} · ${fakeNum(linked)} · ✓ LINKED`;lf.appendChild(d);
 lf.scrollTop=lf.scrollHeight;
 if(linked>=41){document.getElementById('balsub').textContent='POOL ASSEMBLED · ready to route';}
}
function autoLink(){
 const iv=setInterval(()=>{if(linked>=41){clearInterval(iv);return;}flipCard();},90);
}
let meezeTimer=null;
function doorShadow(){
 const m=document.getElementById('meeze');
 m.innerHTML='⊹ MEEZE-1 · <span style="color:var(--red)">FROZEN · ears flat</span><br>⊹ MEEZE-2 · <span style="color:var(--red)">shadow at door…</span>';
 clearTimeout(meezeTimer);
 meezeTimer=setTimeout(()=>{m.innerHTML='⊹ MEEZE-1 · desk · <span style="color:var(--green)">ears up · clear</span><br>⊹ MEEZE-2 · door · <span style="color:var(--green)">passed · clear</span>';},2200);
}
function fund(){
 const feed=document.getElementById('feed');
 const STEPS=["> link = forward <-> reverse","> operator = rabbit@kqfm","> pool = assembled","> routing Madrid → Lisboa → Zone 03","> harmonics = balanced","> PAYOUT → ISHMARA · LA PATRONA","> channel = [REDACTED]","> checksum = 71.000 MHz","> someone = answered","> TRANSFER ROUTED ✓"];
 feed.innerHTML='';
 let i=0;const fi=setInterval(()=>{if(i>=STEPS.length){clearInterval(fi);return;}const d=document.createElement('div');d.className='ln';d.textContent=STEPS[i];feed.appendChild(d);feed.scrollTop=feed.scrollHeight;i++;},300);
 document.getElementById('dest').innerHTML='PAYOUT → <b>ISHMARA · LA PATRONA</b> (alias)<br>channel: [REDACTED] · <span style="color:var(--amber)">ROUTING…</span>';
 const target=pool>0?pool:41*PER;
 setTimeout(()=>{document.getElementById('confamt').textContent=fmt(target);document.getElementById('confirm').classList.add('on');},STEPS.length*300+400);
}
function reset(){
 linked=0;pool=0;
 document.getElementById('bal').textContent='€0';
 document.getElementById('balsub').textContent='pool: assembling · the chart resonates';
 document.querySelector('.card3d .lab').textContent='CARD 00';
 document.getElementById('cardnum').textContent='0000 0000 0000 0000';
 document.getElementById('cardstat').textContent='— READY —';
 document.getElementById('counter').textContent='0 / 41 LINKED';
 document.getElementById('linkfeed').innerHTML='';
 document.getElementById('feed').innerHTML='';
 document.getElementById('dest').innerHTML='PAYOUT → <b>ISHMARA · LA PATRONA</b> (alias)<br>channel: [REDACTED] · standby';
 document.getElementById('meeze').innerHTML='⊹ MEEZE-1 · desk · ears up<br>⊹ MEEZE-2 · door · watching';
 document.getElementById('confirm').classList.remove('on');
}
document.getElementById('confirm').onclick=()=>document.getElementById('confirm').classList.remove('on');
</script>

</body></html>