diff --git a/www/js/stego.mjs b/www/js/stego.mjs
new file mode 100644
index 0000000..b18274b
--- /dev/null
+++ b/www/js/stego.mjs
@@ -0,0 +1,345 @@
+/**
+ * LLM-based steganography — JavaScript port of stego.py.
+ *
+ * Half-splitting entropy coding on top of GPT-2's next-token distribution.
+ * Both encoder and decoder run the same JS code with the same PRNG seed,
+ * so they stay synchronized regardless of cross-language PRNG differences.
+ */
+
+import { Tensor } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0";
+
+// ---------------------------------------------------------------------------
+// PRNG — mulberry32 (deterministic given seed)
+// ---------------------------------------------------------------------------
+export function mulberry32(seed) {
+    let a = seed >>> 0;
+    return function random() {
+        a = (a + 0x6D2B79F5) >>> 0;
+        let t = Math.imul(a ^ (a >>> 15), 1 | a);
+        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+
+// ---------------------------------------------------------------------------
+// Bit <-> string conversion (UTF-8)
+// ---------------------------------------------------------------------------
+export function strToBits(s) {
+    const data = new TextEncoder().encode(s);
+    const bits = [];
+    for (const byte of data) {
+        for (let i = 7; i >= 0; i--) {
+            bits.push((byte >> i) & 1);
+        }
+    }
+    return bits;
+}
+
+export function bitsToStr(bits) {
+    // Pad to a multiple of 8 (should already be).
+    const padded = bits.slice();
+    while (padded.length % 8 !== 0) padded.push(0);
+    const bytes = new Uint8Array(Math.floor(padded.length / 8));
+    for (let i = 0; i < padded.length; i += 8) {
+        let byte = 0;
+        for (let j = 0; j < 8; j++) {
+            byte = (byte << 1) | padded[i + j];
+        }
+        bytes[i / 8] = byte;
+    }
+    return new TextDecoder("utf-8", { fatal: false }).decode(bytes);
+}
+
+// ---------------------------------------------------------------------------
+// Softmax over a TypedArray / Array of logits (numerically stable)
+// ---------------------------------------------------------------------------
+function softmax(logits) {
+    let max = -Infinity;
+    for (let i = 0; i < logits.length; i++) {
+        if (logits[i] > max) max = logits[i];
+    }
+    const probs = new Float32Array(logits.length);
+    let sum = 0;
+    for (let i = 0; i < logits.length; i++) {
+        const e = Math.exp(logits[i] - max);
+        probs[i] = e;
+        sum += e;
+    }
+    if (sum <= 0) sum = 1;
+    for (let i = 0; i < logits.length; i++) {
+        probs[i] /= sum;
+    }
+    return probs;
+}
+
+// ---------------------------------------------------------------------------
+// Next-token probability distribution from the model.
+// Returns a Float32Array of length vocab_size.
+// ---------------------------------------------------------------------------
+async function nextTokenProbs(model, tokenizer, tokenIds) {
+    // Build the model inputs directly from the token-id array. We must NOT
+    // pass the id array through tokenizer(): in Transformers.js v3 the
+    // tokenizer call expects a string and will fail with
+    // "e.split is not a function" when given numbers. Instead we construct
+    // int64 tensors ourselves and feed them straight to the model.
+    const seqLength = tokenIds.length;
+    const idData = BigInt64Array.from(tokenIds, (x) => BigInt(x));
+    const maskData = BigInt64Array.from({ length: seqLength }, () => 1n);
+    const inputs = {
+        input_ids: new Tensor("int64", idData, [1, seqLength]),
+        attention_mask: new Tensor("int64", maskData, [1, seqLength]),
+    };
+    const output = await model(inputs);
+    const logits = output.logits;
+
+    // logits.dims = [batch, seq_len, vocab_size]
+    const dims = logits.dims;
+    const seqLen = dims[1];
+    const vocabSize = dims[2];
+    const data = logits.data;
+
+    // Extract the last token's logits: row = (batch=0, last token, :)
+    const offset = (seqLen - 1) * vocabSize;
+    const lastLogits = new Float32Array(vocabSize);
+    for (let i = 0; i < vocabSize; i++) {
+        lastLogits[i] = data[offset + i];
+    }
+    return softmax(lastLogits);
+}
+
+// ---------------------------------------------------------------------------
+// Split the sorted vocabulary into two halves at cumulative prob 0.50.
+// Returns { firstIds, firstProbs, secondIds, secondProbs }.
+// ---------------------------------------------------------------------------
+export function splitHalves(probs) {
+    const vocabSize = probs.length;
+
+    // Build an index array covering EVERY token id [0 .. vocabSize-1] and
+    // sort it by probability descending. Sorting indices (rather than
+    // dropping any) guarantees that all token ids are retained and that the
+    // two slices below form a complete, disjoint partition of the vocabulary.
+    // Ties are broken by ascending token id so the ordering is fully
+    // deterministic — important under int8 quantization where many logits can
+    // be exactly equal (an unstable sort could otherwise diverge between the
+    // encoder and decoder passes).
+    const sortedIds = new Array(vocabSize);
+    for (let i = 0; i < vocabSize; i++) sortedIds[i] = i;
+    sortedIds.sort((a, b) => {
+        const diff = probs[b] - probs[a];
+        if (diff !== 0) return diff;
+        return a - b; // stable tie-break by token id
+    });
+
+    // Find the split point: the first index at which the cumulative
+    // probability mass reaches/exceeds 0.50. Everything up to and including
+    // that token forms the first half; the remainder forms the second half.
+    let cum = 0.0;
+    let splitIdx = vocabSize; // default: all mass in first half (edge case)
+    for (let i = 0; i < vocabSize; i++) {
+        cum += probs[sortedIds[i]];
+        if (cum >= 0.50) {
+            splitIdx = i + 1; // include this token in the first half
+            break;
+        }
+    }
+
+    // Clamp so BOTH halves are guaranteed non-empty. The split index must be
+    // at least 1 (first half non-empty) and at most vocabSize-1 (second half
+    // non-empty). This handles degenerate distributions where a single token
+    // already holds >= 0.50 of the mass, or where the mass never reaches 0.50.
+    if (splitIdx < 1) splitIdx = 1;
+    if (splitIdx > vocabSize - 1) splitIdx = vocabSize - 1;
+
+    // slice(0, splitIdx) + slice(splitIdx) ALWAYS covers the entire sorted
+    // array, so every token id appears in exactly one half — none missing,
+    // none duplicated. Ids are plain Numbers (0..vocabSize-1).
+    const firstIds = sortedIds.slice(0, splitIdx);
+    const secondIds = sortedIds.slice(splitIdx);
+    const firstProbs = firstIds.map(id => probs[id]);
+    const secondProbs = secondIds.map(id => probs[id]);
+
+    return { firstIds, firstProbs, secondIds, secondProbs };
+}
+
+// ---------------------------------------------------------------------------
+// Sample a token id from the given half using renormalized probabilities.
+// Advances the PRNG exactly once (one call to rng()).
+// ---------------------------------------------------------------------------
+export function sampleWithinHalf(ids, probs, rng) {
+    let total = 0;
+    for (let i = 0; i < probs.length; i++) total += probs[i];
+    if (total <= 0) total = 1;
+    const r = rng();
+    let cum = 0.0;
+    let chosen = ids[ids.length - 1];
+    for (let i = 0; i < ids.length; i++) {
+        cum += probs[i] / total;
+        if (r < cum) {
+            chosen = ids[i];
+            break;
+        }
+    }
+    return chosen;
+}
+
+// ---------------------------------------------------------------------------
+// Encoder
+// ---------------------------------------------------------------------------
+export async function encode(model, tokenizer, secretMessage, context, key, padTokens = 3, onToken = null) {
+    const rng = mulberry32(key >>> 0);
+    const bits = strToBits(secretMessage);
+    const numBits = bits.length;
+    const totalBits = numBits;
+    const totalChars = secretMessage.length;
+
+    // Tokenize the context. Transformers.js tokenizer() returns an object
+    // with input_ids; we extract the raw id array.
+    const tokenIds = tokenizeToIds(tokenizer, context);
+
+    for (let bitIndex = 0; bitIndex < bits.length; bitIndex++) {
+        const bit = bits[bitIndex];
+        const probs = await nextTokenProbs(model, tokenizer, tokenIds);
+        const { firstIds, firstProbs, secondIds, secondProbs } = splitHalves(probs);
+        let chosen;
+        if (bit === 0) {
+            chosen = sampleWithinHalf(firstIds, firstProbs, rng);
+        } else {
+            chosen = sampleWithinHalf(secondIds, secondProbs, rng);
+        }
+        tokenIds.push(chosen);
+
+        // Stream the partial cover text back to the caller and yield to the
+        // browser so the UI can repaint between (slow) forward passes.
+        if (onToken) {
+            const textSoFar = tokenizer.decode(tokenIds, { skip_special_tokens: true });
+            const charIndex = Math.floor(bitIndex / 8) + 1;
+            const currentChar = secretMessage[charIndex - 1] ?? "";
+            onToken(textSoFar, bitIndex + 1, totalBits, currentChar, charIndex, totalChars);
+        }
+        await new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    // Padding tokens: sample from the full distribution using the same PRNG.
+    for (let p = 0; p < padTokens; p++) {
+        const probs = await nextTokenProbs(model, tokenizer, tokenIds);
+        // Sort descending.
+        const pairs = [];
+        for (let i = 0; i < probs.length; i++) pairs.push([probs[i], i]);
+        pairs.sort((a, b) => b[0] - a[0]);
+        const sp = pairs.map(x => x[0]);
+        const si = pairs.map(x => x[1]);
+        let total = 0;
+        for (let i = 0; i < sp.length; i++) total += sp[i];
+        if (total <= 0) total = 1;
+        const r = rng();
+        let cum = 0.0;
+        let chosen = si[0];
+        for (let i = 0; i < si.length; i++) {
+            cum += sp[i] / total;
+            if (r < cum) {
+                chosen = si[i];
+                break;
+            }
+        }
+        tokenIds.push(chosen);
+    }
+
+    const coverText = tokenizer.decode(tokenIds, { skip_special_tokens: true });
+    return { coverText, numBits, tokenCount: tokenIds.length };
+}
+
+// ---------------------------------------------------------------------------
+// Decoder
+// ---------------------------------------------------------------------------
+export async function decode(model, tokenizer, coverText, context, key, numBits, padTokens = 3, onProgress = null) {
+    const rng = mulberry32(key >>> 0);
+    const totalBits = numBits;
+
+    const contextIds = tokenizeToIds(tokenizer, context);
+    const coverIds = tokenizeToIds(tokenizer, coverText);
+
+    // Generated tokens are everything after the context prefix.
+    const genIds = coverIds.slice(contextIds.length);
+
+    const tokenIds = contextIds.slice();
+    const bits = [];
+
+    for (const genToken of genIds) {
+        if (bits.length >= numBits) break;
+        const probs = await nextTokenProbs(model, tokenizer, tokenIds);
+        const { firstIds, firstProbs, secondIds, secondProbs } = splitHalves(probs);
+
+        // splitHalves yields plain Number ids and partitions the entire
+        // vocabulary, so a normalized (Number) genToken is guaranteed to be in
+        // exactly one half. tokenizeToIds normalizes ids to Number, but coerce
+        // defensively here too in case a BigInt slips through.
+        const token = typeof genToken === "bigint" ? Number(genToken) : genToken;
+        const firstSet = new Set(firstIds);
+        const secondSet = new Set(secondIds);
+
+        let recoveredBit;
+        if (firstSet.has(token)) {
+            recoveredBit = 0;
+            bits.push(0);
+            // Advance PRNG identically to the encoder.
+            sampleWithinHalf(firstIds, firstProbs, rng);
+        } else if (secondSet.has(token)) {
+            recoveredBit = 1;
+            bits.push(1);
+            sampleWithinHalf(secondIds, secondProbs, rng);
+        } else {
+            throw new Error(`Generated token ${token} not found in either half.`);
+        }
+        tokenIds.push(token);
+
+        // Report progress and yield so the UI can repaint between passes.
+        if (onProgress) {
+            const currentToken = tokenizer.decode([token], { skip_special_tokens: true });
+            const completedBytes = Math.floor(bits.length / 8);
+            const recoveredChars = bitsToStr(bits.slice(0, completedBytes * 8));
+            onProgress(
+                bits.length,
+                totalBits,
+                recoveredChars,
+                currentToken,
+                recoveredBit,
+            );
+        }
+        await new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    return bitsToStr(bits.slice(0, numBits));
+}
+
+// ---------------------------------------------------------------------------
+// Helper: tokenize a string to a plain array of token ids.
+// Handles the various shapes Transformers.js may return.
+// ---------------------------------------------------------------------------
+function tokenizeToIds(tokenizer, text) {
+    const inputs = tokenizer(text, { add_special_tokens: false });
+    let ids;
+    if (inputs && inputs.input_ids) {
+        ids = inputs.input_ids;
+    } else if (Array.isArray(inputs)) {
+        ids = inputs;
+    } else {
+        ids = inputs;
+    }
+    // ids may be a Tensor or a nested array like [[1,2,3]].
+    let arr;
+    if (ids && typeof ids.data !== "undefined" && ids.dims) {
+        arr = Array.from(ids.data);
+    } else if (Array.isArray(ids)) {
+        // Flatten one level if nested: [[...]] -> [...]
+        arr = (ids.length > 0 && Array.isArray(ids[0])) ? ids[0].slice() : ids.slice();
+    } else {
+        // Fallback: try to iterate.
+        arr = Array.from(ids);
+    }
+    // CRITICAL: token tensors are int64, so ids.data is a BigInt64Array and
+    // Array.from() yields BigInts (e.g. 351n). splitHalves produces plain
+    // Number ids, and `new Set([...Numbers]).has(351n)` is false — which is
+    // exactly what caused "Generated token 351 not found in either half".
+    // Normalize every id to a plain Number so membership checks line up.
+    return arr.map(v => (typeof v === "bigint" ? Number(v) : Number(v)));
+}
diff --git a/www/js/version.json b/www/js/version.json
index 943a4e9..df14d11 100644
--- a/www/js/version.json
+++ b/www/js/version.json
@@ -1,5 +1,5 @@
 {
-  "VERSION": "v0.7.56",
-  "VERSION_NUMBER": "0.7.56",
-  "BUILD_DATE": "2026-06-27T12:17:42.524Z"
+  "VERSION": "v0.7.57",
+  "VERSION_NUMBER": "0.7.57",
+  "BUILD_DATE": "2026-06-29T00:17:04.254Z"
 }
diff --git a/www/llm-steganography.html b/www/llm-steganography.html
new file mode 100644
index 0000000..b0d56dc
--- /dev/null
+++ b/www/llm-steganography.html
@@ -0,0 +1,1518 @@
+<!DOCTYPE html>
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="utf-8" />
+  <title>LLM STEGANOGRAPHY</title>
+
+  <link rel="stylesheet" href="./css/client.css" />
+
+  <!-- Initialize theme BEFORE any components load -->
+  <script>
+    (function () {
+      const savedTheme = localStorage.getItem('theme');
+      if (savedTheme === 'dark') {
+        document.documentElement.classList.add('dark-mode');
+        if (document.body) {
+          document.body.classList.add('dark-mode');
+        }
+      }
+    })();
+  </script>
+  <link rel="shortcut icon" type="image/x-icon" href="./favicon/favicon-dots2.ico" />
+
+  <!-- SVG.js library (required by HamburgerMorphing) -->
+  <script src="./js/vendor/svg.min.js"></script>
+</head>
+
+<body>
+  <!-- ================================================================
+       HAMBURGER BUTTON (Fixed, separate from header)
+       ================================================================
+       The hamburger button is a fixed element outside the header
+       to ensure it stays visible above the sidenav (z-index: 10 > 3).
+       ================================================================ -->
+  <div id="divSvgHam" class="divHeaderButtons">
+    <!-- HamburgerMorphing will be injected here -->
+  </div>
+
+  <!-- ================================================================
+       HEADER
+       ================================================================
+       Standard header with title (center).
+       ================================================================ -->
+  <div id="divHeader">
+    <div id="divHeaderFlexLeft">
+      <!-- Hamburger is now separate fixed element -->
+    </div>
+
+    <div id="divHeaderFlexCenter">
+      <div class="divHeaderText"></div>
+    </div>
+
+    <div id="divHeaderFlexRight">
+      <!-- No button in header right - logout is in sidenav footer -->
+    </div>
+  </div>
+
+  <!-- ================================================================
+       BODY
+       ================================================================
+       Main content area. Add your page-specific content here.
+       ================================================================ -->
+  <div id="divBody">
+
+    <!-- ================================================================
+         PAGE-SPECIFIC STYLES
+         ================================================================
+         Reuses project CSS variables (var(--primary-color), etc.) so the
+         demo matches the rest of the app and respects dark mode.
+         ================================================================ -->
+    <style>
+      #stegoWrap {
+        max-width: 760px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 8px 16px 48px;
+        box-sizing: border-box;
+        text-align: left;
+      }
+
+      #stegoWrap header {
+        text-align: center;
+        margin-bottom: 24px;
+      }
+
+      #stegoWrap header h1 {
+        margin: 0 0 6px;
+        font-size: 28px;
+        color: var(--primary-color);
+      }
+
+      #stegoWrap .subtitle {
+        color: var(--muted-color);
+        margin: 0;
+        font-size: 14px;
+      }
+
+      .stegoCard {
+        background: var(--secondary-color);
+        border: 1px solid var(--border-color);
+        border-radius: var(--border-radius);
+        padding: 18px 20px;
+        margin-bottom: 18px;
+        color: var(--primary-color);
+      }
+
+      .stegoCard h2 {
+        margin: 0 0 12px;
+        font-size: 18px;
+        color: var(--primary-color);
+      }
+
+      .stegoHint {
+        color: var(--muted-color);
+        font-size: 13px;
+        margin: 0 0 12px;
+      }
+
+      .stegoFormRow {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 12px;
+      }
+      .stegoFormRow:last-child { margin-bottom: 0; }
+
+      .stegoFormRow label {
+        font-size: 13px;
+        color: var(--muted-color);
+        margin-bottom: 4px;
+      }
+
+      .stegoFormRow input[type="text"],
+      .stegoFormRow input[type="number"],
+      .stegoFormRow textarea {
+        background: var(--background-color);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        color: var(--primary-color);
+        padding: 9px 11px;
+        font-size: 14px;
+        font-family: var(--font-family);
+        width: 100%;
+        outline: none;
+        transition: border-color 0.15s;
+        box-sizing: border-box;
+      }
+
+      .stegoFormRow textarea {
+        font-family: var(--font-mono, "SF Mono", "Fira Code", "Consolas", monospace);
+        resize: vertical;
+        line-height: 1.45;
+      }
+
+      .stegoFormRow input:focus,
+      .stegoFormRow textarea:focus {
+        border-color: var(--accent-color);
+      }
+
+      .stegoStatus {
+        color: var(--muted-color);
+        font-size: 13px;
+        margin: 8px 0;
+        min-height: 1.2em;
+      }
+
+      .stegoInfo {
+        font-size: 13px;
+        color: var(--muted-color);
+        margin: 8px 0 0;
+        white-space: pre-wrap;
+      }
+
+      .stegoInfo.match-success {
+        color: var(--accent-color);
+        font-weight: 600;
+      }
+
+      .stegoInfo.match-fail {
+        color: var(--accent-color);
+        font-weight: 600;
+      }
+
+      .stegoProgressBarContainer {
+        background: var(--background-color);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        height: 14px;
+        overflow: hidden;
+        margin-top: 8px;
+      }
+
+      .stegoProgressBar {
+        height: 100%;
+        width: 0%;
+        background: var(--accent-color);
+        transition: width 0.2s ease;
+      }
+
+      .stegoProgressFiles {
+        margin-top: 8px;
+        font-size: 12px;
+        color: var(--muted-color);
+        font-family: var(--font-mono, "SF Mono", "Fira Code", "Consolas", monospace);
+        max-height: 120px;
+        overflow-y: auto;
+      }
+      .stegoProgressFiles div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .stegoProgressSection {
+        background: var(--background-color);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        padding: 10px 12px;
+        margin: 10px 0;
+      }
+
+      .stegoProgressLine {
+        font-size: 13px;
+        color: var(--primary-color);
+        margin-bottom: 6px;
+      }
+      .stegoProgressLine:last-child { margin-bottom: 0; }
+
+      .stegoCharHighlight {
+        display: inline-block;
+        background: var(--accent-color);
+        color: var(--secondary-color);
+        font-weight: 700;
+        padding: 1px 8px;
+        border-radius: 4px;
+        font-family: var(--font-mono, "SF Mono", "Fira Code", "Consolas", monospace);
+        min-width: 1.2em;
+        text-align: center;
+      }
+
+      .stegoTokenDisplay {
+        font-family: var(--font-mono, "SF Mono", "Fira Code", "Consolas", monospace);
+        background: var(--secondary-color);
+        border: 1px solid var(--border-color);
+        padding: 1px 6px;
+        border-radius: 4px;
+        color: var(--accent-color);
+      }
+
+      .stegoRecoveredBox {
+        display: inline-block;
+        font-family: var(--font-mono, "SF Mono", "Fira Code", "Consolas", monospace);
+        background: var(--secondary-color);
+        border: 1px solid var(--accent-color);
+        color: var(--accent-color);
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-weight: 600;
+        min-height: 1.4em;
+      }
+
+      .stegoCollapsibleToggle {
+        background: none;
+        border: none;
+        color: var(--primary-color);
+        font-size: 18px;
+        font-weight: 600;
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        text-align: left;
+        font-family: var(--font-family);
+      }
+
+      .stegoCollapsibleToggle .chevron {
+        transition: transform 0.2s;
+        font-size: 14px;
+      }
+
+      .stegoCollapsibleToggle[aria-expanded="true"] .chevron {
+        transform: rotate(90deg);
+      }
+
+      .stegoCollapsibleContent {
+        margin-top: 12px;
+      }
+      .stegoCollapsibleContent p,
+      .stegoCollapsibleContent li {
+        color: var(--primary-color);
+      }
+      .stegoCollapsibleContent ol {
+        padding-left: 20px;
+      }
+      .stegoCollapsibleContent code {
+        background: var(--background-color);
+        padding: 1px 5px;
+        border-radius: 4px;
+        font-family: var(--font-mono, "SF Mono", "Fira Code", "Consolas", monospace);
+        font-size: 13px;
+      }
+
+      .stegoFooter {
+        text-align: center;
+        color: var(--muted-color);
+        font-size: 12px;
+        margin-top: 24px;
+      }
+      .stegoFooter a {
+        color: var(--accent-color);
+        text-decoration: none;
+      }
+      .stegoFooter a:hover { text-decoration: underline; }
+
+      .stegoHidden { display: none !important; }
+    </style>
+
+    <div id="stegoWrap">
+      <header>
+        <h1>LLM Steganography Demo</h1>
+        <p class="subtitle">Hide secret messages in innocent-looking AI-generated text</p>
+      </header>
+
+      <!-- Model loading section -->
+      <section id="stegoLoadingSection" class="stegoCard">
+        <h2>Model Loading</h2>
+        <p id="stegoLoadingStatus" class="stegoStatus">Initializing...</p>
+        <div class="stegoProgressBarContainer">
+          <div id="stegoProgressBar" class="stegoProgressBar"></div>
+        </div>
+        <div id="stegoProgressFiles" class="stegoProgressFiles"></div>
+      </section>
+
+      <!-- Main app (hidden until model is loaded) -->
+      <main id="stegoApp" class="stegoHidden">
+
+        <!-- Shared Parameters -->
+        <section class="stegoCard">
+          <h2>Shared Parameters</h2>
+          <p class="stegoHint">Both encoder and decoder must use the same context and key.</p>
+          <div class="stegoFormRow">
+            <label for="stegoContextInput">Context / Prompt</label>
+            <input type="text" id="stegoContextInput" value="I like to eat" autocomplete="off">
+          </div>
+          <div class="stegoFormRow">
+            <label for="stegoKeyInput">Shared Key (integer)</label>
+            <input type="number" id="stegoKeyInput" value="42" step="1" autocomplete="off">
+          </div>
+        </section>
+
+        <!-- Encode -->
+        <section class="stegoCard">
+          <h2>Encode</h2>
+          <div class="stegoFormRow">
+            <label for="stegoSecretInput">Secret Message</label>
+            <input type="text" id="stegoSecretInput" value="HELLO" autocomplete="off">
+          </div>
+          <button id="stegoEncodeBtn" class="btn">Encode</button>
+          <p id="stegoEncodeStatus" class="stegoStatus"></p>
+          <div id="stegoEncodeProgress" class="stegoProgressSection stegoHidden">
+            <div class="stegoProgressLine">
+              <span>Encoding character <span id="stegoEncodeCurrentChar" class="stegoCharHighlight"></span> (<span id="stegoEncodeCharIndex">0</span>/<span id="stegoEncodeTotalChars">0</span>)</span>
+            </div>
+            <div class="stegoProgressLine">
+              <span id="stegoEncodeBitInfo">bit 0 of 0</span>
+            </div>
+            <div class="stegoProgressBarContainer">
+              <div id="stegoEncodeProgressBar" class="stegoProgressBar"></div>
+            </div>
+          </div>
+          <div class="stegoFormRow">
+            <label for="stegoCoverOutput">Cover Text</label>
+            <textarea id="stegoCoverOutput" readonly rows="4"></textarea>
+          </div>
+          <p id="stegoEncodeInfo" class="stegoInfo"></p>
+        </section>
+
+        <!-- Decode -->
+        <section class="stegoCard">
+          <h2>Decode</h2>
+          <button id="stegoDecodeBtn" class="btn">Decode</button>
+          <p id="stegoDecodeStatus" class="stegoStatus"></p>
+          <div id="stegoDecodeProgress" class="stegoProgressSection stegoHidden">
+            <div class="stegoProgressLine">
+              <span>Processing token: <span id="stegoDecodeCurrentToken" class="stegoTokenDisplay"></span> → bit <span id="stegoDecodeRecoveredBit">-</span></span>
+            </div>
+            <div class="stegoProgressLine">
+              <span id="stegoDecodeBitInfo">bit 0 of 0</span>
+            </div>
+            <div class="stegoProgressBarContainer">
+              <div id="stegoDecodeProgressBar" class="stegoProgressBar"></div>
+            </div>
+            <div class="stegoProgressLine">
+              <span>Recovered so far: <span id="stegoDecodeRecoveredChars" class="stegoRecoveredBox"></span></span>
+            </div>
+          </div>
+          <div class="stegoFormRow">
+            <label for="stegoRecoveredOutput">Recovered Message</label>
+            <textarea id="stegoRecoveredOutput" readonly rows="2"></textarea>
+          </div>
+          <p id="stegoMatchIndicator" class="stegoInfo"></p>
+        </section>
+
+        <!-- How It Works -->
+        <section class="stegoCard">
+          <h2>
+            <button id="stegoHowToggle" class="stegoCollapsibleToggle" aria-expanded="false">
+              How It Works <span class="chevron">▸</span>
+            </button>
+          </h2>
+          <div id="stegoHowContent" class="stegoCollapsibleContent stegoHidden">
+            <p>
+              This demo uses a <strong>half-splitting entropy coding</strong> scheme
+              built on top of GPT-2's next-token probability distribution.
+            </p>
+            <ol>
+              <li>The secret message is converted to a bit string (UTF-8 → bits).</li>
+              <li>For each secret bit, GPT-2 produces a probability distribution over
+                  the entire vocabulary for the next token.</li>
+              <li>Tokens are sorted by probability (descending) and split into two
+                  halves at the 50% cumulative probability mark.</li>
+              <li>Bit <code>0</code> → the next token is sampled from the
+                  <em>first</em> (higher-probability) half; bit <code>1</code> →
+                  from the <em>second</em> half.</li>
+              <li>A shared-key PRNG (mulberry32) selects the exact token within the
+                  chosen half, so the decoder can reproduce the same random draws.</li>
+              <li>The decoder re-runs GPT-2 on the same context, observes which half
+                  each cover token fell into, and recovers the bits → original message.</li>
+            </ol>
+            <p>
+              Because both sides share the same model, context, and PRNG seed, the
+              decoder can perfectly reconstruct the hidden bits. The resulting cover
+              text reads like normal GPT-2 output, hiding the secret in plain sight.
+            </p>
+          </div>
+        </section>
+
+      </main>
+
+      <footer class="stegoFooter">
+        <p>Runs entirely in your browser via <a href="https://github.com/xenova/transformers.js" target="_blank" rel="noopener">Transformers.js</a> · GPT-2 model loaded locally</p>
+      </footer>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       FOOTER
+       ================================================================
+       Three-section footer layout:
+       - Left: Relay status animations (HamburgerMorphing instances)
+       - Center: General status information
+       - Right: Additional information
+       ================================================================ -->
+  <div id="divFooter">
+    <div id="divFooterLeft" class="divFooterBox"></div>
+    <div id="divFooterCenter" class="divFooterBox"></div>
+    <div id="divFooterRight" class="divFooterBox"></div>
+    <div id="divFooterBalance" class="divFooterBox">0 sats</div>
+  </div>
+
+  <!-- ================================================================
+       SIDENAV
+       ================================================================
+       Slide-out navigation panel. Opens from left when hamburger clicked.
+       Uses flexbox layout to pin version bar to bottom.
+       Includes a version bar footer with theme toggle and logout buttons.
+       ================================================================ -->
+  <div id="divSideNav">
+    <div id="divSideNavHeader">
+      <!-- No close button - use main hamburger to close -->
+    </div>
+
+    <div id="divSideNavBody">
+      <div id="divFiles"></div>
+    </div>
+
+    <div id="divAiSection" class="sidenavSection"> 
+      <div id="divAiSectionTitle" class="sidenavSectionTitle">AI</div>
+      <div id="divAiList" class="sidenavSectionList">
+        <div id="divAiProvidersList">No saved providers yet.</div>
+      </div>
+    </div>
+
+
+    <div id="divRelaySection">
+      <div id="divRelaySectionTitle">
+        リレー
+      </div>
+      <div id="divRelayList">
+        Loading relays...
+      </div>
+    </div>
+
+    <div id="divBlossomSection">
+
+      <div id="divBlossomSectionTitle">ブロッサム</div>
+
+      <div id="divBlossomList">Loading blossom servers...</div>
+
+    </div>
+
+
+    <div id="divVersionBar">
+      <span id="versionDisplay">v0.0.1</span>
+      <div id="divVersionBarButtons">
+        <button id="themeToggleButton" title="Toggle Dark/Light Mode">
+          <div id="themeToggleHamburgerContainer"></div>
+        </button>
+        <button id="logoutButton" title="Logout">
+          <div id="logoutHamburgerContainer"></div>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       REQUIRED SCRIPTS
+       ================================================================
+       These scripts must be loaded in this order:
+       1. nostr.bundle.js - Nostr tools library
+       2. nostr-lite.js - Authentication modal (nostr-login-lite)
+       ================================================================ -->
+  <script src="./nostr.bundle.js"></script>
+  <script src="/nostr-login-lite/nostr-lite.js"></script>
+
+  <script type="module">
+    /* ================================================================
+       IMPORTS
+       ================================================================
+       Import shared NDK functionality from init-ndk.mjs:
+       - initNDKPage() - Initialize authentication and worker
+       - getPubkey() - Get current user's pubkey
+       - subscribe() - Create NDK subscriptions
+       - publishEvent() - Publish events via NDK
+       - disconnect() - Disconnect from worker
+       - getRelayData() - Get relay connection data
+       - getRelayStats() - Get relay activity statistics
+       
+       Import HamburgerMorphing for animated icons
+       ================================================================ */
+    import {
+      initNDKPage,
+      getPubkey, injectHeaderAvatar, injectHeaderLoginButton,
+      subscribe,
+      publishEvent,
+      disconnect,
+      getVersion,
+      updateVersionDisplay,
+      getUserSettings,
+      patchUserSettings,
+      onUserSettings
+    } from './js/init-ndk.mjs';
+    import { HamburgerMorphing } from "./hamburger_morphing/hamburger.mjs";
+    import { initFooterRelayStatus, updateFooterRelayStatus, initSidenavRelaySection, updateSidenavRelaySection, setRelayActivityState } from './js/relay-ui.mjs';
+
+    import { initBlossomSection, updateBlossomSection } from './js/blossom-ui.mjs';
+    
+    import { initAiSectionWithLocalConfig } from './js/ai-ui.mjs';
+// Version will be loaded asynchronously
+    const versionInfo = await getVersion();
+    const VERSION = versionInfo.VERSION;
+    console.log(`[llm-steganography.html ${VERSION}] Loading...`);
+
+    /* ================================================================
+       GLOBAL VARIABLES
+       ================================================================
+       Track state for hamburger menu, relay status, and theme.
+       ================================================================ */
+    let updateIntervalId = null;
+    let currentPubkey = null;
+
+    /*
+      AUTH STATE MODEL (Template reference)
+      ------------------------------------------------------------------
+      This template now demonstrates three auth modes for standalone pages:
+
+      - required (default):
+        Behaves like existing pages: login is required immediately.
+
+      - optional:
+        Page can render public/read-only data without login, but can still
+        prompt login later for user actions (publish, settings, etc).
+
+      - none:
+        Never auto-login on load (pure public page).
+
+      URL behavior in this template:
+      - If ?auth=required|optional|none is present, it wins.
+      - Otherwise, if URL includes ?npub=... or ?pubkey=..., mode defaults
+        to optional because pages with explicit profile targets are commonly
+        public-readable.
+      - Otherwise, mode defaults to required.
+    */
+    let isAuthenticated = false;
+    let authMode = 'required';
+    let authedPageInitialized = false;
+    let relayActivityListenersBound = false;
+    
+    // Hamburger menu
+    let hamburgerInstance = null;
+    let isNavOpen = false;
+    
+    // Version bar buttons
+    let logoutHamburger = null;
+    let themeToggleHamburger = null;
+    let isDarkMode = false;
+
+    // App-wide user settings (NIP-78 kind 30078, d:user-settings)
+    let pageSettings = {};
+    let unsubscribeUserSettings = null;
+
+    /* ================================================================
+       DOM VARIABLES
+       ================================================================
+       Cache DOM element references for better performance.
+       ================================================================ */
+    const divBody = document.getElementById("divBody");
+    const divSideNav = document.getElementById("divSideNav");
+    const divSideNavBody = document.getElementById("divSideNavBody");
+    const divFooterCenter = document.getElementById("divFooterCenter");
+    const divFooterRight = document.getElementById("divFooterRight");
+
+    /* ================================================================
+       HAMBURGER MENU
+       ================================================================
+       Initialize and control the animated hamburger menu.
+       ================================================================ */
+    function initHamburgerMenu() {
+      hamburgerInstance = new HamburgerMorphing('#divSvgHam', {
+        foreground: 'var(--primary-color)',
+        background: 'var(--secondary-color)',
+        hover: 'var(--accent-color)'
+      });
+      hamburgerInstance.animateTo('burger');
+    }
+
+    /* ================================================================
+       SIDENAV FUNCTIONS
+       ================================================================
+       Open/close sidenav with hamburger morphing animation.
+       ================================================================ */
+    function openNav() {
+      divSideNav.style.zIndex = 3;
+      divSideNav.style.width = "clamp(400px, 50vw, 600px)";
+      isNavOpen = true;
+      if (hamburgerInstance) {
+        hamburgerInstance.animateTo('arrow_left');
+      }
+
+      
+      // Initialize version bar buttons when sidenav opens (lazy load)
+      if (!logoutHamburger) {
+        logoutHamburger = new HamburgerMorphing('#logoutHamburgerContainer', {
+          size: 24,
+          foreground: 'var(--primary-color)',
+          background: 'var(--secondary-color)',
+          hover: 'var(--accent-color)'
+        });
+        logoutHamburger.animateTo('x');
+      }
+      
+      if (!themeToggleHamburger) {
+        themeToggleHamburger = new HamburgerMorphing('#themeToggleHamburgerContainer', {
+          size: 24,
+          foreground: 'var(--primary-color)',
+          background: 'var(--secondary-color)',
+          hover: 'var(--accent-color)'
+        });
+        
+        // Determine current theme
+        const savedTheme = localStorage.getItem('theme');
+        isDarkMode = savedTheme === 'dark' || document.body.classList.contains('dark-mode');
+        const initialShape = isDarkMode ? 'moon' : 'circle';
+        themeToggleHamburger.animateTo(initialShape);
+      }
+    }
+
+    function closeNav() {
+      divSideNav.style.width = "0vw";
+      divSideNav.style.zIndex = -1;
+      isNavOpen = false;
+      if (hamburgerInstance) {
+        hamburgerInstance.animateTo('burger');
+      }
+    }
+
+    function toggleNav() {
+      if (isNavOpen) {
+        closeNav();
+      } else {
+        openNav();
+      }
+    }
+
+
+    /* ================================================================
+       AUTH MODE HELPERS
+       ================================================================
+       These functions are meant as reusable guidance for future pages.
+       ================================================================ */
+    function hasTargetPubkeyInUrl() {
+      const params = new URLSearchParams(window.location.search || '');
+      const npub = String(params.get('npub') || '').trim();
+      const pubkey = String(params.get('pubkey') || '').trim();
+      return Boolean(npub || pubkey);
+    }
+
+    function resolveAuthModeFromUrl() {
+      const params = new URLSearchParams(window.location.search || '');
+      const explicitAuth = String(params.get('auth') || '').trim().toLowerCase();
+      if (explicitAuth === 'required' || explicitAuth === 'optional' || explicitAuth === 'none') {
+        return explicitAuth;
+      }
+
+      // Convention: explicit target profiles are public-readable by default.
+      if (hasTargetPubkeyInUrl()) {
+        return 'optional';
+      }
+
+      return 'required';
+    }
+
+    function isAuthRequiredError(error) {
+      const message = String(error?.message || error || '').toLowerCase();
+      return message.includes('authentication required');
+    }
+
+    async function initializeAuthentication(mode) {
+      // required: existing behavior, throw if auth fails.
+      if (mode === 'required') {
+        await initNDKPage();
+        currentPubkey = await getPubkey();
+        isAuthenticated = true;
+        return;
+      }
+
+      // none: public page, no login attempt on load.
+      if (mode === 'none') {
+        isAuthenticated = false;
+        currentPubkey = null;
+        return;
+      }
+
+      // optional: try silent/normal init; if auth required, continue public.
+      try {
+        await initNDKPage();
+        currentPubkey = await getPubkey();
+        isAuthenticated = true;
+      } catch (error) {
+        if (isAuthRequiredError(error)) {
+          console.log('[template.html] Optional auth mode: continuing unauthenticated');
+          isAuthenticated = false;
+          currentPubkey = null;
+          return;
+        }
+        throw error;
+      }
+    }
+
+    async function initializeAuthenticatedPageFeatures() {
+      if (!isAuthenticated) {
+        await injectHeaderLoginButton();
+        return;
+      }
+      if (authedPageInitialized) return;
+
+      await injectHeaderAvatar(currentPubkey);
+      console.log('[template.html] Authenticated as:', currentPubkey);
+
+      // Hydrate app-wide user settings for this page
+      try {
+        pageSettings = await getUserSettings();
+      } catch (error) {
+        console.warn('[template.html] getUserSettings failed:', error);
+        pageSettings = {};
+      }
+
+      // Subscribe to live user settings updates (cross-tab + publish echoes)
+      if (!unsubscribeUserSettings) {
+        unsubscribeUserSettings = onUserSettings((settings) => {
+          pageSettings = settings || {};
+          // TODO: Re-render page-specific UI from pageSettings here.
+        });
+      }
+
+      // Initialize relay-dependent UI only once authenticated.
+      initFooterRelayStatus();
+      initSidenavRelaySection();
+      await initBlossomSection();
+        initAiSectionWithLocalConfig();
+      await UpdateFooter();
+
+      if (!updateIntervalId) {
+        updateIntervalId = setInterval(UpdateFooter, 1000);
+      }
+
+      // Relay activity listeners only matter after worker init/auth.
+      if (!relayActivityListenersBound) {
+        window.addEventListener('ndkRelayActivity', (event) => {
+          const { relayUrl, activity, stats } = event.detail;
+          console.log(`[template.html] Relay activity: ${relayUrl} - ${activity}`, stats);
+          setRelayActivityState(relayUrl, activity);
+        });
+
+        window.addEventListener('message', (event) => {
+          if (event.data && event.data.type === 'relayActivity') {
+            const { relayUrl, activity } = event.data;
+            console.log(`[template.html] Relay activity: ${relayUrl} - ${activity}`);
+            setRelayActivityState(relayUrl, activity);
+          }
+        });
+
+        relayActivityListenersBound = true;
+      }
+
+      authedPageInitialized = true;
+    }
+
+    async function promptLoginIfNeeded() {
+      if (isAuthenticated) return true;
+
+      await initNDKPage();
+      currentPubkey = await getPubkey();
+      isAuthenticated = true;
+      await initializeAuthenticatedPageFeatures();
+      return true;
+    }
+
+    /* ================================================================
+       UPDATE FOOTER
+       ================================================================
+       Update footer sections with relay status, pubkey, and other info.
+       Called periodically by update loop.
+       ================================================================ */
+    const UpdateFooter = async () => {
+
+      try {
+        // Update relay status visuals in footer and sidenav
+        await updateFooterRelayStatus();
+        await updateSidenavRelaySection();
+        
+        await updateBlossomSection();
+        // Clear center and right sections
+        divFooterCenter.innerHTML = '';
+        divFooterRight.innerHTML = '';
+      } catch (error) {
+        console.error('[template.html] Error updating footer:', error);
+      }
+    };
+
+    /* ================================================================
+       LOGOUT
+       ================================================================
+       Complete logout process:
+       1. Stop update loop
+       2. Disconnect from NDK worker
+       3. Logout from nostr-login-lite
+       4. Clear all storage (localStorage, sessionStorage, IndexedDB)
+       5. Reload page
+       ================================================================ */
+    const Logout = async () => {
+      console.log("[template.html] Starting logout process...");
+
+      // Stop the update loop
+      if (updateIntervalId) {
+        clearInterval(updateIntervalId);
+        updateIntervalId = null;
+      }
+
+      // Disconnect from worker
+      disconnect();
+
+      // Logout from nostr-login-lite
+      if (window.NOSTR_LOGIN_LITE && window.NOSTR_LOGIN_LITE.logout) {
+        await window.NOSTR_LOGIN_LITE.logout();
+      }
+
+      // Clear all storage
+      localStorage.clear();
+      sessionStorage.clear();
+
+      // Clear IndexedDB
+      if (window.indexedDB) {
+        const databases = await window.indexedDB.databases();
+        for (const db of databases) {
+          if (db.name) {
+            window.indexedDB.deleteDatabase(db.name);
+          }
+        }
+      }
+
+      console.log("[template.html] Logged out, reloading page");
+      location.reload(true);
+    };
+
+    /* ================================================================
+       EVENT LISTENERS
+       ================================================================
+       Wire up UI interactions.
+       Main hamburger button click handler is set up in main() after initialization.
+       ================================================================ */
+
+    /* ================================================================
+       SUBSCRIPTION EXAMPLE
+       ================================================================
+       Example of how to subscribe to Nostr events:
+       
+       const sub = subscribe(
+         { kinds: [1], authors: [pubkey], limit: 10 },
+         { closeOnEose: false, cacheUsage: 'CACHE_FIRST' }
+       );
+       
+       Cache usage options:
+       - 'CACHE_FIRST' - Check cache first, then relays
+       - 'ONLY_RELAY' - Only query relays
+       - 'ONLY_CACHE' - Only query cache
+       - 'PARALLEL' - Query cache and relays simultaneously
+       
+       Listen for events via window events:
+       window.addEventListener('ndkEvent', (event) => {
+         const evt = event.detail;
+         console.log('Received event:', evt);
+       });
+       ================================================================ */
+
+    /* ================================================================
+       PUBLISH EXAMPLE
+       ================================================================
+       Example of how to publish a Nostr event:
+       
+       const event = {
+         created_at: Math.floor(Date.now() / 1000),
+         kind: 1,
+         tags: [],
+         content: "Hello, Nostr!"
+       };
+       
+       try {
+         const result = await publishEvent(event);
+         console.log("✅ Published to:", result.relayResults.successful);
+         console.log("❌ Failed:", result.relayResults.failed);
+         console.log("Total relays:", result.totalRelays);
+       } catch (error) {
+         console.error("Publish error:", error);
+       }
+       
+       Note: Events are automatically signed by the NDK worker using
+       the message-based signer (which calls window.nostr.signEvent).
+       ================================================================ */
+
+    /* ================================================================
+       USER SETTINGS EXAMPLE (NIP-78)
+       ================================================================
+       Read/subscribe/write helper pattern for all pages:
+
+       // Read latest merged settings (cache + relay hydrated by worker)
+       const settings = await getUserSettings();
+
+       // Subscribe to cross-tab updates
+       const unsubscribe = onUserSettings((nextSettings) => {
+         // Re-render page from nextSettings
+       });
+
+       // Patch only your feature namespace
+       await patchUserSettings({
+         myFeature: {
+           someFlag: true
+         }
+       });
+
+       // On page teardown (if applicable)
+       // unsubscribe();
+       ================================================================ */
+
+    /* ================================================================
+       INITIALIZATION
+       ================================================================
+       Main initialization sequence:
+       1. Initialize hamburger menu
+       2. Set up hamburger click handler
+       3. Resolve auth mode from URL/query policy
+       4. Initialize authentication based on mode
+       5. Initialize authenticated-only features (if signed in)
+       6. Set up version bar button listeners
+       7. Restore sidenav state
+       8. Update version display
+
+       Notes:
+       - required mode = existing behavior (prompt login on load)
+       - optional mode = allow public load, login later on demand
+       - none mode = no auto-login on load
+       ================================================================ */
+    (async function main() {
+      console.log("[llm-steganography.html] Starting initialization...");
+      
+      try {
+        // Initialize hamburger menu first
+        initHamburgerMenu();
+        
+        // Add click handler to hamburger
+        const divSvgHam = document.getElementById('divSvgHam');
+        if (divSvgHam) {
+          divSvgHam.addEventListener('click', toggleNav);
+        }
+        
+        // Initialize version bar buttons
+        const themeToggleButton = document.getElementById('themeToggleButton');
+        const logoutButton = document.getElementById('logoutButton');
+        
+        if (themeToggleButton) {
+          themeToggleButton.addEventListener('click', () => {
+            isDarkMode = !isDarkMode;
+            localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+            document.documentElement.classList.toggle('dark-mode', isDarkMode);
+            document.body.classList.toggle('dark-mode', isDarkMode);
+            if (themeToggleHamburger) {
+              themeToggleHamburger.animateTo(isDarkMode ? 'moon' : 'circle');
+            }
+          });
+        }
+        
+        if (logoutButton) {
+          logoutButton.addEventListener('click', async () => {
+            try {
+              // In optional/none modes this doubles as a "Sign in" entry point.
+              if (!isAuthenticated) {
+                await promptLoginIfNeeded();
+                return;
+              }
+              await Logout();
+            } catch (error) {
+              console.error('Logout/login action failed:', error);
+            }
+          });
+        }
+
+        // Resolve and initialize page auth policy.
+        authMode = resolveAuthModeFromUrl();
+        console.log('[template.html] Resolved auth mode:', authMode);
+        await initializeAuthentication(authMode);
+
+        // Initialize authenticated features only when signed in.
+        await initializeAuthenticatedPageFeatures();
+        
+        /* ============================================================
+           EXAMPLE: Subscribe to events
+           ============================================================
+           Uncomment to subscribe to user's notes:
+           
+           const notesSub = subscribe(
+             { kinds: [1], authors: [currentPubkey], limit: 10 },
+             { closeOnEose: false, cacheUsage: 'CACHE_FIRST' }
+           );
+           console.log("[template.html] Subscribed to kind 1");
+           ============================================================ */
+        
+        /* ============================================================
+           EXAMPLE: Listen for events from worker
+           ============================================================
+           Uncomment to handle incoming events:
+           
+           window.addEventListener('ndkEvent', (event) => {
+             const evt = event.detail;
+             console.log("[template.html] Received event:", evt.kind, evt.pubkey);
+             
+             if (evt.pubkey === currentPubkey) {
+               if (evt.kind === 1) {
+                 // Handle note event
+                 console.log("Note:", evt.content);
+               }
+             }
+           });
+           ============================================================ */
+        
+        /* ============================================================
+           EXAMPLE: Listen for cached profile
+           ============================================================
+           Uncomment to handle cached profile data:
+           
+           window.addEventListener('ndkProfile', (event) => {
+             console.log("[template.html] Cached profile:", event.detail);
+             // event.detail contains profile object (name, about, etc.)
+           });
+           ============================================================ */
+        
+
+        // Optional UX note for public mode pages.
+        if (!isAuthenticated && (authMode === 'optional' || authMode === 'none')) {
+          divFooterCenter.textContent = 'Public mode';
+          divFooterRight.textContent = 'Sign in from side menu for private features';
+        }
+
+        // Update version display
+        await updateVersionDisplay();
+        
+        console.log('[template.html] Initialization complete');
+      } catch (error) {
+        console.error('[llm-steganography.html] Initialization failed:', error);
+        divBody.innerHTML = `<div style="text-align: center; padding: 50px;">
+          <div style="font-size: 24px; margin-bottom: 20px; color: red;">❌ Authentication Error</div>
+          <div style="font-size: 16px; color: #666;">${error.message}</div>
+          <div style="margin-top: 20px;">
+            <button onclick="location.reload()" style="padding: 10px 20px; font-size: 16px;">Retry</button>
+          </div>
+        </div>`;
+      }
+    })();
+
+    /* ================================================================
+       WORKER MESSAGE TYPES
+       ================================================================
+       The NDK worker can send these message types:
+       
+       1. 'response' - Response to init/subscribe/publish requests
+          - data.profile - User profile (from init)
+          - data.relays - User relays (from init)
+          - data.success - Publish success status
+          - data.relayResults - Relay publish results
+       
+       2. 'event' - Nostr event from subscription
+          - Dispatched as 'ndkEvent' window event
+          - event.detail contains the Nostr event
+       
+       3. 'eose' - End of stored events for subscription
+          - Dispatched as 'ndkEose' window event
+          - event.detail.subId contains subscription ID
+       
+       4. 'signRequest' - Request to sign event/encrypt/decrypt
+          - Handled automatically by init-ndk.mjs
+          - Calls window.nostr methods and sends response
+       
+       5. 'error' - Error from worker
+          - Logged to console automatically
+       
+       6. 'relayActivity' - Relay read/write activity notification
+          - Dispatched as 'ndkRelayActivity' window event
+          - Used to animate relay status icons in footer
+       ================================================================ */
+
+    /* ================================================================
+       DISTRIBUTED ARCHITECTURE NOTES
+       ================================================================
+       Each page is independently accessible and self-contained:
+       
+       1. Authentication persists via nostr-login-lite localStorage
+          - Login once on any page
+          - All other pages automatically authenticated
+       
+       2. NDK SharedWorker is shared across all tabs/pages
+          - Single NDK instance manages all connections
+          - Subscriptions from all pages handled by one worker
+          - Events broadcast to all connected pages
+       
+       3. Dexie cache is shared across all pages
+          - IndexedDB persists across sessions
+          - Cache-first queries are fast
+          - Reduces relay load
+       
+       4. User settings are centralized and shared
+          - Worker hydrates kind 30078 (`d:user-settings`) on init
+          - Pages read via getUserSettings()
+          - Pages patch via patchUserSettings({ featureNamespace: ... })
+          - Pages subscribe via onUserSettings() for live updates
+
+       5. Each page can be distributed independently
+          - Copy template.html and customize
+          - No dependencies on other pages
+          - Works standalone or as part of suite
+       
+       6. Message-based signer bridges worker and page
+          - Worker's NDK uses MessageBasedSigner
+          - Signer sends sign requests to page
+          - Page calls window.nostr.signEvent()
+          - Response sent back to worker
+          - NDK completes signing and publishing
+       
+       7. Relay status visualization
+          - Footer left section shows connected relays
+          - Each relay has animated icon (HamburgerMorphing)
+          - Icons morph based on activity (read/write)
+          - Temporary animations show real-time activity
+       ================================================================ */
+  </script>
+
+  <!-- ================================================================
+       LLM STEGANOGRAPHY DEMO
+       ================================================================
+       Loads GPT-2 via Transformers.js and wires up the encode/decode UI.
+       Kept as a separate module so it doesn't interfere with the page's
+       NDK/auth initialization above.
+       ================================================================ -->
+  <script type="module">
+    import {
+      AutoTokenizer,
+      AutoModelForCausalLM,
+      env,
+    } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0";
+    import { encode, decode } from "./js/stego.mjs";
+
+    const MODEL_ID = "Xenova/gpt2";
+    env.allowLocalModels = false;
+
+    // ---------------------------------------------------------------------------
+    // DOM references
+    // ---------------------------------------------------------------------------
+    const loadingSection = document.getElementById("stegoLoadingSection");
+    const loadingStatus = document.getElementById("stegoLoadingStatus");
+    const progressBar = document.getElementById("stegoProgressBar");
+    const progressFiles = document.getElementById("stegoProgressFiles");
+
+    const app = document.getElementById("stegoApp");
+
+    const contextInput = document.getElementById("stegoContextInput");
+    const keyInput = document.getElementById("stegoKeyInput");
+
+    const secretInput = document.getElementById("stegoSecretInput");
+    const encodeBtn = document.getElementById("stegoEncodeBtn");
+    const encodeStatus = document.getElementById("stegoEncodeStatus");
+    const coverOutput = document.getElementById("stegoCoverOutput");
+    const encodeInfo = document.getElementById("stegoEncodeInfo");
+    const encodeProgress = document.getElementById("stegoEncodeProgress");
+    const encodeCurrentChar = document.getElementById("stegoEncodeCurrentChar");
+    const encodeCharIndex = document.getElementById("stegoEncodeCharIndex");
+    const encodeTotalChars = document.getElementById("stegoEncodeTotalChars");
+    const encodeBitInfo = document.getElementById("stegoEncodeBitInfo");
+    const encodeProgressBar = document.getElementById("stegoEncodeProgressBar");
+
+    const decodeBtn = document.getElementById("stegoDecodeBtn");
+    const decodeStatus = document.getElementById("stegoDecodeStatus");
+    const recoveredOutput = document.getElementById("stegoRecoveredOutput");
+    const matchIndicator = document.getElementById("stegoMatchIndicator");
+    const decodeProgress = document.getElementById("stegoDecodeProgress");
+    const decodeCurrentToken = document.getElementById("stegoDecodeCurrentToken");
+    const decodeRecoveredBit = document.getElementById("stegoDecodeRecoveredBit");
+    const decodeBitInfo = document.getElementById("stegoDecodeBitInfo");
+    const decodeProgressBar = document.getElementById("stegoDecodeProgressBar");
+    const decodeRecoveredChars = document.getElementById("stegoDecodeRecoveredChars");
+
+    const howToggle = document.getElementById("stegoHowToggle");
+    const howContent = document.getElementById("stegoHowContent");
+
+    // State
+    let model = null;
+    let tokenizer = null;
+    let lastCoverText = null;
+    let lastNumBits = null;
+    let lastSecret = null;
+
+    // ---------------------------------------------------------------------------
+    // Collapsible "How It Works"
+    // ---------------------------------------------------------------------------
+    howToggle.addEventListener("click", () => {
+      const expanded = howToggle.getAttribute("aria-expanded") === "true";
+      howToggle.setAttribute("aria-expanded", String(!expanded));
+      howContent.classList.toggle("stegoHidden", expanded);
+    });
+
+    // ---------------------------------------------------------------------------
+    // Model loading with progress
+    // ---------------------------------------------------------------------------
+    async function loadModel() {
+      loadingStatus.textContent = "Loading model...";
+
+      const progressCallback = (info) => {
+        if (info.status === "initiate") {
+          addProgressFile(info.file, "queued");
+        } else if (info.status === "download") {
+          addProgressFile(info.file, "downloading", info.progress);
+        } else if (info.status === "progress") {
+          updateProgressFile(info.file, info.progress);
+          updateOverallProgress();
+        } else if (info.status === "done") {
+          updateProgressFile(info.file, 100, true);
+          updateOverallProgress();
+        }
+      };
+
+      try {
+        const device = await maybeGetWebGPU();
+        if (device) {
+          env.backends.onnx.wasm.proxy = false;
+          loadingStatus.textContent = "WebGPU detected — loading model...";
+        } else {
+          loadingStatus.textContent = "Loading model (WASM backend)...";
+        }
+
+        tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID, {
+          progress_callback: progressCallback,
+        });
+        model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, {
+          progress_callback: progressCallback,
+          dtype: "int8",
+        });
+
+        loadingStatus.textContent = "Model ready!";
+        progressBar.style.width = "100%";
+        setTimeout(() => {
+          loadingSection.classList.add("stegoHidden");
+          app.classList.remove("stegoHidden");
+        }, 400);
+      } catch (err) {
+        loadingStatus.textContent = "Failed to load model.";
+        console.error(err);
+        addProgressFile(`Error: ${err.message || err}`, "error");
+      }
+    }
+
+    async function maybeGetWebGPU() {
+      try {
+        if (typeof navigator !== "undefined" && navigator.gpu) {
+          const adapter = await navigator.gpu.requestAdapter();
+          return adapter || null;
+        }
+      } catch (_) {}
+      return null;
+    }
+
+    const fileProgress = new Map();
+
+    function addProgressFile(file, state, progress = 0) {
+      if (!file) return;
+      if (!fileProgress.has(file)) {
+        const div = document.createElement("div");
+        div.dataset.file = file;
+        progressFiles.appendChild(div);
+        fileProgress.set(file, div);
+      }
+      updateProgressFile(file, progress, state === "done");
+    }
+
+    function updateProgressFile(file, progress, done = false) {
+      const div = fileProgress.get(file);
+      if (!div) return;
+      const pct = done ? 100 : Math.round(progress || 0);
+      const name = file.split("/").pop();
+      div.textContent = `${name} — ${pct}%`;
+    }
+
+    function updateOverallProgress() {
+      if (fileProgress.size === 0) return;
+      let total = 0;
+      for (const div of fileProgress.values()) {
+        const m = div.textContent.match(/(\d+)%/);
+        if (m) total += parseInt(m[1], 10);
+      }
+      const avg = total / fileProgress.size;
+      progressBar.style.width = `${Math.min(100, avg)}%`;
+    }
+
+    // ---------------------------------------------------------------------------
+    // Encode button
+    // ---------------------------------------------------------------------------
+    encodeBtn.addEventListener("click", async () => {
+      if (!model || !tokenizer) return;
+      const secret = secretInput.value;
+      const context = contextInput.value;
+      const key = parseInt(keyInput.value, 10);
+
+      if (!secret) {
+        encodeStatus.textContent = "Please enter a secret message.";
+        return;
+      }
+      if (Number.isNaN(key)) {
+        encodeStatus.textContent = "Shared key must be an integer.";
+        return;
+      }
+
+      setBusy(true);
+      encodeStatus.textContent = "Encoding...";
+      coverOutput.value = "";
+      encodeInfo.textContent = "";
+      matchIndicator.textContent = "";
+      recoveredOutput.value = "";
+      encodeProgress.classList.remove("stegoHidden");
+      encodeProgressBar.style.width = "0%";
+      encodeTotalChars.textContent = String(secret.length);
+      encodeCharIndex.textContent = "0";
+      encodeCurrentChar.textContent = "";
+      encodeBitInfo.textContent = `bit 0 of ${secret.length * 8}`;
+
+      try {
+        await new Promise(r => setTimeout(r, 0));
+        const result = await encode(
+          model, tokenizer, secret, context, key, 3,
+          (textSoFar, bitNum, totalBits, currentChar, charIndex, totalChars) => {
+            coverOutput.value = textSoFar;
+            encodeCurrentChar.textContent = currentChar;
+            encodeCharIndex.textContent = String(charIndex);
+            encodeTotalChars.textContent = String(totalChars);
+            encodeBitInfo.textContent = `bit ${bitNum} of ${totalBits}`;
+            const pct = totalBits > 0 ? (bitNum / totalBits) * 100 : 0;
+            encodeProgressBar.style.width = `${pct}%`;
+            encodeStatus.textContent =
+              `Encoding character "${currentChar}" (${charIndex}/${totalChars}) — bit ${bitNum} of ${totalBits}`;
+          }
+        );
+        lastCoverText = result.coverText;
+        lastNumBits = result.numBits;
+        lastSecret = secret;
+        coverOutput.value = result.coverText;
+        encodeProgressBar.style.width = "100%";
+        const genTokens = result.tokenCount - tokenizeContextLength(context);
+        const dataTokens = genTokens - 3;
+        encodeInfo.textContent =
+          `Encoded "${secret}" (${result.numBits} bits) in ${dataTokens} tokens ` +
+          `+ 3 padding tokens. Total tokens: ${result.tokenCount}.`;
+        encodeStatus.textContent = "Encoding complete.";
+        encodeProgress.classList.add("stegoHidden");
+      } catch (err) {
+        console.error(err);
+        encodeStatus.textContent = `Error: ${err.message || err}`;
+        encodeProgress.classList.add("stegoHidden");
+      } finally {
+        setBusy(false);
+      }
+    });
+
+    // ---------------------------------------------------------------------------
+    // Decode button
+    // ---------------------------------------------------------------------------
+    decodeBtn.addEventListener("click", async () => {
+      if (!model || !tokenizer) return;
+      if (!lastCoverText || lastNumBits == null) {
+        decodeStatus.textContent = "Encode a message first.";
+        return;
+      }
+      const context = contextInput.value;
+      const key = parseInt(keyInput.value, 10);
+      if (Number.isNaN(key)) {
+        decodeStatus.textContent = "Shared key must be an integer.";
+        return;
+      }
+
+      setBusy(true);
+      decodeStatus.textContent = "Decoding...";
+      recoveredOutput.value = "";
+      matchIndicator.textContent = "";
+      matchIndicator.className = "stegoInfo";
+      decodeProgress.classList.remove("stegoHidden");
+      decodeProgressBar.style.width = "0%";
+      decodeCurrentToken.textContent = "";
+      decodeRecoveredBit.textContent = "-";
+      decodeBitInfo.textContent = `bit 0 of ${lastNumBits}`;
+      decodeRecoveredChars.textContent = "";
+
+      try {
+        await new Promise(r => setTimeout(r, 0));
+        const recovered = await decode(
+          model, tokenizer, lastCoverText, context, key, lastNumBits, 3,
+          (bitsRecovered, totalBits, recoveredChars, currentToken, recoveredBit) => {
+            decodeCurrentToken.textContent = `"${currentToken}"`;
+            decodeRecoveredBit.textContent = String(recoveredBit);
+            decodeBitInfo.textContent = `Decoding... bit ${bitsRecovered} of ${totalBits}`;
+            decodeRecoveredChars.textContent = recoveredChars;
+            const pct = totalBits > 0 ? (bitsRecovered / totalBits) * 100 : 0;
+            decodeProgressBar.style.width = `${pct}%`;
+            decodeStatus.textContent =
+              `Processing token: "${currentToken}" → bit ${recoveredBit}`;
+          }
+        );
+        recoveredOutput.value = recovered;
+        decodeProgressBar.style.width = "100%";
+        const dataTokens = lastNumBits;
+        if (recovered === lastSecret) {
+          matchIndicator.textContent =
+            `Decoded ${lastNumBits} bits from ${dataTokens} tokens\n` +
+            `Recovered message: ${recovered}\n` +
+            `✓ Match!`;
+          matchIndicator.className = "stegoInfo match-success";
+        } else {
+          matchIndicator.textContent =
+            `Decoded ${lastNumBits} bits from ${dataTokens} tokens\n` +
+            `Recovered message: ${recovered}\n` +
+            `✗ Mismatch. Expected "${lastSecret}", got "${recovered}".`;
+          matchIndicator.className = "stegoInfo match-fail";
+        }
+        decodeStatus.textContent = "Decoding complete.";
+        decodeProgress.classList.add("stegoHidden");
+      } catch (err) {
+        console.error(err);
+        decodeStatus.textContent = `Error: ${err.message || err}`;
+        decodeProgress.classList.add("stegoHidden");
+      } finally {
+        setBusy(false);
+      }
+    });
+
+    // ---------------------------------------------------------------------------
+    // Helpers
+    // ---------------------------------------------------------------------------
+    function setBusy(busy) {
+      encodeBtn.disabled = busy;
+      decodeBtn.disabled = busy;
+    }
+
+    function tokenizeContextLength(context) {
+      if (!tokenizer) return 0;
+      try {
+        const inputs = tokenizer(context, { add_special_tokens: false });
+        let ids = inputs?.input_ids ?? inputs;
+        if (ids && typeof ids.data !== "undefined") return ids.data.length;
+        if (Array.isArray(ids)) {
+          return Array.isArray(ids[0]) ? ids[0].length : ids.length;
+        }
+        return 0;
+      } catch (_) {
+        return 0;
+      }
+    }
+
+    // Kick off model loading on page load
+    loadModel();
+  </script>
+</body>
+
+</html>