Post-Quantum Randomness Demo

<main class="wrap">
  <header class="head">
    <span class="eyebrow">Animica · Randomness</span>
    <h1>Post-Quantum Randomness Beacon</h1>
    <p class="lede">
      A fresh 256-bit random value drawn from your device's cryptographic RNG,
      shown as hex with its entropy. This is a demo of the beacon shape — not a
      live Animica beacon.
    </p>
  </header>

  <section class="card beacon" aria-live="polite">
    <div class="card-top">
      <div class="meta">
        <span class="label">Current beacon</span>
        <span class="round" id="round">round #1</span>
      </div>
      <span class="stamp" id="stamp"></span>
    </div>

    <code class="hex" id="hex" tabindex="0" aria-label="Beacon value in hexadecimal"></code>

    <div class="stats">
      <div class="stat">
        <span class="stat-num" id="entropy">256</span>
        <span class="stat-lbl">bits of entropy</span>
      </div>
      <div class="stat">
        <span class="stat-num">64</span>
        <span class="stat-lbl">hex characters</span>
      </div>
      <div class="stat">
        <span class="stat-num">32</span>
        <span class="stat-lbl">bytes</span>
      </div>
    </div>

    <div class="actions">
      <button class="btn primary" id="regen" type="button">Regenerate</button>
      <button class="btn ghost" id="copy" type="button">Copy hex</button>
    </div>
  </section>

  <section class="card">
    <h2 class="h2">History</h2>
    <ul class="history no-scroll" id="history" aria-live="polite"></ul>
    <p class="empty" id="empty">No past beacons yet — hit Regenerate.</p>
  </section>

  <section class="card explain">
    <h2 class="h2">What is a verifiable randomness beacon?</h2>
    <p>
      A randomness beacon publishes a fresh, unpredictable value on a fixed
      cadence. "Verifiable" means anyone can check that the value was produced
      honestly and could not have been chosen in advance — useful for fair
      draws, lotteries, shuffles, leader election, and game mechanics.
    </p>
    <p>
      On Animica, useful-work compute and attested hardware entropy are designed
      to feed a public beacon that apps can consume and audit. This page shows
      the <strong>shape</strong> of that output using your browser's own CSPRNG.
    </p>
    <p class="note">
      Demo only. Values here are local to your device and carry no on-chain
      proof or attestation. Live, attestable beacons are prepared for a later
      phase.
    </p>
  </section>

  <footer class="foot">Powered by Animica</footer>
</main>