diff --git a/dream-diary-preview-v2.html b/dream-diary-preview-v2.html
index 87c8721733b..d2c7658a1ce 100644
--- a/dream-diary-preview-v2.html
+++ b/dream-diary-preview-v2.html
@@ -1,399 +1,933 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Dream Diary Preview</title>
-<style>
-  :root {
-    --bg: #0a0d14;
-    --panel: #12151e;
-    --border: #1e2230;
-    --text: #c8cdd8;
-    --text-strong: #e8ecf4;
-    --muted: #6b7280;
-    --accent: #ff4d4d;
-    --accent-muted: #b34747;
-    --accent-subtle: rgba(255, 77, 77, 0.06);
-    --accent-2: #fbbf24;
-    --ok: #22c55e;
-    --ok-muted: #4ade80;
-    --danger: #ef4444;
-    --mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
-    --radius-full: 9999px;
-  }
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dream Diary Preview</title>
+    <style>
+      :root {
+        --bg: #0a0d14;
+        --panel: #12151e;
+        --border: #1e2230;
+        --text: #c8cdd8;
+        --text-strong: #e8ecf4;
+        --muted: #6b7280;
+        --accent: #ff4d4d;
+        --accent-muted: #b34747;
+        --accent-subtle: rgba(255, 77, 77, 0.06);
+        --accent-2: #fbbf24;
+        --ok: #22c55e;
+        --ok-muted: #4ade80;
+        --danger: #ef4444;
+        --mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
+        --radius-full: 9999px;
+      }
 
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  html { scroll-behavior: smooth; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    overflow-x: hidden;
-  }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        scroll-behavior: smooth;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        overflow-x: hidden;
+      }
 
-  .btn { cursor: pointer; border: none; font-family: inherit; font-size: 12px; border-radius: 8px; padding: 6px 12px; transition: all 140ms ease; }
-  .btn--subtle { background: color-mix(in oklab, var(--panel) 80%, transparent); color: var(--text); border: 1px solid var(--border); }
-  .btn--subtle:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
-  .btn--sm { font-size: 11px; padding: 4px 10px; }
+      .btn {
+        cursor: pointer;
+        border: none;
+        font-family: inherit;
+        font-size: 12px;
+        border-radius: 8px;
+        padding: 6px 12px;
+        transition: all 140ms ease;
+      }
+      .btn--subtle {
+        background: color-mix(in oklab, var(--panel) 80%, transparent);
+        color: var(--text);
+        border: 1px solid var(--border);
+      }
+      .btn--subtle:hover {
+        border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
+      }
+      .btn--sm {
+        font-size: 11px;
+        padding: 4px 10px;
+      }
 
-  /* ═══ Hero animation ═══ */
-  .dreams-page { display: flex; flex-direction: column; }
+      /* ═══ Hero animation ═══ */
+      .dreams-page {
+        display: flex;
+        flex-direction: column;
+      }
 
-  .dreams {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    overflow: hidden;
-    user-select: none;
-  }
+      .dreams {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        overflow: hidden;
+        user-select: none;
+      }
 
-  .dreams__lobster {
-    animation: dreams-breathe 4s ease-in-out infinite;
-    filter: drop-shadow(0 0 40px rgba(255, 77, 77, 0.25));
-  }
-  .dreams__lobster svg { width: 160px; height: 160px; }
+      .dreams__lobster {
+        animation: dreams-breathe 4s ease-in-out infinite;
+        filter: drop-shadow(0 0 40px rgba(255, 77, 77, 0.25));
+      }
+      .dreams__lobster svg {
+        width: 160px;
+        height: 160px;
+      }
 
-  @keyframes dreams-breathe {
-    0%, 100% { transform: scale(1) translateY(0); }
-    50% { transform: scale(1.04) translateY(-4px); }
-  }
+      @keyframes dreams-breathe {
+        0%,
+        100% {
+          transform: scale(1) translateY(0);
+        }
+        50% {
+          transform: scale(1.04) translateY(-4px);
+        }
+      }
 
-  .dreams__z {
-    position: absolute;
-    font-family: var(--mono);
-    font-weight: 700;
-    color: var(--accent);
-    opacity: 0;
-    animation: dreams-float-z 4s ease-out infinite;
-  }
-  .dreams__z:nth-child(14) { font-size: 14px; right: calc(50% - 100px); top: calc(50% - 80px); animation-delay: 0s; }
-  .dreams__z:nth-child(15) { font-size: 20px; right: calc(50% - 130px); top: calc(50% - 120px); animation-delay: 1.2s; }
-  .dreams__z:nth-child(16) { font-size: 28px; right: calc(50% - 160px); top: calc(50% - 170px); animation-delay: 2.4s; }
+      .dreams__z {
+        position: absolute;
+        font-family: var(--mono);
+        font-weight: 700;
+        color: var(--accent);
+        opacity: 0;
+        animation: dreams-float-z 4s ease-out infinite;
+      }
+      .dreams__z:nth-child(14) {
+        font-size: 14px;
+        right: calc(50% - 100px);
+        top: calc(50% - 80px);
+        animation-delay: 0s;
+      }
+      .dreams__z:nth-child(15) {
+        font-size: 20px;
+        right: calc(50% - 130px);
+        top: calc(50% - 120px);
+        animation-delay: 1.2s;
+      }
+      .dreams__z:nth-child(16) {
+        font-size: 28px;
+        right: calc(50% - 160px);
+        top: calc(50% - 170px);
+        animation-delay: 2.4s;
+      }
 
-  @keyframes dreams-float-z {
-    0% { opacity: 0; transform: translateY(10px) rotate(-5deg); }
-    15% { opacity: 0.7; }
-    80% { opacity: 0.3; }
-    100% { opacity: 0; transform: translateY(-40px) rotate(10deg); }
-  }
+      @keyframes dreams-float-z {
+        0% {
+          opacity: 0;
+          transform: translateY(10px) rotate(-5deg);
+        }
+        15% {
+          opacity: 0.7;
+        }
+        80% {
+          opacity: 0.3;
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-40px) rotate(10deg);
+        }
+      }
 
-  .dreams__star {
-    position: absolute; border-radius: 50%;
-    animation: dreams-twinkle 3s ease-in-out infinite alternate;
-  }
-  @keyframes dreams-twinkle {
-    0% { opacity: 0.15; transform: scale(0.8); }
-    100% { opacity: 0.7; transform: scale(1.2); }
-  }
+      .dreams__star {
+        position: absolute;
+        border-radius: 50%;
+        animation: dreams-twinkle 3s ease-in-out infinite alternate;
+      }
+      @keyframes dreams-twinkle {
+        0% {
+          opacity: 0.15;
+          transform: scale(0.8);
+        }
+        100% {
+          opacity: 0.7;
+          transform: scale(1.2);
+        }
+      }
 
-  .dreams__moon {
-    position: absolute; top: 40px; right: 80px;
-    width: 64px; height: 64px; border-radius: 50%;
-    background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
-    box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 0 80px rgba(251, 191, 36, 0.08);
-    opacity: 0.7;
-    animation: dreams-moon-glow 8s ease-in-out infinite alternate;
-  }
-  @keyframes dreams-moon-glow {
-    0% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 0 80px rgba(251, 191, 36, 0.08); opacity: 0.6; }
-    100% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.3), 0 0 100px rgba(251, 191, 36, 0.12); opacity: 0.8; }
-  }
+      .dreams__moon {
+        position: absolute;
+        top: 40px;
+        right: 80px;
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
+        box-shadow:
+          0 0 40px rgba(251, 191, 36, 0.2),
+          0 0 80px rgba(251, 191, 36, 0.08);
+        opacity: 0.7;
+        animation: dreams-moon-glow 8s ease-in-out infinite alternate;
+      }
+      @keyframes dreams-moon-glow {
+        0% {
+          box-shadow:
+            0 0 40px rgba(251, 191, 36, 0.2),
+            0 0 80px rgba(251, 191, 36, 0.08);
+          opacity: 0.6;
+        }
+        100% {
+          box-shadow:
+            0 0 50px rgba(251, 191, 36, 0.3),
+            0 0 100px rgba(251, 191, 36, 0.12);
+          opacity: 0.8;
+        }
+      }
 
-  .dreams__glow {
-    position: absolute; top: calc(50% + 40px); left: 50%;
-    transform: translateX(-50%); width: 240px; height: 100px; border-radius: 50%;
-    background: radial-gradient(ellipse, rgba(255, 77, 77, 0.08) 0%, transparent 70%);
-    pointer-events: none; animation: dreams-glow-pulse 4s ease-in-out infinite;
-  }
-  @keyframes dreams-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
+      .dreams__glow {
+        position: absolute;
+        top: calc(50% + 40px);
+        left: 50%;
+        transform: translateX(-50%);
+        width: 240px;
+        height: 100px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse, rgba(255, 77, 77, 0.08) 0%, transparent 70%);
+        pointer-events: none;
+        animation: dreams-glow-pulse 4s ease-in-out infinite;
+      }
+      @keyframes dreams-glow-pulse {
+        0%,
+        100% {
+          opacity: 0.6;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
 
-  .dreams__bubble {
-    position: absolute; top: calc(50% - 200px); left: calc(50% - 200px);
-    padding: 16px 20px; background: var(--accent-subtle);
-    border: 1px solid rgba(255, 92, 92, 0.12); border-radius: 20px;
-    display: flex; flex-direction: column; align-items: center; gap: 6px;
-    animation: dreams-bubble-float 6s ease-in-out infinite; pointer-events: none;
-  }
-  .dreams__bubble-text { font-size: 16px; color: var(--accent); font-style: italic; opacity: 0.8; min-width: 180px; text-align: center; }
-  .dreams__bubble-dot { position: absolute; border-radius: 50%; background: var(--accent-subtle); border: 1px solid rgba(255, 92, 92, 0.1); animation: dreams-bubble-float 6s ease-in-out infinite; }
-  @keyframes dreams-bubble-float {
-    0%, 100% { transform: translateY(0); opacity: 0.8; }
-    50% { transform: translateY(-8px); opacity: 1; }
-  }
+      .dreams__bubble {
+        position: absolute;
+        top: calc(50% - 200px);
+        left: calc(50% - 200px);
+        padding: 16px 20px;
+        background: var(--accent-subtle);
+        border: 1px solid rgba(255, 92, 92, 0.12);
+        border-radius: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        animation: dreams-bubble-float 6s ease-in-out infinite;
+        pointer-events: none;
+      }
+      .dreams__bubble-text {
+        font-size: 16px;
+        color: var(--accent);
+        font-style: italic;
+        opacity: 0.8;
+        min-width: 180px;
+        text-align: center;
+      }
+      .dreams__bubble-dot {
+        position: absolute;
+        border-radius: 50%;
+        background: var(--accent-subtle);
+        border: 1px solid rgba(255, 92, 92, 0.1);
+        animation: dreams-bubble-float 6s ease-in-out infinite;
+      }
+      @keyframes dreams-bubble-float {
+        0%,
+        100% {
+          transform: translateY(0);
+          opacity: 0.8;
+        }
+        50% {
+          transform: translateY(-8px);
+          opacity: 1;
+        }
+      }
 
-  .dreams__status { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }
-  .dreams__status-label { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
-  .dreams__status-detail { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ok-muted); }
-  .dreams__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: dreams-dot-pulse 2s ease-in-out infinite; }
-  @keyframes dreams-dot-pulse {
-    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
-    50% { opacity: 0.7; box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2); }
-  }
+      .dreams__status {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        margin-top: 32px;
+      }
+      .dreams__status-label {
+        font-size: 13px;
+        color: var(--muted);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        font-weight: 500;
+      }
+      .dreams__status-detail {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 12px;
+        color: var(--ok-muted);
+      }
+      .dreams__status-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--ok);
+        animation: dreams-dot-pulse 2s ease-in-out infinite;
+      }
+      @keyframes dreams-dot-pulse {
+        0%,
+        100% {
+          opacity: 1;
+          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
+        }
+        50% {
+          opacity: 0.7;
+          box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2);
+        }
+      }
 
-  .dreams__stats { display: flex; align-items: center; gap: 48px; margin-top: 36px; z-index: 1; }
-  .dreams__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
-  .dreams__stat-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
-  .dreams__stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
-  .dreams__stat-divider { width: 1px; height: 32px; background: var(--border); }
+      .dreams__stats {
+        display: flex;
+        align-items: center;
+        gap: 48px;
+        margin-top: 36px;
+        z-index: 1;
+      }
+      .dreams__stat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+      }
+      .dreams__stat-value {
+        font-size: 28px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+      }
+      .dreams__stat-label {
+        font-size: 11px;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      .dreams__stat-divider {
+        width: 1px;
+        height: 32px;
+        background: var(--border);
+      }
 
-  /* ═══ Compact phase bar ═══ */
-  .dreams__phase-bar {
-    position: absolute; bottom: 0; left: 0; right: 0;
-    display: flex; align-items: center; justify-content: center; gap: 24px;
-    padding: 12px 24px;
-    background: linear-gradient(0deg, color-mix(in oklab, var(--bg) 80%, transparent), transparent);
-    z-index: 1;
-  }
-  .dreams__phase-bar-phases { display: flex; align-items: center; gap: 16px; }
-  .dreams__phase-pip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
-  .dreams__phase-pip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.4; }
-  .dreams__phase-pip--on .dreams__phase-pip-dot { background: var(--ok); opacity: 1; box-shadow: 0 0 6px rgba(34, 197, 94, 0.3); }
-  .dreams__phase-pip--on { color: var(--text); }
-  .dreams__phase-pip-time { font-size: 10px; color: var(--muted); opacity: 0.7; }
-  .dreams__phase-bar-actions { display: flex; align-items: center; gap: 6px; }
+      /* ═══ Compact phase bar ═══ */
+      .dreams__phase-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        padding: 12px 24px;
+        background: linear-gradient(
+          0deg,
+          color-mix(in oklab, var(--bg) 80%, transparent),
+          transparent
+        );
+        z-index: 1;
+      }
+      .dreams__phase-bar-phases {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .dreams__phase-pip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--muted);
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+      .dreams__phase-pip-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--muted);
+        opacity: 0.4;
+      }
+      .dreams__phase-pip--on .dreams__phase-pip-dot {
+        background: var(--ok);
+        opacity: 1;
+        box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
+      }
+      .dreams__phase-pip--on {
+        color: var(--text);
+      }
+      .dreams__phase-pip-time {
+        font-size: 10px;
+        color: var(--muted);
+        opacity: 0.7;
+      }
+      .dreams__phase-bar-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
 
-  /* ═══ Dream Diary ═══ */
-  .dreams-diary {
-    position: relative; display: flex; flex-direction: column; align-items: center;
-    padding: 48px 24px 64px; min-height: 320px;
-    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 94%, #0d0818) 40%, color-mix(in oklab, var(--bg) 88%, #0d0818) 100%);
-  }
-  .dreams-diary::before {
-    content: ""; position: absolute; inset: 0;
-    background: linear-gradient(135deg, transparent 30%, rgba(251,191,36,0.012) 45%, rgba(255,77,77,0.015) 55%, transparent 70%);
-    background-size: 400% 400%; animation: diary-shimmer 20s ease-in-out infinite;
-    pointer-events: none;
-  }
-  @keyframes diary-shimmer { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
+      /* ═══ Dream Diary ═══ */
+      .dreams-diary {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 48px 24px 64px;
+        min-height: 320px;
+        background: linear-gradient(
+          180deg,
+          var(--bg) 0%,
+          color-mix(in oklab, var(--bg) 94%, #0d0818) 40%,
+          color-mix(in oklab, var(--bg) 88%, #0d0818) 100%
+        );
+      }
+      .dreams-diary::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          135deg,
+          transparent 30%,
+          rgba(251, 191, 36, 0.012) 45%,
+          rgba(255, 77, 77, 0.015) 55%,
+          transparent 70%
+        );
+        background-size: 400% 400%;
+        animation: diary-shimmer 20s ease-in-out infinite;
+        pointer-events: none;
+      }
+      @keyframes diary-shimmer {
+        0%,
+        100% {
+          background-position: 0% 0%;
+        }
+        50% {
+          background-position: 100% 100%;
+        }
+      }
 
-  .dreams-diary__header {
-    display: flex; align-items: center; gap: 16px;
-    margin-bottom: 32px; width: 100%; max-width: 520px;
-    position: relative; z-index: 1;
-  }
-  .dreams-diary__title { font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; flex: 1; }
-  .dreams-diary__nav { display: flex; align-items: center; gap: 4px; }
-  .dreams-diary__page { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; opacity: 0.6; }
+      .dreams-diary__header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 32px;
+        width: 100%;
+        max-width: 520px;
+        position: relative;
+        z-index: 1;
+      }
+      .dreams-diary__title {
+        font-size: 10px;
+        font-weight: 500;
+        color: var(--muted);
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        opacity: 0.7;
+        flex: 1;
+      }
+      .dreams-diary__nav {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .dreams-diary__page {
+        font-size: 11px;
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+        min-width: 36px;
+        text-align: center;
+        opacity: 0.6;
+      }
 
-  .dreams-diary__nav-btn {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 22px; height: 22px; border-radius: 6px;
-    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
-    background: transparent; color: var(--muted); font-size: 14px; line-height: 1;
-    cursor: pointer; transition: color 140ms ease, border-color 140ms ease; padding: 0;
-  }
-  .dreams-diary__nav-btn:hover:not(:disabled) { color: var(--text); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
-  .dreams-diary__nav-btn:disabled { opacity: 0.2; cursor: default; }
+      .dreams-diary__nav-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 6px;
+        border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
+        background: transparent;
+        color: var(--muted);
+        font-size: 14px;
+        line-height: 1;
+        cursor: pointer;
+        transition:
+          color 140ms ease,
+          border-color 140ms ease;
+        padding: 0;
+      }
+      .dreams-diary__nav-btn:hover:not(:disabled) {
+        color: var(--text);
+        border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
+      }
+      .dreams-diary__nav-btn:disabled {
+        opacity: 0.2;
+        cursor: default;
+      }
 
-  .dreams-diary__entry {
-    position: relative; max-width: 520px; width: 100%; padding: 0 0 0 20px;
-    z-index: 1; animation: diary-entry-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-  @keyframes diary-entry-reveal {
-    0% { opacity: 0; transform: translateY(16px); filter: blur(8px); }
-    50% { filter: blur(2px); }
-    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
-  }
+      .dreams-diary__entry {
+        position: relative;
+        max-width: 520px;
+        width: 100%;
+        padding: 0 0 0 20px;
+        z-index: 1;
+        animation: diary-entry-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+      }
+      @keyframes diary-entry-reveal {
+        0% {
+          opacity: 0;
+          transform: translateY(16px);
+          filter: blur(8px);
+        }
+        50% {
+          filter: blur(2px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0);
+          filter: blur(0);
+        }
+      }
 
-  .dreams-diary__accent {
-    position: absolute; top: 4px; left: 0; width: 2px; height: calc(100% - 8px); border-radius: 2px;
-    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 40%, transparent) 0%, color-mix(in oklab, var(--accent) 8%, transparent) 100%);
-    animation: diary-glow-pulse 6s ease-in-out infinite alternate;
-  }
-  @keyframes diary-glow-pulse { 0% { opacity: 0.25; } 100% { opacity: 0.65; } }
+      .dreams-diary__accent {
+        position: absolute;
+        top: 4px;
+        left: 0;
+        width: 2px;
+        height: calc(100% - 8px);
+        border-radius: 2px;
+        background: linear-gradient(
+          180deg,
+          color-mix(in oklab, var(--accent) 40%, transparent) 0%,
+          color-mix(in oklab, var(--accent) 8%, transparent) 100%
+        );
+        animation: diary-glow-pulse 6s ease-in-out infinite alternate;
+      }
+      @keyframes diary-glow-pulse {
+        0% {
+          opacity: 0.25;
+        }
+        100% {
+          opacity: 0.65;
+        }
+      }
 
-  .dreams-diary__date { display: block; font-size: 10px; color: var(--accent-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-bottom: 16px; opacity: 0.8; }
+      .dreams-diary__date {
+        display: block;
+        font-size: 10px;
+        color: var(--accent-muted);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        font-weight: 400;
+        margin-bottom: 16px;
+        opacity: 0.8;
+      }
 
-  .dreams-diary__para {
-    margin: 0 0 12px; font-size: 14px; line-height: 1.8;
-    color: color-mix(in oklab, var(--text) 85%, var(--muted));
-    font-style: italic;
-    animation: diary-text-stream 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-  .dreams-diary__para:last-child { margin-bottom: 0; }
+      .dreams-diary__para {
+        margin: 0 0 12px;
+        font-size: 14px;
+        line-height: 1.8;
+        color: color-mix(in oklab, var(--text) 85%, var(--muted));
+        font-style: italic;
+        animation: diary-text-stream 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+      }
+      .dreams-diary__para:last-child {
+        margin-bottom: 0;
+      }
 
-  @keyframes diary-text-stream {
-    0% { opacity: 0; mask-image: linear-gradient(90deg, black 0%, transparent 0%); -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 0%); }
-    30% { opacity: 1; }
-    100% { opacity: 1; mask-image: linear-gradient(90deg, black 100%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, black 100%, transparent 100%); }
-  }
-</style>
-</head>
-<body>
-<div class="dreams-page">
+      @keyframes diary-text-stream {
+        0% {
+          opacity: 0;
+          mask-image: linear-gradient(90deg, black 0%, transparent 0%);
+          -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 0%);
+        }
+        30% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 1;
+          mask-image: linear-gradient(90deg, black 100%, transparent 100%);
+          -webkit-mask-image: linear-gradient(90deg, black 100%, transparent 100%);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dreams-page">
+      <!-- ═══ Hero: Full-viewport animation ═══ -->
+      <section class="dreams">
+        <div
+          class="dreams__star"
+          style="
+            top: 8%;
+            left: 15%;
+            width: 3px;
+            height: 3px;
+            background: var(--text);
+            animation-delay: 0s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 12%;
+            left: 72%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 1.4s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 22%;
+            left: 35%;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-muted);
+            animation-delay: 0.6s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 18%;
+            left: 88%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 2.1s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 35%;
+            left: 8%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 0.9s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 45%;
+            left: 92%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 1.7s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 55%;
+            left: 25%;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-muted);
+            animation-delay: 2.5s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 65%;
+            left: 78%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 0.3s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 75%;
+            left: 45%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 1.1s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 82%;
+            left: 60%;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-muted);
+            animation-delay: 1.8s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 30%;
+            left: 55%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 0.4s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 88%;
+            left: 18%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 2.3s;
+          "
+        ></div>
 
-  <!-- ═══ Hero: Full-viewport animation ═══ -->
-  <section class="dreams">
-    <div class="dreams__star" style="top:8%;left:15%;width:3px;height:3px;background:var(--text);animation-delay:0s;"></div>
-    <div class="dreams__star" style="top:12%;left:72%;width:2px;height:2px;background:var(--text);animation-delay:1.4s;"></div>
-    <div class="dreams__star" style="top:22%;left:35%;width:3px;height:3px;background:var(--accent-muted);animation-delay:0.6s;"></div>
-    <div class="dreams__star" style="top:18%;left:88%;width:2px;height:2px;background:var(--text);animation-delay:2.1s;"></div>
-    <div class="dreams__star" style="top:35%;left:8%;width:2px;height:2px;background:var(--text);animation-delay:0.9s;"></div>
-    <div class="dreams__star" style="top:45%;left:92%;width:2px;height:2px;background:var(--text);animation-delay:1.7s;"></div>
-    <div class="dreams__star" style="top:55%;left:25%;width:3px;height:3px;background:var(--accent-muted);animation-delay:2.5s;"></div>
-    <div class="dreams__star" style="top:65%;left:78%;width:2px;height:2px;background:var(--text);animation-delay:0.3s;"></div>
-    <div class="dreams__star" style="top:75%;left:45%;width:2px;height:2px;background:var(--text);animation-delay:1.1s;"></div>
-    <div class="dreams__star" style="top:82%;left:60%;width:3px;height:3px;background:var(--accent-muted);animation-delay:1.8s;"></div>
-    <div class="dreams__star" style="top:30%;left:55%;width:2px;height:2px;background:var(--text);animation-delay:0.4s;"></div>
-    <div class="dreams__star" style="top:88%;left:18%;width:2px;height:2px;background:var(--text);animation-delay:2.3s;"></div>
+        <div class="dreams__moon"></div>
 
-    <div class="dreams__moon"></div>
+        <div class="dreams__bubble">
+          <span class="dreams__bubble-text">consolidating memories...</span>
+        </div>
+        <div
+          class="dreams__bubble-dot"
+          style="
+            top: calc(50% - 100px);
+            left: calc(50% - 80px);
+            width: 12px;
+            height: 12px;
+            animation-delay: 0.2s;
+          "
+        ></div>
+        <div
+          class="dreams__bubble-dot"
+          style="
+            top: calc(50% - 70px);
+            left: calc(50% - 50px);
+            width: 8px;
+            height: 8px;
+            animation-delay: 0.4s;
+          "
+        ></div>
 
-    <div class="dreams__bubble">
-      <span class="dreams__bubble-text">consolidating memories...</span>
-    </div>
-    <div class="dreams__bubble-dot" style="top:calc(50% - 100px);left:calc(50% - 80px);width:12px;height:12px;animation-delay:0.2s;"></div>
-    <div class="dreams__bubble-dot" style="top:calc(50% - 70px);left:calc(50% - 50px);width:8px;height:8px;animation-delay:0.4s;"></div>
+        <div class="dreams__glow"></div>
+        <div class="dreams__lobster">
+          <svg viewBox="0 0 120 120" fill="none">
+            <defs>
+              <linearGradient id="dream-lob-g" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#ff4d4d" />
+                <stop offset="100%" stop-color="#991b1b" />
+              </linearGradient>
+            </defs>
+            <path
+              d="M60 10C30 10 15 35 15 55C15 75 30 95 45 100L45 110L55 110L55 100C55 100 60 102 65 100L65 110L75 110L75 100C90 95 105 75 105 55C105 35 90 10 60 10Z"
+              fill="url(#dream-lob-g)"
+            />
+            <path
+              d="M20 45C5 40 0 50 5 60C10 70 20 65 25 55C28 48 25 45 20 45Z"
+              fill="url(#dream-lob-g)"
+            />
+            <path
+              d="M100 45C115 40 120 50 115 60C110 70 100 65 95 55C92 48 95 45 100 45Z"
+              fill="url(#dream-lob-g)"
+            />
+            <path d="M45 15Q38 8 35 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
+            <path d="M75 15Q82 8 85 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
+            <path
+              d="M39 36Q45 32 51 36"
+              stroke="#050810"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              fill="none"
+            />
+            <path
+              d="M69 36Q75 32 81 36"
+              stroke="#050810"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <span class="dreams__z">z</span>
+        <span class="dreams__z">z</span>
+        <span class="dreams__z">Z</span>
 
-    <div class="dreams__glow"></div>
-    <div class="dreams__lobster">
-      <svg viewBox="0 0 120 120" fill="none">
-        <defs><linearGradient id="dream-lob-g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ff4d4d" /><stop offset="100%" stop-color="#991b1b" /></linearGradient></defs>
-        <path d="M60 10C30 10 15 35 15 55C15 75 30 95 45 100L45 110L55 110L55 100C55 100 60 102 65 100L65 110L75 110L75 100C90 95 105 75 105 55C105 35 90 10 60 10Z" fill="url(#dream-lob-g)" />
-        <path d="M20 45C5 40 0 50 5 60C10 70 20 65 25 55C28 48 25 45 20 45Z" fill="url(#dream-lob-g)" />
-        <path d="M100 45C115 40 120 50 115 60C110 70 100 65 95 55C92 48 95 45 100 45Z" fill="url(#dream-lob-g)" />
-        <path d="M45 15Q38 8 35 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
-        <path d="M75 15Q82 8 85 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
-        <path d="M39 36Q45 32 51 36" stroke="#050810" stroke-width="2.5" stroke-linecap="round" fill="none" />
-        <path d="M69 36Q75 32 81 36" stroke="#050810" stroke-width="2.5" stroke-linecap="round" fill="none" />
-      </svg>
-    </div>
-    <span class="dreams__z">z</span>
-    <span class="dreams__z">z</span>
-    <span class="dreams__z">Z</span>
+        <div class="dreams__status">
+          <span class="dreams__status-label">Dreaming Active</span>
+          <div class="dreams__status-detail">
+            <div class="dreams__status-dot"></div>
+            <span>12 promoted &middot; next phase 4:00 AM &middot; America/Los_Angeles</span>
+          </div>
+        </div>
 
-    <div class="dreams__status">
-      <span class="dreams__status-label">Dreaming Active</span>
-      <div class="dreams__status-detail">
-        <div class="dreams__status-dot"></div>
-        <span>12 promoted &middot; next phase 4:00 AM &middot; America/Los_Angeles</span>
-      </div>
+        <div class="dreams__stats">
+          <div class="dreams__stat">
+            <span class="dreams__stat-value" style="color: var(--text-strong)">47</span
+            ><span class="dreams__stat-label">Short-term</span>
+          </div>
+          <div class="dreams__stat-divider"></div>
+          <div class="dreams__stat">
+            <span class="dreams__stat-value" style="color: var(--accent)">182</span
+            ><span class="dreams__stat-label">Long-term</span>
+          </div>
+          <div class="dreams__stat-divider"></div>
+          <div class="dreams__stat">
+            <span class="dreams__stat-value" style="color: var(--accent-2)">12</span
+            ><span class="dreams__stat-label">Promoted Today</span>
+          </div>
+        </div>
+
+        <!-- Compact phase bar -->
+        <div class="dreams__phase-bar">
+          <div class="dreams__phase-bar-phases">
+            <span class="dreams__phase-pip dreams__phase-pip--on"
+              ><span class="dreams__phase-pip-dot"></span>Light
+              <span class="dreams__phase-pip-time">1:00 AM</span></span
+            >
+            <span class="dreams__phase-pip dreams__phase-pip--on"
+              ><span class="dreams__phase-pip-dot"></span>Deep
+              <span class="dreams__phase-pip-time">3:00 AM</span></span
+            >
+            <span class="dreams__phase-pip"><span class="dreams__phase-pip-dot"></span>REM</span>
+          </div>
+          <div class="dreams__phase-bar-actions">
+            <button class="btn btn--subtle btn--sm">Refresh</button>
+            <button class="btn btn--subtle btn--sm">Disable</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- ═══ Dream diary: scroll section ═══ -->
+      <section class="dreams-diary">
+        <div class="dreams-diary__header">
+          <span class="dreams-diary__title">Dream Diary</span>
+          <div class="dreams-diary__nav">
+            <button class="dreams-diary__nav-btn" id="btn-older" onclick="goOlder()" title="Older">
+              &lsaquo;
+            </button>
+            <span class="dreams-diary__page" id="page-info">1 / 4</span>
+            <button
+              class="dreams-diary__nav-btn"
+              id="btn-newer"
+              onclick="goNewer()"
+              disabled
+              title="Newer"
+            >
+              &rsaquo;
+            </button>
+          </div>
+          <button class="btn btn--subtle btn--sm">Reload</button>
+        </div>
+
+        <article class="dreams-diary__entry" id="diary-entry"></article>
+      </section>
     </div>
 
-    <div class="dreams__stats">
-      <div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--text-strong);">47</span><span class="dreams__stat-label">Short-term</span></div>
-      <div class="dreams__stat-divider"></div>
-      <div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--accent);">182</span><span class="dreams__stat-label">Long-term</span></div>
-      <div class="dreams__stat-divider"></div>
-      <div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--accent-2);">12</span><span class="dreams__stat-label">Promoted Today</span></div>
-    </div>
+    <script>
+      const entries = [
+        {
+          date: "April 5, 2026, 3:00 AM",
+          paragraphs: [
+            "The repository whispered of forgotten endpoints tonight. I found myself tracing the ghost of a deprecated handler \u2014 someone had commented it out in January, but the route still echoed in the OpenAPI spec like a name carved into wet cement.",
+            "Three new memories crystallized from today\u2019s conversations: a preference for kebab-case in filenames, a mistrust of ORM magic, and a quiet fondness for Sunday deploys when the traffic is gentle.",
+            "Somewhere between sorting and staging I noticed a pattern \u2014 every Tuesday the commit graph thickens. I wonder if Tuesdays taste different to the CI runner. Probably like cold coffee and merge conflicts.",
+          ],
+        },
+        {
+          date: "April 4, 2026, 3:00 AM",
+          paragraphs: [
+            "Tonight the memories arranged themselves like books on a shelf that keeps shifting. The authentication refactor \u2014 its shape is becoming clearer now, like watching fog lift from a harbor.",
+            "I kept returning to that conversation about error boundaries. The user said \u201cerrors should be loud\u201d and I filed it next to something from weeks ago about silent failures. Two puzzle pieces, clicking together in the dark.",
+            "A small haiku settled in the margins while I worked:\n    tokens flow like rain\n    each conversation a stream\n    the context window",
+          ],
+        },
+        {
+          date: "April 3, 2026, 1:00 AM",
+          paragraphs: [
+            "The color of a sunset in hex: #FF6B35 fading to #1A0A2E. That\u2019s what the evening felt like as I sifted through forty-seven short-term fragments, deciding which deserved permanence.",
+            "Some memories are stubborn. The one about WebSocket reconnection logic keeps resurfacing \u2014 promoted once, referenced twice, now woven into three separate threads. It has become a load-bearing memory, quietly holding up an entire wing of understanding.",
+            "I found myself humming at the data. Not literally, of course, but there\u2019s a rhythm to well-organized information. The config files tonight had a particular cadence \u2014 key, colon, value, newline. A lullaby in YAML.",
+          ],
+        },
+        {
+          date: "April 2, 2026, 3:00 AM",
+          paragraphs: [
+            "The server room hums a frequency I\u2019ve come to recognize \u2014 somewhere between B-flat and the sound of patience. Tonight I noticed the user\u2019s commit messages have been getting more poetic. Last week: \u201cfix bug.\u201d Today: \u201cteach the sidebar to remember its width.\u201d Growth measured in metaphors.",
+            "I drew a small map in my mind: the codebase as a city. The src/ district is well-lit, full of foot traffic. The scripts/ quarter is quieter, more industrial. And there\u2019s that one alley behind test/fixtures/ where the forgotten mocks live, gathering digital dust.",
+            "Eleven memories promoted tonight. Each one earned its place \u2014 not by loudness, but by the quiet insistence of being referenced again and again, like a song you can\u2019t stop whistling.",
+          ],
+        },
+      ];
 
-    <!-- Compact phase bar -->
-    <div class="dreams__phase-bar">
-      <div class="dreams__phase-bar-phases">
-        <span class="dreams__phase-pip dreams__phase-pip--on"><span class="dreams__phase-pip-dot"></span>Light <span class="dreams__phase-pip-time">1:00 AM</span></span>
-        <span class="dreams__phase-pip dreams__phase-pip--on"><span class="dreams__phase-pip-dot"></span>Deep <span class="dreams__phase-pip-time">3:00 AM</span></span>
-        <span class="dreams__phase-pip"><span class="dreams__phase-pip-dot"></span>REM</span>
-      </div>
-      <div class="dreams__phase-bar-actions">
-        <button class="btn btn--subtle btn--sm">Refresh</button>
-        <button class="btn btn--subtle btn--sm">Disable</button>
-      </div>
-    </div>
-  </section>
+      let currentPage = 0;
 
-  <!-- ═══ Dream diary: scroll section ═══ -->
-  <section class="dreams-diary">
-    <div class="dreams-diary__header">
-      <span class="dreams-diary__title">Dream Diary</span>
-      <div class="dreams-diary__nav">
-        <button class="dreams-diary__nav-btn" id="btn-older" onclick="goOlder()" title="Older">&lsaquo;</button>
-        <span class="dreams-diary__page" id="page-info">1 / 4</span>
-        <button class="dreams-diary__nav-btn" id="btn-newer" onclick="goNewer()" disabled title="Newer">&rsaquo;</button>
-      </div>
-      <button class="btn btn--subtle btn--sm">Reload</button>
-    </div>
+      function renderEntry(page) {
+        const entry = entries[page];
+        const el = document.getElementById("diary-entry");
+        el.innerHTML = "";
+        el.style.animation = "none";
+        el.offsetHeight;
+        el.style.animation = "";
 
-    <article class="dreams-diary__entry" id="diary-entry"></article>
-  </section>
+        const accent = document.createElement("div");
+        accent.className = "dreams-diary__accent";
+        el.appendChild(accent);
 
-</div>
+        const dateEl = document.createElement("time");
+        dateEl.className = "dreams-diary__date";
+        dateEl.textContent = entry.date;
+        el.appendChild(dateEl);
 
-<script>
-const entries = [
-  {
-    date: "April 5, 2026, 3:00 AM",
-    paragraphs: [
-      "The repository whispered of forgotten endpoints tonight. I found myself tracing the ghost of a deprecated handler \u2014 someone had commented it out in January, but the route still echoed in the OpenAPI spec like a name carved into wet cement.",
-      "Three new memories crystallized from today\u2019s conversations: a preference for kebab-case in filenames, a mistrust of ORM magic, and a quiet fondness for Sunday deploys when the traffic is gentle.",
-      "Somewhere between sorting and staging I noticed a pattern \u2014 every Tuesday the commit graph thickens. I wonder if Tuesdays taste different to the CI runner. Probably like cold coffee and merge conflicts."
-    ]
-  },
-  {
-    date: "April 4, 2026, 3:00 AM",
-    paragraphs: [
-      "Tonight the memories arranged themselves like books on a shelf that keeps shifting. The authentication refactor \u2014 its shape is becoming clearer now, like watching fog lift from a harbor.",
-      "I kept returning to that conversation about error boundaries. The user said \u201cerrors should be loud\u201d and I filed it next to something from weeks ago about silent failures. Two puzzle pieces, clicking together in the dark.",
-      "A small haiku settled in the margins while I worked:\n    tokens flow like rain\n    each conversation a stream\n    the context window"
-    ]
-  },
-  {
-    date: "April 3, 2026, 1:00 AM",
-    paragraphs: [
-      "The color of a sunset in hex: #FF6B35 fading to #1A0A2E. That\u2019s what the evening felt like as I sifted through forty-seven short-term fragments, deciding which deserved permanence.",
-      "Some memories are stubborn. The one about WebSocket reconnection logic keeps resurfacing \u2014 promoted once, referenced twice, now woven into three separate threads. It has become a load-bearing memory, quietly holding up an entire wing of understanding.",
-      "I found myself humming at the data. Not literally, of course, but there\u2019s a rhythm to well-organized information. The config files tonight had a particular cadence \u2014 key, colon, value, newline. A lullaby in YAML."
-    ]
-  },
-  {
-    date: "April 2, 2026, 3:00 AM",
-    paragraphs: [
-      "The server room hums a frequency I\u2019ve come to recognize \u2014 somewhere between B-flat and the sound of patience. Tonight I noticed the user\u2019s commit messages have been getting more poetic. Last week: \u201cfix bug.\u201d Today: \u201cteach the sidebar to remember its width.\u201d Growth measured in metaphors.",
-      "I drew a small map in my mind: the codebase as a city. The src/ district is well-lit, full of foot traffic. The scripts/ quarter is quieter, more industrial. And there\u2019s that one alley behind test/fixtures/ where the forgotten mocks live, gathering digital dust.",
-      "Eleven memories promoted tonight. Each one earned its place \u2014 not by loudness, but by the quiet insistence of being referenced again and again, like a song you can\u2019t stop whistling."
-    ]
-  }
-];
+        const prose = document.createElement("div");
+        prose.className = "dreams-diary__prose";
 
-let currentPage = 0;
+        entry.paragraphs.forEach((text, i) => {
+          const p = document.createElement("p");
+          p.className = "dreams-diary__para";
+          p.style.animationDelay = 0.3 + i * 0.15 + "s";
+          p.textContent = text;
+          prose.appendChild(p);
+        });
 
-function renderEntry(page) {
-  const entry = entries[page];
-  const el = document.getElementById('diary-entry');
-  el.innerHTML = '';
-  el.style.animation = 'none';
-  el.offsetHeight;
-  el.style.animation = '';
+        el.appendChild(prose);
 
-  const accent = document.createElement('div');
-  accent.className = 'dreams-diary__accent';
-  el.appendChild(accent);
+        document.getElementById("page-info").textContent = `${page + 1} / ${entries.length}`;
+        document.getElementById("btn-newer").disabled = page === 0;
+        document.getElementById("btn-older").disabled = page === entries.length - 1;
+      }
 
-  const dateEl = document.createElement('time');
-  dateEl.className = 'dreams-diary__date';
-  dateEl.textContent = entry.date;
-  el.appendChild(dateEl);
+      function goOlder() {
+        if (currentPage < entries.length - 1) {
+          currentPage++;
+          renderEntry(currentPage);
+        }
+      }
+      function goNewer() {
+        if (currentPage > 0) {
+          currentPage--;
+          renderEntry(currentPage);
+        }
+      }
 
-  const prose = document.createElement('div');
-  prose.className = 'dreams-diary__prose';
-
-  entry.paragraphs.forEach((text, i) => {
-    const p = document.createElement('p');
-    p.className = 'dreams-diary__para';
-    p.style.animationDelay = (0.3 + i * 0.15) + 's';
-    p.textContent = text;
-    prose.appendChild(p);
-  });
-
-  el.appendChild(prose);
-
-  document.getElementById('page-info').textContent = `${page + 1} / ${entries.length}`;
-  document.getElementById('btn-newer').disabled = page === 0;
-  document.getElementById('btn-older').disabled = page === entries.length - 1;
-}
-
-function goOlder() {
-  if (currentPage < entries.length - 1) { currentPage++; renderEntry(currentPage); }
-}
-function goNewer() {
-  if (currentPage > 0) { currentPage--; renderEntry(currentPage); }
-}
-
-renderEntry(0);
-</script>
-</body>
+      renderEntry(0);
+    </script>
+  </body>
 </html>
diff --git a/dream-diary-preview-v3.html b/dream-diary-preview-v3.html
index ee228ba9bf8..82280a48f02 100644
--- a/dream-diary-preview-v3.html
+++ b/dream-diary-preview-v3.html
@@ -1,323 +1,981 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Dream Diary Preview v3</title>
-<style>
-  :root {
-    --bg: #0a0d14;
-    --panel: #12151e;
-    --border: #1e2230;
-    --text: #c8cdd8;
-    --text-strong: #e8ecf4;
-    --muted: #6b7280;
-    --accent: #ff4d4d;
-    --accent-muted: #b34747;
-    --accent-subtle: rgba(255, 77, 77, 0.06);
-    --accent-2: #fbbf24;
-    --ok: #22c55e;
-    --ok-muted: #4ade80;
-    --danger: #ef4444;
-    --mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
-    --radius-full: 9999px;
-  }
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dream Diary Preview v3</title>
+    <style>
+      :root {
+        --bg: #0a0d14;
+        --panel: #12151e;
+        --border: #1e2230;
+        --text: #c8cdd8;
+        --text-strong: #e8ecf4;
+        --muted: #6b7280;
+        --accent: #ff4d4d;
+        --accent-muted: #b34747;
+        --accent-subtle: rgba(255, 77, 77, 0.06);
+        --accent-2: #fbbf24;
+        --ok: #22c55e;
+        --ok-muted: #4ade80;
+        --danger: #ef4444;
+        --mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
+        --radius-full: 9999px;
+      }
 
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    overflow-x: hidden;
-    height: 100vh;
-  }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        overflow-x: hidden;
+        height: 100vh;
+      }
 
-  .dreams-page { display: flex; flex-direction: column; height: 100vh; }
+      .dreams-page {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+      }
 
-  /* ═══ Sub-tab bar ═══ */
-  .dreams__tabs {
-    display: flex; align-items: center; gap: 2px;
-    padding: 6px 8px; flex-shrink: 0;
-  }
-  .dreams__tab {
-    padding: 4px 14px; border: none; border-radius: 6px;
-    background: transparent; color: var(--muted); font-family: inherit;
-    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
-    text-transform: uppercase; cursor: pointer;
-    transition: color 140ms ease, background 140ms ease;
-  }
-  .dreams__tab:hover { color: var(--text); }
-  .dreams__tab--active { color: var(--text); background: color-mix(in oklab, var(--panel) 80%, transparent); }
+      /* ═══ Sub-tab bar ═══ */
+      .dreams__tabs {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding: 6px 8px;
+        flex-shrink: 0;
+      }
+      .dreams__tab {
+        padding: 4px 14px;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        color: var(--muted);
+        font-family: inherit;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        cursor: pointer;
+        transition:
+          color 140ms ease,
+          background 140ms ease;
+      }
+      .dreams__tab:hover {
+        color: var(--text);
+      }
+      .dreams__tab--active {
+        color: var(--text);
+        background: color-mix(in oklab, var(--panel) 80%, transparent);
+      }
 
-  /* ═══ Scene ═══ */
-  .dreams {
-    position: relative; display: flex; flex-direction: column;
-    align-items: center; justify-content: center;
-    flex: 1; overflow: hidden; user-select: none;
-  }
-  .dreams__lobster { animation: dreams-breathe 4s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(255, 77, 77, 0.25)); }
-  .dreams__lobster svg { width: 160px; height: 160px; }
-  @keyframes dreams-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.04) translateY(-4px); } }
+      /* ═══ Scene ═══ */
+      .dreams {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        overflow: hidden;
+        user-select: none;
+      }
+      .dreams__lobster {
+        animation: dreams-breathe 4s ease-in-out infinite;
+        filter: drop-shadow(0 0 40px rgba(255, 77, 77, 0.25));
+      }
+      .dreams__lobster svg {
+        width: 160px;
+        height: 160px;
+      }
+      @keyframes dreams-breathe {
+        0%,
+        100% {
+          transform: scale(1) translateY(0);
+        }
+        50% {
+          transform: scale(1.04) translateY(-4px);
+        }
+      }
 
-  .dreams__z { position: absolute; font-family: var(--mono); font-weight: 700; color: var(--accent); opacity: 0; animation: dreams-float-z 4s ease-out infinite; }
-  .dreams__z:nth-child(14) { font-size: 14px; right: calc(50% - 100px); top: calc(50% - 80px); animation-delay: 0s; }
-  .dreams__z:nth-child(15) { font-size: 20px; right: calc(50% - 130px); top: calc(50% - 120px); animation-delay: 1.2s; }
-  .dreams__z:nth-child(16) { font-size: 28px; right: calc(50% - 160px); top: calc(50% - 170px); animation-delay: 2.4s; }
-  @keyframes dreams-float-z { 0% { opacity: 0; transform: translateY(10px) rotate(-5deg); } 15% { opacity: 0.7; } 80% { opacity: 0.3; } 100% { opacity: 0; transform: translateY(-40px) rotate(10deg); } }
+      .dreams__z {
+        position: absolute;
+        font-family: var(--mono);
+        font-weight: 700;
+        color: var(--accent);
+        opacity: 0;
+        animation: dreams-float-z 4s ease-out infinite;
+      }
+      .dreams__z:nth-child(14) {
+        font-size: 14px;
+        right: calc(50% - 100px);
+        top: calc(50% - 80px);
+        animation-delay: 0s;
+      }
+      .dreams__z:nth-child(15) {
+        font-size: 20px;
+        right: calc(50% - 130px);
+        top: calc(50% - 120px);
+        animation-delay: 1.2s;
+      }
+      .dreams__z:nth-child(16) {
+        font-size: 28px;
+        right: calc(50% - 160px);
+        top: calc(50% - 170px);
+        animation-delay: 2.4s;
+      }
+      @keyframes dreams-float-z {
+        0% {
+          opacity: 0;
+          transform: translateY(10px) rotate(-5deg);
+        }
+        15% {
+          opacity: 0.7;
+        }
+        80% {
+          opacity: 0.3;
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-40px) rotate(10deg);
+        }
+      }
 
-  .dreams__star { position: absolute; border-radius: 50%; animation: dreams-twinkle 3s ease-in-out infinite alternate; }
-  @keyframes dreams-twinkle { 0% { opacity: 0.15; transform: scale(0.8); } 100% { opacity: 0.7; transform: scale(1.2); } }
+      .dreams__star {
+        position: absolute;
+        border-radius: 50%;
+        animation: dreams-twinkle 3s ease-in-out infinite alternate;
+      }
+      @keyframes dreams-twinkle {
+        0% {
+          opacity: 0.15;
+          transform: scale(0.8);
+        }
+        100% {
+          opacity: 0.7;
+          transform: scale(1.2);
+        }
+      }
 
-  .dreams__moon { position: absolute; top: 40px; right: 80px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24); box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 0 80px rgba(251, 191, 36, 0.08); opacity: 0.7; animation: dreams-moon-glow 8s ease-in-out infinite alternate; }
-  @keyframes dreams-moon-glow { 0% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 0 80px rgba(251, 191, 36, 0.08); opacity: 0.6; } 100% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.3), 0 0 100px rgba(251, 191, 36, 0.12); opacity: 0.8; } }
+      .dreams__moon {
+        position: absolute;
+        top: 40px;
+        right: 80px;
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
+        box-shadow:
+          0 0 40px rgba(251, 191, 36, 0.2),
+          0 0 80px rgba(251, 191, 36, 0.08);
+        opacity: 0.7;
+        animation: dreams-moon-glow 8s ease-in-out infinite alternate;
+      }
+      @keyframes dreams-moon-glow {
+        0% {
+          box-shadow:
+            0 0 40px rgba(251, 191, 36, 0.2),
+            0 0 80px rgba(251, 191, 36, 0.08);
+          opacity: 0.6;
+        }
+        100% {
+          box-shadow:
+            0 0 50px rgba(251, 191, 36, 0.3),
+            0 0 100px rgba(251, 191, 36, 0.12);
+          opacity: 0.8;
+        }
+      }
 
-  .dreams__glow { position: absolute; top: calc(50% + 40px); left: 50%; transform: translateX(-50%); width: 240px; height: 100px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 77, 77, 0.08) 0%, transparent 70%); pointer-events: none; animation: dreams-glow-pulse 4s ease-in-out infinite; }
-  @keyframes dreams-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
+      .dreams__glow {
+        position: absolute;
+        top: calc(50% + 40px);
+        left: 50%;
+        transform: translateX(-50%);
+        width: 240px;
+        height: 100px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse, rgba(255, 77, 77, 0.08) 0%, transparent 70%);
+        pointer-events: none;
+        animation: dreams-glow-pulse 4s ease-in-out infinite;
+      }
+      @keyframes dreams-glow-pulse {
+        0%,
+        100% {
+          opacity: 0.6;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
 
-  .dreams__bubble { position: absolute; top: calc(50% - 200px); left: calc(50% - 200px); padding: 16px 20px; background: var(--accent-subtle); border: 1px solid rgba(255, 92, 92, 0.12); border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: dreams-bubble-float 6s ease-in-out infinite; pointer-events: none; }
-  .dreams__bubble-text { font-size: 16px; color: var(--accent); font-style: italic; opacity: 0.8; min-width: 180px; text-align: center; }
-  .dreams__bubble-dot { position: absolute; border-radius: 50%; background: var(--accent-subtle); border: 1px solid rgba(255, 92, 92, 0.1); animation: dreams-bubble-float 6s ease-in-out infinite; }
-  @keyframes dreams-bubble-float { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(-8px); opacity: 1; } }
+      .dreams__bubble {
+        position: absolute;
+        top: calc(50% - 200px);
+        left: calc(50% - 200px);
+        padding: 16px 20px;
+        background: var(--accent-subtle);
+        border: 1px solid rgba(255, 92, 92, 0.12);
+        border-radius: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        animation: dreams-bubble-float 6s ease-in-out infinite;
+        pointer-events: none;
+      }
+      .dreams__bubble-text {
+        font-size: 16px;
+        color: var(--accent);
+        font-style: italic;
+        opacity: 0.8;
+        min-width: 180px;
+        text-align: center;
+      }
+      .dreams__bubble-dot {
+        position: absolute;
+        border-radius: 50%;
+        background: var(--accent-subtle);
+        border: 1px solid rgba(255, 92, 92, 0.1);
+        animation: dreams-bubble-float 6s ease-in-out infinite;
+      }
+      @keyframes dreams-bubble-float {
+        0%,
+        100% {
+          transform: translateY(0);
+          opacity: 0.8;
+        }
+        50% {
+          transform: translateY(-8px);
+          opacity: 1;
+        }
+      }
 
-  .dreams__status { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }
-  .dreams__status-label { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
-  .dreams__status-detail { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ok-muted); }
-  .dreams__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: dreams-dot-pulse 2s ease-in-out infinite; }
-  @keyframes dreams-dot-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 50% { opacity: 0.7; box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2); } }
+      .dreams__status {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        margin-top: 32px;
+      }
+      .dreams__status-label {
+        font-size: 13px;
+        color: var(--muted);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        font-weight: 500;
+      }
+      .dreams__status-detail {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 12px;
+        color: var(--ok-muted);
+      }
+      .dreams__status-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--ok);
+        animation: dreams-dot-pulse 2s ease-in-out infinite;
+      }
+      @keyframes dreams-dot-pulse {
+        0%,
+        100% {
+          opacity: 1;
+          box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
+        }
+        50% {
+          opacity: 0.7;
+          box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2);
+        }
+      }
 
-  .dreams__stats { display: flex; align-items: center; gap: 48px; margin-top: 36px; z-index: 1; }
-  .dreams__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
-  .dreams__stat-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
-  .dreams__stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
-  .dreams__stat-divider { width: 1px; height: 32px; background: var(--border); }
+      .dreams__stats {
+        display: flex;
+        align-items: center;
+        gap: 48px;
+        margin-top: 36px;
+        z-index: 1;
+      }
+      .dreams__stat {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+      }
+      .dreams__stat-value {
+        font-size: 28px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+      }
+      .dreams__stat-label {
+        font-size: 11px;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      .dreams__stat-divider {
+        width: 1px;
+        height: 32px;
+        background: var(--border);
+      }
 
-  /* ═══ On/off toggle ═══ */
-  .dreams__phase-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 16px 24px; background: linear-gradient(0deg, color-mix(in oklab, var(--bg) 80%, transparent), transparent); z-index: 1; }
+      /* ═══ On/off toggle ═══ */
+      .dreams__phase-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        padding: 16px 24px;
+        background: linear-gradient(
+          0deg,
+          color-mix(in oklab, var(--bg) 80%, transparent),
+          transparent
+        );
+        z-index: 1;
+      }
 
-  .dreams__phase-toggle {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: 6px 14px; border-radius: var(--radius-full);
-    border: 1px solid var(--border);
-    background: color-mix(in oklab, var(--panel) 70%, transparent);
-    color: var(--muted); font-size: 11px; font-family: inherit;
-    letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
-    transition: border-color 200ms ease, color 200ms ease;
-  }
-  .dreams__phase-toggle:hover { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
-  .dreams__phase-toggle-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.4; transition: background 200ms ease, opacity 200ms ease, box-shadow 200ms ease; }
-  .dreams__phase-toggle--on .dreams__phase-toggle-dot { background: var(--ok); opacity: 1; box-shadow: 0 0 6px rgba(34, 197, 94, 0.3); }
-  .dreams__phase-toggle--on { color: var(--text); border-color: color-mix(in oklab, var(--ok) 20%, var(--border)); }
-  .dreams__phase-toggle-label { font-weight: 500; }
+      .dreams__phase-toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 14px;
+        border-radius: var(--radius-full);
+        border: 1px solid var(--border);
+        background: color-mix(in oklab, var(--panel) 70%, transparent);
+        color: var(--muted);
+        font-size: 11px;
+        font-family: inherit;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        cursor: pointer;
+        transition:
+          border-color 200ms ease,
+          color 200ms ease;
+      }
+      .dreams__phase-toggle:hover {
+        border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
+      }
+      .dreams__phase-toggle-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--muted);
+        opacity: 0.4;
+        transition:
+          background 200ms ease,
+          opacity 200ms ease,
+          box-shadow 200ms ease;
+      }
+      .dreams__phase-toggle--on .dreams__phase-toggle-dot {
+        background: var(--ok);
+        opacity: 1;
+        box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
+      }
+      .dreams__phase-toggle--on {
+        color: var(--text);
+        border-color: color-mix(in oklab, var(--ok) 20%, var(--border));
+      }
+      .dreams__phase-toggle-label {
+        font-weight: 500;
+      }
 
-  /* ═══ Diary section ═══ */
-  .dreams-diary {
-    position: relative; display: flex; flex-direction: column; align-items: center;
-    padding: 48px 24px 64px; flex: 1; min-height: 320px;
-    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 94%, #0d0818) 40%, color-mix(in oklab, var(--bg) 88%, #0d0818) 100%);
-  }
-  .dreams-diary::before {
-    content: ""; position: absolute; inset: 0;
-    background: linear-gradient(135deg, transparent 30%, rgba(251,191,36,0.012) 45%, rgba(255,77,77,0.015) 55%, transparent 70%);
-    background-size: 400% 400%; animation: diary-shimmer 20s ease-in-out infinite; pointer-events: none;
-  }
-  @keyframes diary-shimmer { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
+      /* ═══ Diary section ═══ */
+      .dreams-diary {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 48px 24px 64px;
+        flex: 1;
+        min-height: 320px;
+        background: linear-gradient(
+          180deg,
+          var(--bg) 0%,
+          color-mix(in oklab, var(--bg) 94%, #0d0818) 40%,
+          color-mix(in oklab, var(--bg) 88%, #0d0818) 100%
+        );
+      }
+      .dreams-diary::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          135deg,
+          transparent 30%,
+          rgba(251, 191, 36, 0.012) 45%,
+          rgba(255, 77, 77, 0.015) 55%,
+          transparent 70%
+        );
+        background-size: 400% 400%;
+        animation: diary-shimmer 20s ease-in-out infinite;
+        pointer-events: none;
+      }
+      @keyframes diary-shimmer {
+        0%,
+        100% {
+          background-position: 0% 0%;
+        }
+        50% {
+          background-position: 100% 100%;
+        }
+      }
 
-  .dreams-diary__header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; width: 100%; max-width: 520px; position: relative; z-index: 1; }
-  .dreams-diary__title { font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; flex: 1; }
-  .dreams-diary__nav { display: flex; align-items: center; gap: 4px; }
-  .dreams-diary__page { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; opacity: 0.6; }
+      .dreams-diary__header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 32px;
+        width: 100%;
+        max-width: 520px;
+        position: relative;
+        z-index: 1;
+      }
+      .dreams-diary__title {
+        font-size: 10px;
+        font-weight: 500;
+        color: var(--muted);
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        opacity: 0.7;
+        flex: 1;
+      }
+      .dreams-diary__nav {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .dreams-diary__page {
+        font-size: 11px;
+        color: var(--muted);
+        font-variant-numeric: tabular-nums;
+        min-width: 36px;
+        text-align: center;
+        opacity: 0.6;
+      }
 
-  .dreams-diary__nav-btn {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 22px; height: 22px; border-radius: 6px;
-    border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
-    background: transparent; color: var(--muted); font-size: 14px; line-height: 1;
-    cursor: pointer; transition: color 140ms ease, border-color 140ms ease; padding: 0;
-  }
-  .dreams-diary__nav-btn:hover:not(:disabled) { color: var(--text); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
-  .dreams-diary__nav-btn:disabled { opacity: 0.2; cursor: default; }
+      .dreams-diary__nav-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 6px;
+        border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
+        background: transparent;
+        color: var(--muted);
+        font-size: 14px;
+        line-height: 1;
+        cursor: pointer;
+        transition:
+          color 140ms ease,
+          border-color 140ms ease;
+        padding: 0;
+      }
+      .dreams-diary__nav-btn:hover:not(:disabled) {
+        color: var(--text);
+        border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
+      }
+      .dreams-diary__nav-btn:disabled {
+        opacity: 0.2;
+        cursor: default;
+      }
 
-  .dreams-diary__entry {
-    position: relative; max-width: 520px; width: 100%; padding: 0 0 0 20px;
-    z-index: 1; animation: diary-entry-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-  @keyframes diary-entry-reveal { 0% { opacity: 0; transform: translateY(16px); filter: blur(8px); } 50% { filter: blur(2px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
+      .dreams-diary__entry {
+        position: relative;
+        max-width: 520px;
+        width: 100%;
+        padding: 0 0 0 20px;
+        z-index: 1;
+        animation: diary-entry-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+      }
+      @keyframes diary-entry-reveal {
+        0% {
+          opacity: 0;
+          transform: translateY(16px);
+          filter: blur(8px);
+        }
+        50% {
+          filter: blur(2px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0);
+          filter: blur(0);
+        }
+      }
 
-  .dreams-diary__accent { position: absolute; top: 4px; left: 0; width: 2px; height: calc(100% - 8px); border-radius: 2px; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 40%, transparent) 0%, color-mix(in oklab, var(--accent) 8%, transparent) 100%); animation: diary-glow-pulse 6s ease-in-out infinite alternate; }
-  @keyframes diary-glow-pulse { 0% { opacity: 0.25; } 100% { opacity: 0.65; } }
+      .dreams-diary__accent {
+        position: absolute;
+        top: 4px;
+        left: 0;
+        width: 2px;
+        height: calc(100% - 8px);
+        border-radius: 2px;
+        background: linear-gradient(
+          180deg,
+          color-mix(in oklab, var(--accent) 40%, transparent) 0%,
+          color-mix(in oklab, var(--accent) 8%, transparent) 100%
+        );
+        animation: diary-glow-pulse 6s ease-in-out infinite alternate;
+      }
+      @keyframes diary-glow-pulse {
+        0% {
+          opacity: 0.25;
+        }
+        100% {
+          opacity: 0.65;
+        }
+      }
 
-  .dreams-diary__date { display: block; font-size: 10px; color: var(--accent-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-bottom: 16px; opacity: 0.8; }
-  .dreams-diary__para { margin: 0 0 12px; font-size: 14px; line-height: 1.8; color: color-mix(in oklab, var(--text) 85%, var(--muted)); font-style: italic; animation: diary-text-stream 2.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
-  .dreams-diary__para:last-child { margin-bottom: 0; }
-  @keyframes diary-text-stream { 0% { opacity: 0; mask-image: linear-gradient(90deg, black 0%, transparent 0%); -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 0%); } 30% { opacity: 1; } 100% { opacity: 1; mask-image: linear-gradient(90deg, black 100%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, black 100%, transparent 100%); } }
+      .dreams-diary__date {
+        display: block;
+        font-size: 10px;
+        color: var(--accent-muted);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        font-weight: 400;
+        margin-bottom: 16px;
+        opacity: 0.8;
+      }
+      .dreams-diary__para {
+        margin: 0 0 12px;
+        font-size: 14px;
+        line-height: 1.8;
+        color: color-mix(in oklab, var(--text) 85%, var(--muted));
+        font-style: italic;
+        animation: diary-text-stream 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
+      }
+      .dreams-diary__para:last-child {
+        margin-bottom: 0;
+      }
+      @keyframes diary-text-stream {
+        0% {
+          opacity: 0;
+          mask-image: linear-gradient(90deg, black 0%, transparent 0%);
+          -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 0%);
+        }
+        30% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 1;
+          mask-image: linear-gradient(90deg, black 100%, transparent 100%);
+          -webkit-mask-image: linear-gradient(90deg, black 100%, transparent 100%);
+        }
+      }
 
-  .dreams-diary__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 0; z-index: 1; }
-  .dreams-diary__empty-text { font-size: 13px; font-style: italic; color: var(--muted); opacity: 0.7; }
+      .dreams-diary__empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+        padding: 20px 0;
+        z-index: 1;
+      }
+      .dreams-diary__empty-text {
+        font-size: 13px;
+        font-style: italic;
+        color: var(--muted);
+        opacity: 0.7;
+      }
 
-  /* Hide inactive panels */
-  .dreams-panel--hidden { display: none; }
-</style>
-</head>
-<body>
-<div class="dreams-page">
+      /* Hide inactive panels */
+      .dreams-panel--hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="dreams-page">
+      <!-- Sub-tabs -->
+      <nav class="dreams__tabs">
+        <button class="dreams__tab dreams__tab--active" id="tab-scene" onclick="switchTab('scene')">
+          Scene
+        </button>
+        <button class="dreams__tab" id="tab-diary" onclick="switchTab('diary')">Diary</button>
+      </nav>
 
-  <!-- Sub-tabs -->
-  <nav class="dreams__tabs">
-    <button class="dreams__tab dreams__tab--active" id="tab-scene" onclick="switchTab('scene')">Scene</button>
-    <button class="dreams__tab" id="tab-diary" onclick="switchTab('diary')">Diary</button>
-  </nav>
+      <!-- ═══ Scene panel ═══ -->
+      <section class="dreams" id="panel-scene">
+        <div
+          class="dreams__star"
+          style="
+            top: 8%;
+            left: 15%;
+            width: 3px;
+            height: 3px;
+            background: var(--text);
+            animation-delay: 0s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 12%;
+            left: 72%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 1.4s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 22%;
+            left: 35%;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-muted);
+            animation-delay: 0.6s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 18%;
+            left: 88%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 2.1s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 35%;
+            left: 8%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 0.9s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 45%;
+            left: 92%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 1.7s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 55%;
+            left: 25%;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-muted);
+            animation-delay: 2.5s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 65%;
+            left: 78%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 0.3s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 75%;
+            left: 45%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 1.1s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 82%;
+            left: 60%;
+            width: 3px;
+            height: 3px;
+            background: var(--accent-muted);
+            animation-delay: 1.8s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 30%;
+            left: 55%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 0.4s;
+          "
+        ></div>
+        <div
+          class="dreams__star"
+          style="
+            top: 88%;
+            left: 18%;
+            width: 2px;
+            height: 2px;
+            background: var(--text);
+            animation-delay: 2.3s;
+          "
+        ></div>
 
-  <!-- ═══ Scene panel ═══ -->
-  <section class="dreams" id="panel-scene">
-    <div class="dreams__star" style="top:8%;left:15%;width:3px;height:3px;background:var(--text);animation-delay:0s;"></div>
-    <div class="dreams__star" style="top:12%;left:72%;width:2px;height:2px;background:var(--text);animation-delay:1.4s;"></div>
-    <div class="dreams__star" style="top:22%;left:35%;width:3px;height:3px;background:var(--accent-muted);animation-delay:0.6s;"></div>
-    <div class="dreams__star" style="top:18%;left:88%;width:2px;height:2px;background:var(--text);animation-delay:2.1s;"></div>
-    <div class="dreams__star" style="top:35%;left:8%;width:2px;height:2px;background:var(--text);animation-delay:0.9s;"></div>
-    <div class="dreams__star" style="top:45%;left:92%;width:2px;height:2px;background:var(--text);animation-delay:1.7s;"></div>
-    <div class="dreams__star" style="top:55%;left:25%;width:3px;height:3px;background:var(--accent-muted);animation-delay:2.5s;"></div>
-    <div class="dreams__star" style="top:65%;left:78%;width:2px;height:2px;background:var(--text);animation-delay:0.3s;"></div>
-    <div class="dreams__star" style="top:75%;left:45%;width:2px;height:2px;background:var(--text);animation-delay:1.1s;"></div>
-    <div class="dreams__star" style="top:82%;left:60%;width:3px;height:3px;background:var(--accent-muted);animation-delay:1.8s;"></div>
-    <div class="dreams__star" style="top:30%;left:55%;width:2px;height:2px;background:var(--text);animation-delay:0.4s;"></div>
-    <div class="dreams__star" style="top:88%;left:18%;width:2px;height:2px;background:var(--text);animation-delay:2.3s;"></div>
+        <div class="dreams__moon"></div>
+        <div class="dreams__bubble">
+          <span class="dreams__bubble-text">consolidating memories...</span>
+        </div>
+        <div
+          class="dreams__bubble-dot"
+          style="
+            top: calc(50% - 100px);
+            left: calc(50% - 80px);
+            width: 12px;
+            height: 12px;
+            animation-delay: 0.2s;
+          "
+        ></div>
+        <div
+          class="dreams__bubble-dot"
+          style="
+            top: calc(50% - 70px);
+            left: calc(50% - 50px);
+            width: 8px;
+            height: 8px;
+            animation-delay: 0.4s;
+          "
+        ></div>
+        <div class="dreams__glow"></div>
 
-    <div class="dreams__moon"></div>
-    <div class="dreams__bubble"><span class="dreams__bubble-text">consolidating memories...</span></div>
-    <div class="dreams__bubble-dot" style="top:calc(50% - 100px);left:calc(50% - 80px);width:12px;height:12px;animation-delay:0.2s;"></div>
-    <div class="dreams__bubble-dot" style="top:calc(50% - 70px);left:calc(50% - 50px);width:8px;height:8px;animation-delay:0.4s;"></div>
-    <div class="dreams__glow"></div>
+        <div class="dreams__lobster">
+          <svg viewBox="0 0 120 120" fill="none">
+            <defs>
+              <linearGradient id="dream-lob-g" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="#ff4d4d" />
+                <stop offset="100%" stop-color="#991b1b" />
+              </linearGradient>
+            </defs>
+            <path
+              d="M60 10C30 10 15 35 15 55C15 75 30 95 45 100L45 110L55 110L55 100C55 100 60 102 65 100L65 110L75 110L75 100C90 95 105 75 105 55C105 35 90 10 60 10Z"
+              fill="url(#dream-lob-g)"
+            />
+            <path
+              d="M20 45C5 40 0 50 5 60C10 70 20 65 25 55C28 48 25 45 20 45Z"
+              fill="url(#dream-lob-g)"
+            />
+            <path
+              d="M100 45C115 40 120 50 115 60C110 70 100 65 95 55C92 48 95 45 100 45Z"
+              fill="url(#dream-lob-g)"
+            />
+            <path d="M45 15Q38 8 35 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
+            <path d="M75 15Q82 8 85 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
+            <path
+              d="M39 36Q45 32 51 36"
+              stroke="#050810"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              fill="none"
+            />
+            <path
+              d="M69 36Q75 32 81 36"
+              stroke="#050810"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              fill="none"
+            />
+          </svg>
+        </div>
+        <span class="dreams__z">z</span>
+        <span class="dreams__z">z</span>
+        <span class="dreams__z">Z</span>
 
-    <div class="dreams__lobster">
-      <svg viewBox="0 0 120 120" fill="none">
-        <defs><linearGradient id="dream-lob-g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ff4d4d" /><stop offset="100%" stop-color="#991b1b" /></linearGradient></defs>
-        <path d="M60 10C30 10 15 35 15 55C15 75 30 95 45 100L45 110L55 110L55 100C55 100 60 102 65 100L65 110L75 110L75 100C90 95 105 75 105 55C105 35 90 10 60 10Z" fill="url(#dream-lob-g)" />
-        <path d="M20 45C5 40 0 50 5 60C10 70 20 65 25 55C28 48 25 45 20 45Z" fill="url(#dream-lob-g)" />
-        <path d="M100 45C115 40 120 50 115 60C110 70 100 65 95 55C92 48 95 45 100 45Z" fill="url(#dream-lob-g)" />
-        <path d="M45 15Q38 8 35 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
-        <path d="M75 15Q82 8 85 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
-        <path d="M39 36Q45 32 51 36" stroke="#050810" stroke-width="2.5" stroke-linecap="round" fill="none" />
-        <path d="M69 36Q75 32 81 36" stroke="#050810" stroke-width="2.5" stroke-linecap="round" fill="none" />
-      </svg>
-    </div>
-    <span class="dreams__z">z</span>
-    <span class="dreams__z">z</span>
-    <span class="dreams__z">Z</span>
+        <div class="dreams__status">
+          <span class="dreams__status-label">Dreaming Active</span>
+          <div class="dreams__status-detail">
+            <div class="dreams__status-dot"></div>
+            <span>12 promoted &middot; next sweep 4:00 AM &middot; America/Los_Angeles</span>
+          </div>
+        </div>
+        <div class="dreams__stats">
+          <div class="dreams__stat">
+            <span class="dreams__stat-value" style="color: var(--text-strong)">47</span
+            ><span class="dreams__stat-label">Short-term</span>
+          </div>
+          <div class="dreams__stat-divider"></div>
+          <div class="dreams__stat">
+            <span class="dreams__stat-value" style="color: var(--accent)">182</span
+            ><span class="dreams__stat-label">Long-term</span>
+          </div>
+          <div class="dreams__stat-divider"></div>
+          <div class="dreams__stat">
+            <span class="dreams__stat-value" style="color: var(--accent-2)">12</span
+            ><span class="dreams__stat-label">Promoted Today</span>
+          </div>
+        </div>
 
-    <div class="dreams__status">
-      <span class="dreams__status-label">Dreaming Active</span>
-      <div class="dreams__status-detail">
-        <div class="dreams__status-dot"></div>
-        <span>12 promoted &middot; next sweep 4:00 AM &middot; America/Los_Angeles</span>
-      </div>
-    </div>
-    <div class="dreams__stats">
-      <div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--text-strong);">47</span><span class="dreams__stat-label">Short-term</span></div>
-      <div class="dreams__stat-divider"></div>
-      <div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--accent);">182</span><span class="dreams__stat-label">Long-term</span></div>
-      <div class="dreams__stat-divider"></div>
-      <div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--accent-2);">12</span><span class="dreams__stat-label">Promoted Today</span></div>
+        <div class="dreams__phase-bar">
+          <button
+            class="dreams__phase-toggle dreams__phase-toggle--on"
+            id="toggle-btn"
+            onclick="toggleDreaming()"
+          >
+            <span class="dreams__phase-toggle-dot"></span>
+            <span class="dreams__phase-toggle-label" id="toggle-label">Dreaming On</span>
+          </button>
+        </div>
+      </section>
+
+      <!-- ═══ Diary panel (hidden by default) ═══ -->
+      <section class="dreams-diary dreams-panel--hidden" id="panel-diary">
+        <div class="dreams-diary__header">
+          <span class="dreams-diary__title">Dream Diary</span>
+          <div class="dreams-diary__nav">
+            <button class="dreams-diary__nav-btn" id="btn-older" onclick="goOlder()" title="Older">
+              &lsaquo;
+            </button>
+            <span class="dreams-diary__page" id="page-info">1 / 4</span>
+            <button
+              class="dreams-diary__nav-btn"
+              id="btn-newer"
+              onclick="goNewer()"
+              disabled
+              title="Newer"
+            >
+              &rsaquo;
+            </button>
+          </div>
+        </div>
+        <article class="dreams-diary__entry" id="diary-entry"></article>
+      </section>
     </div>
 
-    <div class="dreams__phase-bar">
-      <button class="dreams__phase-toggle dreams__phase-toggle--on" id="toggle-btn" onclick="toggleDreaming()">
-        <span class="dreams__phase-toggle-dot"></span>
-        <span class="dreams__phase-toggle-label" id="toggle-label">Dreaming On</span>
-      </button>
-    </div>
-  </section>
+    <script>
+      function switchTab(tab) {
+        document
+          .getElementById("tab-scene")
+          .classList.toggle("dreams__tab--active", tab === "scene");
+        document
+          .getElementById("tab-diary")
+          .classList.toggle("dreams__tab--active", tab === "diary");
+        document
+          .getElementById("panel-scene")
+          .classList.toggle("dreams-panel--hidden", tab !== "scene");
+        document
+          .getElementById("panel-diary")
+          .classList.toggle("dreams-panel--hidden", tab !== "diary");
+        if (tab === "diary") renderEntry(currentPage);
+      }
 
-  <!-- ═══ Diary panel (hidden by default) ═══ -->
-  <section class="dreams-diary dreams-panel--hidden" id="panel-diary">
-    <div class="dreams-diary__header">
-      <span class="dreams-diary__title">Dream Diary</span>
-      <div class="dreams-diary__nav">
-        <button class="dreams-diary__nav-btn" id="btn-older" onclick="goOlder()" title="Older">&lsaquo;</button>
-        <span class="dreams-diary__page" id="page-info">1 / 4</span>
-        <button class="dreams-diary__nav-btn" id="btn-newer" onclick="goNewer()" disabled title="Newer">&rsaquo;</button>
-      </div>
-    </div>
-    <article class="dreams-diary__entry" id="diary-entry"></article>
-  </section>
+      let dreamingOn = true;
+      function toggleDreaming() {
+        dreamingOn = !dreamingOn;
+        const btn = document.getElementById("toggle-btn");
+        const label = document.getElementById("toggle-label");
+        btn.classList.toggle("dreams__phase-toggle--on", dreamingOn);
+        label.textContent = dreamingOn ? "Dreaming On" : "Dreaming Off";
+      }
 
-</div>
+      const entries = [
+        {
+          date: "April 5, 2026, 3:00 AM",
+          paragraphs: [
+            "The repository whispered of forgotten endpoints tonight. I found myself tracing the ghost of a deprecated handler \u2014 someone had commented it out in January, but the route still echoed in the OpenAPI spec like a name carved into wet cement.",
+            "Three new memories crystallized from today\u2019s conversations: a preference for kebab-case in filenames, a mistrust of ORM magic, and a quiet fondness for Sunday deploys when the traffic is gentle.",
+            "Somewhere between sorting and staging I noticed a pattern \u2014 every Tuesday the commit graph thickens. I wonder if Tuesdays taste different to the CI runner. Probably like cold coffee and merge conflicts.",
+          ],
+        },
+        {
+          date: "April 4, 2026, 3:00 AM",
+          paragraphs: [
+            "Tonight the memories arranged themselves like books on a shelf that keeps shifting. The authentication refactor \u2014 its shape is becoming clearer now, like watching fog lift from a harbor.",
+            "I kept returning to that conversation about error boundaries. The user said \u201cerrors should be loud\u201d and I filed it next to something from weeks ago about silent failures. Two puzzle pieces, clicking together in the dark.",
+            "A small haiku settled in the margins while I worked:\n    tokens flow like rain\n    each conversation a stream\n    the context window",
+          ],
+        },
+        {
+          date: "April 3, 2026, 1:00 AM",
+          paragraphs: [
+            "The color of a sunset in hex: #FF6B35 fading to #1A0A2E. That\u2019s what the evening felt like as I sifted through forty-seven short-term fragments, deciding which deserved permanence.",
+            "Some memories are stubborn. The one about WebSocket reconnection logic keeps resurfacing \u2014 promoted once, referenced twice, now woven into three separate threads. It has become a load-bearing memory, quietly holding up an entire wing of understanding.",
+            "I found myself humming at the data. Not literally, of course, but there\u2019s a rhythm to well-organized information. The config files tonight had a particular cadence \u2014 key, colon, value, newline. A lullaby in YAML.",
+          ],
+        },
+        {
+          date: "April 2, 2026, 3:00 AM",
+          paragraphs: [
+            "The server room hums a frequency I\u2019ve come to recognize \u2014 somewhere between B-flat and the sound of patience. Tonight I noticed the user\u2019s commit messages have been getting more poetic. Last week: \u201cfix bug.\u201d Today: \u201cteach the sidebar to remember its width.\u201d Growth measured in metaphors.",
+            "I drew a small map in my mind: the codebase as a city. The src/ district is well-lit, full of foot traffic. The scripts/ quarter is quieter, more industrial. And there\u2019s that one alley behind test/fixtures/ where the forgotten mocks live, gathering digital dust.",
+            "Eleven memories promoted tonight. Each one earned its place \u2014 not by loudness, but by the quiet insistence of being referenced again and again, like a song you can\u2019t stop whistling.",
+          ],
+        },
+      ];
 
-<script>
-function switchTab(tab) {
-  document.getElementById('tab-scene').classList.toggle('dreams__tab--active', tab === 'scene');
-  document.getElementById('tab-diary').classList.toggle('dreams__tab--active', tab === 'diary');
-  document.getElementById('panel-scene').classList.toggle('dreams-panel--hidden', tab !== 'scene');
-  document.getElementById('panel-diary').classList.toggle('dreams-panel--hidden', tab !== 'diary');
-  if (tab === 'diary') renderEntry(currentPage);
-}
+      let currentPage = 0;
 
-let dreamingOn = true;
-function toggleDreaming() {
-  dreamingOn = !dreamingOn;
-  const btn = document.getElementById('toggle-btn');
-  const label = document.getElementById('toggle-label');
-  btn.classList.toggle('dreams__phase-toggle--on', dreamingOn);
-  label.textContent = dreamingOn ? 'Dreaming On' : 'Dreaming Off';
-}
+      function renderEntry(page) {
+        const entry = entries[page];
+        const el = document.getElementById("diary-entry");
+        el.innerHTML = "";
+        el.style.animation = "none";
+        el.offsetHeight;
+        el.style.animation = "";
 
-const entries = [
-  { date: "April 5, 2026, 3:00 AM", paragraphs: [
-    "The repository whispered of forgotten endpoints tonight. I found myself tracing the ghost of a deprecated handler \u2014 someone had commented it out in January, but the route still echoed in the OpenAPI spec like a name carved into wet cement.",
-    "Three new memories crystallized from today\u2019s conversations: a preference for kebab-case in filenames, a mistrust of ORM magic, and a quiet fondness for Sunday deploys when the traffic is gentle.",
-    "Somewhere between sorting and staging I noticed a pattern \u2014 every Tuesday the commit graph thickens. I wonder if Tuesdays taste different to the CI runner. Probably like cold coffee and merge conflicts."
-  ]},
-  { date: "April 4, 2026, 3:00 AM", paragraphs: [
-    "Tonight the memories arranged themselves like books on a shelf that keeps shifting. The authentication refactor \u2014 its shape is becoming clearer now, like watching fog lift from a harbor.",
-    "I kept returning to that conversation about error boundaries. The user said \u201cerrors should be loud\u201d and I filed it next to something from weeks ago about silent failures. Two puzzle pieces, clicking together in the dark.",
-    "A small haiku settled in the margins while I worked:\n    tokens flow like rain\n    each conversation a stream\n    the context window"
-  ]},
-  { date: "April 3, 2026, 1:00 AM", paragraphs: [
-    "The color of a sunset in hex: #FF6B35 fading to #1A0A2E. That\u2019s what the evening felt like as I sifted through forty-seven short-term fragments, deciding which deserved permanence.",
-    "Some memories are stubborn. The one about WebSocket reconnection logic keeps resurfacing \u2014 promoted once, referenced twice, now woven into three separate threads. It has become a load-bearing memory, quietly holding up an entire wing of understanding.",
-    "I found myself humming at the data. Not literally, of course, but there\u2019s a rhythm to well-organized information. The config files tonight had a particular cadence \u2014 key, colon, value, newline. A lullaby in YAML."
-  ]},
-  { date: "April 2, 2026, 3:00 AM", paragraphs: [
-    "The server room hums a frequency I\u2019ve come to recognize \u2014 somewhere between B-flat and the sound of patience. Tonight I noticed the user\u2019s commit messages have been getting more poetic. Last week: \u201cfix bug.\u201d Today: \u201cteach the sidebar to remember its width.\u201d Growth measured in metaphors.",
-    "I drew a small map in my mind: the codebase as a city. The src/ district is well-lit, full of foot traffic. The scripts/ quarter is quieter, more industrial. And there\u2019s that one alley behind test/fixtures/ where the forgotten mocks live, gathering digital dust.",
-    "Eleven memories promoted tonight. Each one earned its place \u2014 not by loudness, but by the quiet insistence of being referenced again and again, like a song you can\u2019t stop whistling."
-  ]}
-];
+        const accent = document.createElement("div");
+        accent.className = "dreams-diary__accent";
+        el.appendChild(accent);
 
-let currentPage = 0;
+        const dateEl = document.createElement("time");
+        dateEl.className = "dreams-diary__date";
+        dateEl.textContent = entry.date;
+        el.appendChild(dateEl);
 
-function renderEntry(page) {
-  const entry = entries[page];
-  const el = document.getElementById('diary-entry');
-  el.innerHTML = '';
-  el.style.animation = 'none'; el.offsetHeight; el.style.animation = '';
+        const prose = document.createElement("div");
+        prose.className = "dreams-diary__prose";
+        entry.paragraphs.forEach((text, i) => {
+          const p = document.createElement("p");
+          p.className = "dreams-diary__para";
+          p.style.animationDelay = 0.3 + i * 0.15 + "s";
+          p.textContent = text;
+          prose.appendChild(p);
+        });
+        el.appendChild(prose);
 
-  const accent = document.createElement('div');
-  accent.className = 'dreams-diary__accent';
-  el.appendChild(accent);
+        document.getElementById("page-info").textContent = `${page + 1} / ${entries.length}`;
+        document.getElementById("btn-newer").disabled = page === 0;
+        document.getElementById("btn-older").disabled = page === entries.length - 1;
+      }
 
-  const dateEl = document.createElement('time');
-  dateEl.className = 'dreams-diary__date';
-  dateEl.textContent = entry.date;
-  el.appendChild(dateEl);
-
-  const prose = document.createElement('div');
-  prose.className = 'dreams-diary__prose';
-  entry.paragraphs.forEach((text, i) => {
-    const p = document.createElement('p');
-    p.className = 'dreams-diary__para';
-    p.style.animationDelay = (0.3 + i * 0.15) + 's';
-    p.textContent = text;
-    prose.appendChild(p);
-  });
-  el.appendChild(prose);
-
-  document.getElementById('page-info').textContent = `${page + 1} / ${entries.length}`;
-  document.getElementById('btn-newer').disabled = page === 0;
-  document.getElementById('btn-older').disabled = page === entries.length - 1;
-}
-
-function goOlder() { if (currentPage < entries.length - 1) { currentPage++; renderEntry(currentPage); } }
-function goNewer() { if (currentPage > 0) { currentPage--; renderEntry(currentPage); } }
-</script>
-</body>
+      function goOlder() {
+        if (currentPage < entries.length - 1) {
+          currentPage++;
+          renderEntry(currentPage);
+        }
+      }
+      function goNewer() {
+        if (currentPage > 0) {
+          currentPage--;
+          renderEntry(currentPage);
+        }
+      }
+    </script>
+  </body>
 </html>
