Cyberpunk Draggable Window Hero Interface

<div class="min-h-screen w-full m-0 p-0 overflow-hidden select-none"
  style="background-color: #050505; color: #00f3ff; font-family: 'Helvetica Neue', Arial, sans-serif; cursor: crosshair; --ink-color: #00f3ff; --win-accent: #7000ff; --win-bg: #0d0d0d;">

  <script src="https://cdn.tailwindcss.com"></script>

  <div
    class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full text-center z-0 pointer-events-none opacity-10 leading-[0.8] uppercase font-black text-[15vw]">
    <span class="block text-[#00f3ff]">VOID</span>
    <span class="block text-[#00f3ff]">GHOST</span>
    <span class="block text-[#00f3ff]">SIGNAL</span>
  </div>

  <nav
    class="fixed top-0 left-0 w-full p-5 md:p-10 flex flex-col md:flex-row justify-between items-start z-[1000] text-[10px] uppercase tracking-widest pointer-events-none">
    <div class="flex flex-col gap-1 pointer-events-auto">
      <strong class="text-white">VOID_SYNAPSE_SYSTEMS ©</strong>
      <span>Sub-Sector: 0x4F2</span>
      <span class="opacity-50">Latency: 0.002ms</span>
    </div>

    <div class="flex gap-8 mt-4 md:mt-0 pointer-events-auto">
      <a href="#" class="border-b border-[#00f3ff] hover:bg-[#00f3ff] hover:text-black transition-colors">Manifesto</a>
      <a href="#" class="border-b border-[#00f3ff] hover:bg-[#00f3ff] hover:text-black transition-colors">Nodes</a>
      <a href="#" class="border-b border-[#00f3ff] hover:bg-[#00f3ff] hover:text-black transition-colors">Archive</a>
    </div>

    <div class="flex flex-col gap-1 mt-4 md:mt-0 text-right pointer-events-auto">
      <strong class="text-white">ENCRYPTED_INQUIRY</strong>
      <a href="#" class="text-[#7000ff] border-b border-[#7000ff]">void@synapse.net</a>
    </div>
  </nav>

  <div
    class="window absolute bg-[#0d0d0d] border-2 border-[#00f3ff] w-[320px] shadow-[8px_8px_0px_rgba(112,0,255,0.3)] z-10 flex flex-col"
    id="win-1" style="top: 15%; left: 10%;">
    <div
      class="window-header bg-[#7000ff] text-white p-2 flex justify-between items-center font-mono text-[10px] font-bold uppercase cursor-grab active:cursor-grabbing border-b-2 border-[#00f3ff]">
      <span>SYS://INIT_CORE</span>
      <div class="flex gap-1">
        <div
          class="w-3 h-3 border border-white flex items-center justify-center text-[8px] hover:bg-white hover:text-[#7000ff]">
          _</div>
        <div
          class="w-3 h-3 border border-white flex items-center justify-center text-[8px] hover:bg-white hover:text-[#7000ff]">
          ×</div>
      </div>
    </div>
    <div class="p-6 flex flex-col gap-4">
      <div class="font-mono text-[8px] leading-[8px] whitespace-pre text-[#7000ff]">
        █▀▀ █▀█ █▀█ █▀▀
        █▀ █ █ █▀▀ █▀
        ▀ ▀▀▀ ▀ ▀▀▀
      </div>
      <span class="font-mono text-[9px] text-gray-500">{ genesis_block }</span>
      <h2 class="text-xl font-bold uppercase leading-tight text-white">Neural Interfaces for the Post-Human Web</h2>
      <p class="text-[12px] leading-relaxed text-gray-400">We forge decentralized experiences that bypass the sensory
        limits of legacy browsers. Built for the void.</p>
      <button class="self-end bg-transparent border border-[#00f3ff] text-[#00f3ff] px-4 py-2 font-mono text-[10px] uppercase hover:bg-[#00f3ff] hover:text-black transition-all hover:-translate-y-1 active:translate-y-0">Connect_Mind</button>
    </div>
  </div>

  <div
    class="window absolute bg-[#0d0d0d] border-2 border-[#7000ff] w-[380px] shadow-[8px_8px_0px_rgba(0,243,255,0.2)] z-10 flex flex-col"
    id="win-2" style="top: 20%; left: 50%;">
    <div
      class="window-header bg-[#1a1a1a] text-[#00f3ff] p-2 flex justify-between items-center font-mono text-[10px] font-bold uppercase cursor-grab active:cursor-grabbing border-b-2 border-[#7000ff]">
      <span>SYS://PHANTOM_PROTOCOL</span>
      <div class="flex gap-1">
        <div class="w-3 h-3 border border-[#00f3ff] flex items-center justify-center text-[8px]">□</div>
      </div>
    </div>
    <div class="p-6 flex flex-col gap-4">
      <span class="font-mono text-[9px] text-[#7000ff]">{ active_deployment }</span>
      <h2 class="text-lg font-bold uppercase text-white leading-tight">Ghost Chain: Dark-Pool Liquidity Visualization
      </h2>
      <p class="text-[12px] text-gray-400">Rendering $2.4B in hidden assets via non-euclidean geometry. High-fidelity
        data for high-stakes actors.</p>
      <div class="border border-[#1a1a1a] p-3 bg-black font-mono text-[9px] text-[#00f3ff]">
        > KERNEL: QUANTUM-LISP<br>
        > STATUS: STEALTH_MODE<br>
        > THREAT: MINIMAL
      </div>
      <button class="self-end border border-[#7000ff] text-[#7000ff] px-4 py-2 font-mono text-[10px] uppercase hover:bg-[#7000ff] hover:text-white transition-all">Intercept</button>
    </div>
  </div>

  <div
    class="window absolute bg-[#0d0d0d] border-2 border-[#00f3ff] w-[300px] shadow-[8px_8px_0px_rgba(112,0,255,0.3)] z-10 flex flex-col"
    id="win-3" style="top: 60%; left: 25%;">
    <div
      class="window-header bg-[#7000ff] text-white p-2 flex justify-between items-center font-mono text-[10px] font-bold uppercase cursor-grab border-b-2 border-[#00f3ff]">
      <span>SYS://DRIVE_SPECS</span>
    </div>
    <div class="p-6">
      <ul class="font-mono text-[11px] space-y-2 text-[#00f3ff]">
        <li>[X] ZERO_KNOWLEDGE_UI</li>
        <li>[X] CRYPTO_GRAPHIC_DESIGN</li>
        <li>[X] NEURAL_LINK_STREAMS</li>
        <li>[ ] HUMAN_EMOTION_MODULE</li>
      </ul>
      <button class="mt-4 w-full border border-[#00f3ff] py-2 font-mono text-[10px] uppercase hover:bg-[#00f3ff] hover:text-black transition-all">Update_Firmware</button>
    </div>
  </div>

  <div
    class="window absolute bg-[#0d0d0d] border-2 border-red-600 w-[260px] shadow-[8px_8px_0px_rgba(255,0,0,0.2)] z-10 flex flex-col"
    id="win-4" style="top: 55%; left: 65%;">
    <div
      class="window-header bg-red-600 text-white p-2 flex justify-between items-center font-mono text-[10px] font-bold uppercase cursor-grab border-b-2 border-red-900">
      <span>SYS://CRITICAL_ALERT</span>
    </div>
    <div class="p-6">
      <h2 class="text-red-500 font-bold text-lg mb-2">BREACH_DETECTED</h2>
      <p class="text-[11px] text-gray-400 mb-4">New talent detected in the perimeter. Seeking rogue architects for
        illegal aesthetics.</p>
      <button class="w-full bg-red-600 text-white py-2 font-mono text-[10px] uppercase hover:bg-black border border-red-600 transition-all">Join_Cell</button>
    </div>
  </div>

  <div
    class="fixed bottom-5 w-full text-center font-mono text-[9px] text-[#7000ff] uppercase tracking-widest pointer-events-none opacity-50">
    SYSTEM_STATUS: STABLE // OPERATING IN SHADOW_MODE // 0x00000000
  </div>

  <div
    class="fixed bottom-5 right-5 bg-black border border-gray-800 p-4 flex items-center gap-4 text-[9px] uppercase font-mono z-[2000] shadow-xl">
    <span class="text-gray-500">Tracking user telemetry via ghost-packets.</span>
    <button class="border border-[#00f3ff] px-3 py-1 text-[#00f3ff] hover:bg-[#00f3ff] hover:text-black transition-colors" onclick="this.parentElement.remove()">Accept_Void</button>
  </div>

  <script>
    (function() {
      const windows = document.querySelectorAll('.window');
      let highestZ = 100;

      windows.forEach(win => {
        const header = win.querySelector('.window-header');
        
        win.addEventListener('mousedown', () => {
          highestZ++;
          win.style.zIndex = highestZ;
        });

        header.addEventListener('mousedown', (e) => {
          let shiftX = e.clientX - win.getBoundingClientRect().left;
          let shiftY = e.clientY - win.getBoundingClientRect().top;

          function moveAt(pageX, pageY) {
            win.style.left = pageX - shiftX + 'px';
            win.style.top = pageY - shiftY + 'px';
          }

          function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
          }

          document.addEventListener('mousemove', onMouseMove);

          header.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', onMouseMove);
          });
        });

        header.ondragstart = () => false;
      });
    })();
  </script>
</div>