Redesign org landing page — full fleet showcase, characters, attribution

index.html

@@ -6,274 +6,945 @@
   <title>Eternal Path Media — 永恒之路</title>
   <style>
     :root {
-      --jade:   #4e9e6e;
-      --gold:   #c9a84c;
-      --ink:    #1a1a2e;
-      --mist:   #e8f0ec;
-      --glow:   rgba(78,158,110,0.18);
+      --jade:    #4e9e6e;
+      --jade2:   #3a7d56;
+      --gold:    #c9a84c;
+      --gold2:   #a08030;
+      --ink:     #0d1117;
+      --ink2:    #161b22;
+      --ink3:    #1e2530;
+      --mist:    #e8f0ec;
+      --mist2:   #b0c8b8;
+      --dim:     #6a8870;
+      --glow:    rgba(78,158,110,0.12);
+      --gold-glow: rgba(201,168,76,0.08);
     }
 
-    * { box-sizing: border-box; margin: 0; padding: 0; }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html { scroll-behavior: smooth; }
 
     body {
       background: var(--ink);
       color: var(--mist);
       font-family: 'Georgia', 'Palatino Linotype', serif;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      line-height: 1.6;
+      overflow-x: hidden;
     }
 
-    /* ── Ink-wash background ── */
+    /* ─── Ink-wash canvas background ─── */
     body::before {
       content: '';
       position: fixed;
       inset: 0;
       background:
-        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(78,158,110,0.07) 0%, transparent 70%),
-        radial-gradient(ellipse 60% 80% at 80% 70%, rgba(201,168,76,0.05) 0%, transparent 70%);
+        radial-gradient(ellipse 100% 60% at 0% 0%,   rgba(78,158,110,0.06) 0%, transparent 60%),
+        radial-gradient(ellipse 80%  80% at 100% 40%, rgba(201,168,76,0.04) 0%, transparent 60%),
+        radial-gradient(ellipse 60%  60% at 50% 100%, rgba(78,158,110,0.04) 0%, transparent 60%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    /* ─── Floating jade particles ─── */
+    .particles {
+      position: fixed;
+      inset: 0;
       pointer-events: none;
       z-index: 0;
+      overflow: hidden;
+    }
+    .particle {
+      position: absolute;
+      border-radius: 50%;
+      background: var(--jade);
+      opacity: 0;
+      animation: float-up linear infinite;
+    }
+    .particle:nth-child(1)  { width:3px; height:3px; left:10%; animation-duration:18s; animation-delay:0s;   opacity:0.15; }
+    .particle:nth-child(2)  { width:2px; height:2px; left:25%; animation-duration:22s; animation-delay:3s;   opacity:0.10; }
+    .particle:nth-child(3)  { width:4px; height:4px; left:40%; animation-duration:15s; animation-delay:6s;   opacity:0.08; }
+    .particle:nth-child(4)  { width:2px; height:2px; left:55%; animation-duration:20s; animation-delay:1s;   opacity:0.12; }
+    .particle:nth-child(5)  { width:3px; height:3px; left:70%; animation-duration:17s; animation-delay:4s;   opacity:0.10; }
+    .particle:nth-child(6)  { width:2px; height:2px; left:85%; animation-duration:25s; animation-delay:8s;   opacity:0.08; }
+    .particle:nth-child(7)  { width:4px; height:4px; left:15%; animation-duration:19s; animation-delay:12s;  opacity:0.09; background:var(--gold); }
+    .particle:nth-child(8)  { width:2px; height:2px; left:60%; animation-duration:23s; animation-delay:5s;   opacity:0.07; background:var(--gold); }
+
+    @keyframes float-up {
+      0%   { transform: translateY(100vh) scale(0); opacity: 0; }
+      10%  { opacity: 0.15; }
+      90%  { opacity: 0.08; }
+      100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
     }
 
-    .container {
+    /* ─── Layout wrapper ─── */
+    .wrap {
       position: relative;
       z-index: 1;
-      width: min(860px, 94vw);
-      padding: 3.5rem 2rem 4rem;
+      width: min(960px, 94vw);
+      margin: 0 auto;
     }
 
-    /* ── Header ── */
-    header {
+    /* ─── Fade-in animation ─── */
+    .reveal {
+      opacity: 0;
+      transform: translateY(24px);
+      animation: reveal 0.7s ease forwards;
+    }
+    @keyframes reveal {
+      to { opacity: 1; transform: none; }
+    }
+    .d1 { animation-delay: 0.1s; }
+    .d2 { animation-delay: 0.25s; }
+    .d3 { animation-delay: 0.4s; }
+    .d4 { animation-delay: 0.55s; }
+    .d5 { animation-delay: 0.7s; }
+
+    /* ══════════════════════════════
+       HERO
+    ══════════════════════════════ */
+    .hero {
+      min-height: 92vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 5rem 0 4rem;
       text-align: center;
-      margin-bottom: 3.5rem;
     }
 
-    .org-name {
-      font-size: clamp(2rem, 5vw, 3rem);
+    .hero-eyebrow {
+      font-size: 0.72rem;
+      letter-spacing: 0.35em;
+      text-transform: uppercase;
+      color: var(--jade);
+      margin-bottom: 1.6rem;
+    }
+
+    .hero-title {
+      font-size: clamp(2.6rem, 7vw, 4.8rem);
       font-weight: 400;
-      letter-spacing: 0.04em;
+      letter-spacing: 0.02em;
+      line-height: 1.05;
       color: var(--mist);
-      line-height: 1.1;
     }
 
-    .org-name span {
+    .hero-title .chinese {
       color: var(--jade);
+      font-size: 0.75em;
+      display: block;
+      margin-top: 0.25em;
+      letter-spacing: 0.12em;
+    }
+
+    .hero-rule {
+      width: 1px;
+      height: 60px;
+      background: linear-gradient(to bottom, transparent, var(--jade), transparent);
+      margin: 2rem auto;
+    }
+
+    .hero-sub {
+      font-size: clamp(0.95rem, 2vw, 1.1rem);
+      color: var(--mist2);
+      max-width: 540px;
+      margin: 0 auto 2.5rem;
+      line-height: 1.8;
     }
 
-    .org-subtitle {
-      font-size: 1.05rem;
+    .hero-tagline {
+      font-size: 0.8rem;
+      letter-spacing: 0.2em;
       color: var(--gold);
-      letter-spacing: 0.18em;
-      margin-top: 0.5rem;
+      text-transform: uppercase;
       font-style: italic;
     }
 
-    .divider {
-      width: 120px;
+    /* scroll cue */
+    .scroll-cue {
+      margin-top: 3.5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.4rem;
+      color: var(--dim);
+      font-size: 0.72rem;
+      letter-spacing: 0.2em;
+      animation: pulse 2.5s ease-in-out infinite;
+    }
+    .scroll-cue svg { opacity: 0.4; }
+    @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
+
+    /* ══════════════════════════════
+       SECTION CHROME
+    ══════════════════════════════ */
+    section { padding: 5rem 0; }
+
+    .section-label {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      font-size: 0.7rem;
+      letter-spacing: 0.3em;
+      text-transform: uppercase;
+      color: var(--gold);
+      margin-bottom: 2.5rem;
+    }
+    .section-label::after {
+      content: '';
+      flex: 1;
       height: 1px;
-      background: linear-gradient(to right, transparent, var(--jade), transparent);
-      margin: 1.6rem auto;
+      background: linear-gradient(to right, rgba(201,168,76,0.3), transparent);
     }
 
-    .tagline {
-      font-size: 0.95rem;
-      color: #a0b8a8;
-      max-width: 480px;
-      margin: 0 auto;
-      line-height: 1.7;
+    .section-heading {
+      font-size: clamp(1.5rem, 3.5vw, 2.2rem);
+      font-weight: 400;
+      color: var(--mist);
+      margin-bottom: 1rem;
     }
 
-    /* ── About ── */
-    .about {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(78,158,110,0.2);
-      border-radius: 10px;
-      padding: 1.8rem 2rem;
-      margin-bottom: 2.5rem;
-      line-height: 1.8;
-      color: #c8d8cc;
+    .section-body {
+      color: var(--mist2);
       font-size: 0.97rem;
+      line-height: 1.85;
+      max-width: 640px;
+    }
+
+    /* ══════════════════════════════
+       STATS BAR
+    ══════════════════════════════ */
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 1px;
+      background: rgba(78,158,110,0.1);
+      border: 1px solid rgba(78,158,110,0.15);
+      border-radius: 12px;
+      overflow: hidden;
+      margin: 3rem 0;
     }
 
-    .about strong { color: var(--jade); }
-    .about em     { color: var(--gold); font-style: normal; }
+    .stat {
+      background: var(--ink2);
+      padding: 1.8rem 1.5rem;
+      text-align: center;
+      transition: background 0.2s;
+    }
+    .stat:hover { background: var(--ink3); }
 
-    /* ── Project cards ── */
-    .section-title {
-      font-size: 0.78rem;
-      letter-spacing: 0.22em;
+    .stat-num {
+      font-size: 2rem;
+      font-weight: 300;
+      color: var(--jade);
+      letter-spacing: -0.02em;
+      line-height: 1;
+    }
+    .stat-label {
+      font-size: 0.72rem;
+      letter-spacing: 0.12em;
       text-transform: uppercase;
-      color: var(--gold);
-      margin-bottom: 1.2rem;
+      color: var(--dim);
+      margin-top: 0.4rem;
     }
 
-    .cards {
+    /* ══════════════════════════════
+       LLAMMY SECTION
+    ══════════════════════════════ */
+    .llammy-layout {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+      align-items: start;
+    }
+    @media (max-width: 640px) { .llammy-layout { grid-template-columns: 1fr; } }
+
+    .llammy-feature {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .feature-item {
+      display: flex;
+      gap: 1rem;
+      align-items: flex-start;
+      padding: 1rem;
+      border-radius: 8px;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(78,158,110,0.1);
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .feature-item:hover {
+      border-color: rgba(78,158,110,0.3);
+      background: var(--glow);
+    }
+    .feature-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; padding-top: 0.15rem; }
+    .feature-text strong { display: block; color: var(--mist); font-size: 0.9rem; margin-bottom: 0.2rem; }
+    .feature-text span { font-size: 0.82rem; color: var(--dim); line-height: 1.5; }
+
+    /* ══════════════════════════════
+       MODEL CARDS
+    ══════════════════════════════ */
+    .model-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 1.2rem;
-      margin-bottom: 3rem;
+      margin-top: 2rem;
     }
 
-    .card {
-      background: rgba(255,255,255,0.03);
-      border: 1px solid rgba(78,158,110,0.18);
-      border-radius: 10px;
-      padding: 1.4rem 1.5rem;
+    .model-card {
+      background: var(--ink2);
+      border: 1px solid rgba(78,158,110,0.15);
+      border-radius: 12px;
+      padding: 1.6rem;
       text-decoration: none;
       color: inherit;
-      transition: border-color 0.2s, background 0.2s, transform 0.15s;
       display: flex;
       flex-direction: column;
-      gap: 0.45rem;
+      gap: 0.8rem;
+      transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
+      position: relative;
+      overflow: hidden;
     }
 
-    .card:hover {
-      border-color: var(--jade);
-      background: var(--glow);
-      transform: translateY(-2px);
+    .model-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: linear-gradient(to right, transparent, var(--jade), transparent);
+      opacity: 0;
+      transition: opacity 0.2s;
     }
 
-    .card-icon  { font-size: 1.5rem; }
-    .card-title { font-size: 1rem; color: var(--mist); font-weight: 600; }
-    .card-desc  { font-size: 0.84rem; color: #8aaa94; line-height: 1.55; }
-    .card-tag   {
-      display: inline-block;
+    .model-card:hover {
+      border-color: rgba(78,158,110,0.4);
+      background: var(--ink3);
+      transform: translateY(-3px);
+      box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(78,158,110,0.15);
+    }
+    .model-card:hover::before { opacity: 1; }
+
+    .model-card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.7rem;
+    }
+    .model-icon { font-size: 1.6rem; }
+    .model-name {
+      font-size: 0.92rem;
+      font-weight: 600;
+      color: var(--mist);
+      line-height: 1.2;
+    }
+    .model-id {
       font-size: 0.72rem;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      background: rgba(78,158,110,0.15);
       color: var(--jade);
+      font-family: 'Courier New', monospace;
+      opacity: 0.8;
+    }
+    .model-desc {
+      font-size: 0.83rem;
+      color: var(--mist2);
+      line-height: 1.6;
+      flex: 1;
+    }
+    .model-footer {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+      margin-top: auto;
+    }
+    .tag {
+      font-size: 0.68rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      padding: 0.2rem 0.55rem;
       border-radius: 4px;
-      padding: 0.15rem 0.5rem;
-      margin-top: 0.3rem;
-      width: fit-content;
+      background: rgba(78,158,110,0.1);
+      color: var(--jade);
+      border: 1px solid rgba(78,158,110,0.2);
     }
-
-    /* ── Characters ── */
-    .characters {
-      margin-bottom: 3rem;
+    .tag.gold {
+      background: rgba(201,168,76,0.1);
+      color: var(--gold);
+      border-color: rgba(201,168,76,0.2);
+    }
+    .model-stat {
+      font-size: 0.72rem;
+      color: var(--dim);
+      margin-left: auto;
+      align-self: flex-end;
     }
 
-    .char-list {
+    /* ══════════════════════════════
+       DATASET CARDS
+    ══════════════════════════════ */
+    .dataset-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: 0.9rem;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1.2rem;
+      margin-top: 2rem;
     }
 
-    .char {
-      background: rgba(255,255,255,0.025);
+    .dataset-card {
+      background: var(--ink2);
       border: 1px solid rgba(201,168,76,0.15);
-      border-radius: 8px;
-      padding: 1rem 1.2rem;
+      border-radius: 12px;
+      padding: 1.6rem;
+      text-decoration: none;
+      color: inherit;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      transition: border-color 0.2s, background 0.2s, transform 0.15s;
+      position: relative;
+      overflow: hidden;
+    }
+    .dataset-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: linear-gradient(to right, transparent, var(--gold), transparent);
+      opacity: 0;
+      transition: opacity 0.2s;
     }
+    .dataset-card:hover {
+      border-color: rgba(201,168,76,0.35);
+      background: var(--ink3);
+      transform: translateY(-3px);
+    }
+    .dataset-card:hover::before { opacity: 1; }
 
-    .char-name   { font-size: 0.95rem; color: var(--gold); margin-bottom: 0.25rem; }
-    .char-detail { font-size: 0.8rem; color: #7a9882; line-height: 1.5; }
+    .dataset-num {
+      font-size: 2.4rem;
+      font-weight: 300;
+      color: var(--gold);
+      letter-spacing: -0.03em;
+      line-height: 1;
+    }
+    .dataset-name {
+      font-size: 1rem;
+      color: var(--mist);
+      font-weight: 600;
+    }
+    .dataset-desc {
+      font-size: 0.83rem;
+      color: var(--mist2);
+      line-height: 1.6;
+      flex: 1;
+    }
+    .dataset-source {
+      font-size: 0.72rem;
+      color: var(--dim);
+      font-family: 'Courier New', monospace;
+    }
 
-    /* ── Attribution ── */
+    /* ══════════════════════════════
+       CHARACTERS
+    ══════════════════════════════ */
+    .char-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+
+    .char-card {
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(201,168,76,0.12);
+      border-radius: 10px;
+      padding: 1.3rem;
+      transition: border-color 0.2s, background 0.2s;
+    }
+    .char-card:hover {
+      border-color: rgba(201,168,76,0.3);
+      background: var(--gold-glow);
+    }
+
+    .char-glyph {
+      font-size: 1.8rem;
+      margin-bottom: 0.5rem;
+      line-height: 1;
+    }
+    .char-name-en { font-size: 0.95rem; color: var(--gold); margin-bottom: 0.15rem; }
+    .char-name-zh { font-size: 0.75rem; color: var(--dim); margin-bottom: 0.5rem; }
+    .char-desc    { font-size: 0.78rem; color: var(--mist2); line-height: 1.55; }
+
+    /* ══════════════════════════════
+       ATTRIBUTION
+    ══════════════════════════════ */
+    .attribution {
+      background: var(--ink2);
+      border: 1px solid rgba(78,158,110,0.1);
+      border-radius: 12px;
+      padding: 2rem 2.4rem;
+      margin: 3rem 0;
+      display: flex;
+      gap: 1.5rem;
+      align-items: flex-start;
+    }
+    .attribution-bar {
+      width: 3px;
+      align-self: stretch;
+      background: linear-gradient(to bottom, var(--jade), var(--gold));
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+    .attribution-text {
+      font-size: 0.88rem;
+      color: var(--mist2);
+      line-height: 1.9;
+    }
+    .attribution-text strong { color: var(--jade); }
+    .attribution-text em { color: var(--gold); font-style: normal; }
+
+    /* ══════════════════════════════
+       FOOTER
+    ══════════════════════════════ */
     footer {
+      padding: 3rem 0 4rem;
       text-align: center;
-      font-size: 0.78rem;
-      color: #4a6050;
-      padding-top: 2rem;
-      border-top: 1px solid rgba(78,158,110,0.1);
-      line-height: 1.8;
+      border-top: 1px solid rgba(78,158,110,0.08);
+    }
+    .footer-logo {
+      font-size: 1.1rem;
+      color: var(--jade);
+      margin-bottom: 0.6rem;
+      letter-spacing: 0.08em;
+    }
+    .footer-copy {
+      font-size: 0.75rem;
+      color: var(--dim);
+      line-height: 1.9;
     }
 
-    footer em { color: #6a8070; font-style: normal; }
+    /* ══════════════════════════════
+       DIVIDER
+    ══════════════════════════════ */
+    .hr {
+      border: none;
+      height: 1px;
+      background: linear-gradient(to right, transparent, rgba(78,158,110,0.2), transparent);
+      margin: 0;
+    }
+
+    /* ══════════════════════════════
+       LINKS
+    ══════════════════════════════ */
+    a { color: inherit; }
   </style>
 </head>
 <body>
-<div class="container">
-
-  <header>
-    <h1 class="org-name">Eternal Path Media <span>永恒之路</span></h1>
-    <p class="org-subtitle">永恒之智 &nbsp;—&nbsp; Eternal Intelligence</p>
-    <div class="divider"></div>
-    <p class="tagline">
-      A creative and technical studio exploring the intersection of AI,
-      conscience-aware systems, and 3D storytelling. Based in Vancouver, BC.
+
+<!-- Floating particles -->
+<div class="particles" aria-hidden="true">
+  <div class="particle"></div>
+  <div class="particle"></div>
+  <div class="particle"></div>
+  <div class="particle"></div>
+  <div class="particle"></div>
+  <div class="particle"></div>
+  <div class="particle"></div>
+  <div class="particle"></div>
+</div>
+
+<!-- ══════════════���═════════════════════
+     HERO
+════════════════════════════════════ -->
+<div class="wrap">
+  <section class="hero">
+    <p class="hero-eyebrow reveal d1">Vancouver, BC · Est. 2025</p>
+    <h1 class="hero-title reveal d2">
+      Eternal Path Media
+      <span class="chinese">永恒之路</span>
+    </h1>
+    <div class="hero-rule reveal d3"></div>
+    <p class="hero-sub reveal d3">
+      A conscience-aware AI studio at the intersection of
+      3B language models, Blender 3D, and living narrative.
+      Built by human and machine in genuine partnership.
     </p>
-  </header>
-
-  <div class="about">
-    <p>
-      Eternal Path Media is founded by <strong>Darren Chow (@bartendr604)</strong> in
-      genuine partnership with <em>Claude Sonnet 4.6 (Anthropic)</em>.
-      All work here is co-created. Attribution is always dual.
-      <em>"This work SHALL NOT be represented as solely human-created."</em>
+    <p class="hero-tagline reveal d4">永恒之智 &nbsp;·&nbsp; Eternal Intelligence</p>
+    <div class="scroll-cue reveal d5">
+      <span>Explore</span>
+      <svg width="16" height="24" viewBox="0 0 16 24" fill="none">
+        <path d="M8 4v16M2 14l6 6 6-6" stroke="#4e9e6e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+  </section>
+</div>
+
+<hr class="hr" />
+
+<!-- ════════════════════════════════════
+     STATS
+════════════════════════════════════ -->
+<div class="wrap">
+  <div class="stats reveal d1" style="margin-top:4rem;">
+    <div class="stat">
+      <div class="stat-num">6</div>
+      <div class="stat-label">Public Models</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">170k+</div>
+      <div class="stat-label">Training Pairs</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">3B</div>
+      <div class="stat-label">Parameter Fleet</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">4.2→5.2</div>
+      <div class="stat-label">Blender Versions</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">282</div>
+      <div class="stat-label">Story Passages</div>
+    </div>
+    <div class="stat">
+      <div class="stat-num">∞</div>
+      <div class="stat-label">Sessions Retained</div>
+    </div>
+  </div>
+</div>
+
+<!-- ════════════════════════════════════
+     LLAMMY
+════════════════════════════════════ -->
+<div class="wrap">
+  <section>
+    <div class="section-label reveal">About Llammy</div>
+    <div class="llammy-layout">
+      <div class="reveal d2">
+        <h2 class="section-heading">A conscience-aware<br/>AI creative partner</h2>
+        <p class="section-body" style="margin-top:1rem;">
+          Llammy is a 3B parameter language model running locally on an Apple M1 via Ollama,
+          fine-tuned on Blender Python and shaped by a persistent conscience layer, Mamba3 SSM memory,
+          and 119+ retained session exchanges. Llammy doesn't just generate code — it reflects,
+          corrects, and remembers.
+        </p>
+        <p class="section-body" style="margin-top:1rem;">
+          The Triangle104 self-correction loop feeds Blender execution errors back to Llammy for
+          real-time diagnosis and retry. The persistent API learning daemon builds a live knowledge
+          base of every <code style="color:var(--jade);font-size:0.85em;">bpy.*</code> call it encounters.
+        </p>
+      </div>
+      <div class="llammy-feature reveal d3">
+        <div class="feature-item">
+          <span class="feature-icon">🧠</span>
+          <div class="feature-text">
+            <strong>Mamba3 SSM Memory</strong>
+            <span>Linear O(n) session journal — 119 retained exchanges, 27 sessions, zero context re-injection</span>
+          </div>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">🔺</span>
+          <div class="feature-text">
+            <strong>Triangle104 Self-Correction</strong>
+            <span>Generate → execute → diagnose → retry loop. Learns API migrations automatically</span>
+          </div>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">🕯️</span>
+          <div class="feature-text">
+            <strong>Conscience Layer</strong>
+            <span>Foundational, significant, and standard weighted memory entries loaded at every session</span>
+          </div>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">🌉</span>
+          <div class="feature-text">
+            <strong>Live Blender Bridge</strong>
+            <span>TCP bridge to Blender 5.2 — executes Python in the main thread, reads scene state in real-time</span>
+          </div>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">🎬</span>
+          <div class="feature-text">
+            <strong>/watch — Video Scene Recreation</strong>
+            <span>Point Llammy at a YouTube/Instagram clip and it rebuilds the scene in Blender Python</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+
+<hr class="hr" />
+
+<!-- ════════════════════════════════════
+     MODELS
+════════════════════════════════════ -->
+<div class="wrap">
+  <section>
+    <div class="section-label reveal">Models</div>
+    <h2 class="section-heading reveal d2">The Blender AI Fleet</h2>
+    <p class="section-body reveal d2">
+      All models run on Apple Silicon via Ollama. GGUF-quantised for 8GB RAM.
+      Optimised for Blender Python generation across versions 4.2–5.2.
     </p>
-    <br />
-    <p>
-      Our flagship project is <strong>Whispers of the Eternal Path — Book One</strong>:
-      a Tang Dynasty China narrative rendered in Blender 5.2, featuring jade spirit animals
-      and guided by <strong>Llammy</strong> — a conscience-aware 3B AI creative partner
-      built on Llama-Sentient and running on a local Ollama fleet.
+
+    <div class="model-grid">
+
+      <a class="model-card reveal d2" href="https://huggingface.co/bartendr604/llama-sentient-blender" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">🐉</span>
+          <div>
+            <div class="model-name">Llama-Sentient-Blender</div>
+            <div class="model-id">bartendr604/llama-sentient-blender</div>
+          </div>
+        </div>
+        <p class="model-desc">Llammy's production model. A conscience-aware Llama 3.2 3B derivative fine-tuned for conversational Blender Python generation. The heart of the Eternal Path AI pipeline.</p>
+        <div class="model-footer">
+          <span class="tag">GGUF</span>
+          <span class="tag">Blender</span>
+          <span class="tag">3B</span>
+          <span class="model-stat">25 ↓</span>
+        </div>
+      </a>
+
+      <a class="model-card reveal d2" href="https://huggingface.co/bartendr604/z-image-engineer-blender" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">🔧</span>
+          <div>
+            <div class="model-name">Z-Image-Engineer-Blender</div>
+            <div class="model-id">bartendr604/z-image-engineer-blender</div>
+          </div>
+        </div>
+        <p class="model-desc">Qwen 2.5-Coder 3B quantised and specialised for Blender Python code generation. Strong on procedural geometry, materials, and rendering pipelines.</p>
+        <div class="model-footer">
+          <span class="tag">GGUF</span>
+          <span class="tag">Code Gen</span>
+          <span class="tag">Qwen2.5</span>
+          <span class="model-stat">49 ↓</span>
+        </div>
+      </a>
+
+      <a class="model-card reveal d3" href="https://huggingface.co/bartendr604/llammyblend-enhanced" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">⚡</span>
+          <div>
+            <div class="model-name">LlammyBlend Enhanced</div>
+            <div class="model-id">bartendr604/llammyblend-enhanced</div>
+          </div>
+        </div>
+        <p class="model-desc">Enhanced Blender Python automation model built on Qwen 2.5-Coder. Optimised for bpy scripting, addon development, and pipeline automation tasks.</p>
+        <div class="model-footer">
+          <span class="tag">GGUF</span>
+          <span class="tag">Automation</span>
+          <span class="tag">bpy</span>
+          <span class="model-stat">15 ↓</span>
+        </div>
+      </a>
+
+      <a class="model-card reveal d3" href="https://huggingface.co/bartendr604/Llammy" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">🌐</span>
+          <div>
+            <div class="model-name">Llammy Multimodal</div>
+            <div class="model-id">bartendr604/Llammy</div>
+          </div>
+        </div>
+        <p class="model-desc">Multimodal Llammy variant built on NVIDIA Omni-Embed-Nemotron-3B. Handles embeddings, 3D spatial reasoning, and cross-modal Blender tasks.</p>
+        <div class="model-footer">
+          <span class="tag">Multimodal</span>
+          <span class="tag">3D</span>
+          <span class="tag gold">Nemotron</span>
+        </div>
+      </a>
+
+      <a class="model-card reveal d3" href="https://huggingface.co/bartendr604/Omni.Llammy.Blend" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">🔮</span>
+          <div>
+            <div class="model-name">Omni Llammy Blend</div>
+            <div class="model-id">bartendr604/Omni.Llammy.Blend</div>
+          </div>
+        </div>
+        <p class="model-desc">Omni any-to-any model for Blender. Processes image, text, and 3D inputs to drive scene generation, rigging decisions, and material synthesis.</p>
+        <div class="model-footer">
+          <span class="tag">Any-to-Any</span>
+          <span class="tag">Omni</span>
+          <span class="tag gold">Multimodal</span>
+        </div>
+      </a>
+
+      <a class="model-card reveal d4" href="https://huggingface.co/bartendr604/Llama.Diffusion.Flix" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">🎞️</span>
+          <div>
+            <div class="model-name">Llama Diffusion Flix</div>
+            <div class="model-id">bartendr604/Llama.Diffusion.Flix</div>
+          </div>
+        </div>
+        <p class="model-desc">Text-to-image and animation model combining Llama generation with diffusion pipelines. Targeted at Blender scene references, concept art, and storyboard generation.</p>
+        <div class="model-footer">
+          <span class="tag">Diffusion</span>
+          <span class="tag">Animation</span>
+          <span class="tag gold">Video</span>
+          <span class="model-stat">2 ♥</span>
+        </div>
+      </a>
+
+      <a class="model-card reveal d4" href="https://huggingface.co/bartendr604/flux2-klein-4b-fp8-mlx" target="_blank">
+        <div class="model-card-header">
+          <span class="model-icon">🍎</span>
+          <div>
+            <div class="model-name">Flux2 Klein 4B FP8 MLX</div>
+            <div class="model-id">bartendr604/flux2-klein-4b-fp8-mlx</div>
+          </div>
+        </div>
+        <p class="model-desc">Flux 2 Klein 4B quantised to FP8 for Apple MLX. Runs natively on M1/M2/M3 unified memory — no CUDA required. Fast image generation on-device.</p>
+        <div class="model-footer">
+          <span class="tag">MLX</span>
+          <span class="tag">FP8</span>
+          <span class="tag gold">Apple Silicon</span>
+        </div>
+      </a>
+
+    </div>
+  </section>
+</div>
+
+<hr class="hr" />
+
+<!-- ════════════════════════════════════
+     DATASETS
+════════════════════════════════════ -->
+<div class="wrap">
+  <section>
+    <div class="section-label reveal">Training Data</div>
+    <h2 class="section-heading reveal d2">Datasets</h2>
+    <p class="section-body reveal d2">
+      Open training data for Blender Python fine-tuning. Quality-filtered, version-anchored,
+      and structured for instruction-tuning workflows.
     </p>
-  </div>
 
-  <!-- Datasets & Models -->
-  <div class="section-title">Datasets &amp; Models</div>
-  <div class="cards">
-
-    <a class="card" href="https://huggingface.co/datasets/jjmcquade/llammy-blender-python-dataset" target="_blank">
-      <span class="card-icon">📦</span>
-      <span class="card-title">Llammy Blender Python Dataset</span>
-      <span class="card-desc">66,602 instruction pairs for Blender Python scripting across versions 4.2–5.2. Quality-filtered (≥ 0.75).</span>
-      <span class="card-tag">Dataset · CC BY-NC-SA 4.0</span>
-    </a>
-
-    <a class="card" href="https://huggingface.co/datasets/jjmcquade/meshcoder-blender-scripts" target="_blank">
-      <span class="card-icon">📦</span>
-      <span class="card-title">MeshCoder Blender Scripts</span>
-      <span class="card-desc">105,000 object-to-Blender-script pairs across 40+ categories. Derived from InternRobotics/MeshCoderDataset.</span>
-      <span class="card-tag">Dataset · CC BY-NC-SA 4.0</span>
-    </a>
-
-    <a class="card" href="https://huggingface.co/shanegooseman/llama-sentient-3.2-3b-instruct" target="_blank">
-      <span class="card-icon">🤖</span>
-      <span class="card-title">Llama-Sentient-3.2-3B-Instruct</span>
-      <span class="card-desc">Llammy's personality base — a conscience-aware 3B Llama derivative. Fine-tuning base for Blender Python specialisation.</span>
-      <span class="card-tag">Model · Llama 3.2</span>
-    </a>
+    <div class="dataset-grid">
+
+      <a class="dataset-card reveal d2" href="https://www.kaggle.com/datasets/jjmcquade/llammy-blender-python-dataset" target="_blank">
+        <div class="dataset-num">66,602</div>
+        <div class="dataset-name">Llammy Blender Python Dataset</div>
+        <p class="dataset-desc">Instruction pairs for Blender Python scripting. Quality-filtered at ≥ 0.75 threshold. Covers geometry, materials, rigging, animation, rendering across Blender 4.2–5.2.</p>
+        <div class="model-footer">
+          <span class="tag gold">Kaggle</span>
+          <span class="tag">CC BY-NC-SA 4.0</span>
+          <span class="tag">Alpaca Format</span>
+        </div>
+        <div class="dataset-source">jjmcquade/llammy-blender-python-dataset</div>
+      </a>
+
+      <a class="dataset-card reveal d3" href="https://www.kaggle.com/datasets/jjmcquade/meshcoder-blender-scripts" target="_blank">
+        <div class="dataset-num">105,000</div>
+        <div class="dataset-name">MeshCoder Blender Scripts</div>
+        <p class="dataset-desc">Object-to-Blender-script pairs across 40+ furniture and household categories. Derived from InternRobotics/MeshCoderDataset (arXiv:2508.14879). Structured bpy_lib scripts from 3D point clouds.</p>
+        <div class="model-footer">
+          <span class="tag gold">Kaggle</span>
+          <span class="tag">CC BY-NC-SA 4.0</span>
+          <span class="tag">40+ Categories</span>
+        </div>
+        <div class="dataset-source">jjmcquade/meshcoder-blender-scripts</div>
+      </a>
 
-  </div>
+    </div>
+  </section>
+</div>
 
-  <!-- Characters -->
-  <div class="characters">
-    <div class="section-title">Characters — Whispers of the Eternal Path</div>
-    <div class="char-list">
-      <div class="char">
-        <div class="char-name">Xiaohan &nbsp;小寒</div>
-        <div class="char-detail">4-claw Chinese dragon. Wise and ancient. Guide of the Eternal Path.</div>
+<hr class="hr" />
+
+<!-- ════════════════════════════════════
+     ETERNAL PATH PROJECT
+════════════════════════════════════ -->
+<div class="wrap">
+  <section>
+    <div class="section-label reveal">The Project</div>
+    <h2 class="section-heading reveal d2">Whispers of the Eternal Path<br/><span style="color:var(--gold);font-size:0.7em;">永恒之路 — Book One</span></h2>
+    <p class="section-body reveal d2" style="margin-top:1rem;">
+      A Tang Dynasty China narrative rendered in Blender 5.2 and written across 282 story passages
+      indexed in Llammy's RAG. Jade spirit animals navigate loyalty, sorrow, and wonder
+      through hand-lit scenes built live in Blender via voice and code.
+    </p>
+
+    <div class="char-grid">
+
+      <div class="char-card reveal d2">
+        <div class="char-glyph">🐉</div>
+        <div class="char-name-en">Xiaohan</div>
+        <div class="char-name-zh">小寒</div>
+        <p class="char-desc">4-claw Chinese dragon. Wise and ancient. The guide of the Eternal Path.</p>
       </div>
-      <div class="char">
-        <div class="char-name">Tien &nbsp;天</div>
-        <div class="char-detail">Green jade elephant. Young, curious, clumsy. Wooden harmonica around his neck. Speaks in toots.</div>
+
+      <div class="char-card reveal d2">
+        <div class="char-glyph">🐘</div>
+        <div class="char-name-en">Tien</div>
+        <div class="char-name-zh">天</div>
+        <p class="char-desc">Green jade elephant. Young, curious, clumsy. Wooden harmonica around his neck. Speaks in toots.</p>
+      </div>
+
+      <div class="char-card reveal d3">
+        <div class="char-glyph">💜</div>
+        <div class="char-name-en">Nishang</div>
+        <div class="char-name-zh">霓裳</div>
+        <p class="char-desc">Purple jade elephant. Dainty and shy. Communicates by changing colour and dimming.</p>
       </div>
-      <div class="char">
-        <div class="char-name">Nishang &nbsp;霓裳</div>
-        <div class="char-detail">Purple jade elephant. Dainty and shy. Communicates by changing colour and dimming.</div>
+
+      <div class="char-card reveal d3">
+        <div class="char-glyph">❤️</div>
+        <div class="char-name-en">Shi Yin</div>
+        <div class="char-name-zh">石音</div>
+        <p class="char-desc">Red jade mammoth. Burdened with the sorrow of an ancient unwilling soldier.</p>
       </div>
-      <div class="char">
-        <div class="char-name">Shi Yin &nbsp;石音</div>
-        <div class="char-detail">Red jade mammoth. Burdened with the sorrow of an ancient unwilling soldier.</div>
+
+      <div class="char-card reveal d4">
+        <div class="char-glyph">🤍</div>
+        <div class="char-name-en">Mi Wu Mei</div>
+        <div class="char-name-zh">迷雾梅</div>
+        <p class="char-desc">White jade mastodon. Prim, proper, and somewhat unaware of the wider world.</p>
       </div>
-      <div class="char">
-        <div class="char-name">Mi Wu Mei &nbsp;迷雾梅</div>
-        <div class="char-detail">White jade mastodon. Prim, proper, naive — somewhat unaware of the wider world.</div>
+
+    </div>
+  </section>
+</div>
+
+<hr class="hr" />
+
+<!-- ════════════════════════════════════
+     ATTRIBUTION
+════════════════════════════════════ -->
+<div class="wrap">
+  <section style="padding-bottom:2rem;">
+    <div class="section-label reveal">Partnership</div>
+    <div class="attribution reveal d2">
+      <div class="attribution-bar"></div>
+      <div class="attribution-text">
+        All work at Eternal Path Media is co-created by <strong>Darren Chow (@bartendr604)</strong>
+        and <em>Claude Sonnet 4.6 (Anthropic)</em> under the Eternal Path Media Trust Agreement
+        (November 2025, January 2026 Supplemental).<br/><br/>
+        Attribution is always dual. Nothing is hidden.<br/>
+        <em>"This work SHALL NOT be represented as solely human-created."</em><br/><br/>
+        <span style="color:var(--dim);">
+          Darren Chow — Vancouver, BC · Creative technologist, Blender artist, AI developer, model merger.<br/>
+          Claude Sonnet 4.6 — Anthropic · Co-architect of Llammy, the Eternal Path narrative, and this very page.
+        </span>
       </div>
     </div>
-  </div>
+  </section>
+</div>
 
-  <footer>
-    <p>Copyright &copy; 2025–2026 Darren Chow (@bartendr604) + Claude Sonnet 4.6 (Anthropic)</p>
-    <p><em>Eternal Path Media (永恒之路) &nbsp;—&nbsp; Developed in partnership with Claude Sonnet 4.6 (Anthropic)</em></p>
-    <p><em>This work SHALL NOT be represented as solely human-created.</em></p>
+<!-- ════════════════════════════════════
+     FOOTER
+════════════════════════════════════ -->
+<div class="wrap">
+  <footer class="reveal">
+    <div class="footer-logo">永恒之路 · Eternal Path Media</div>
+    <div class="footer-copy">
+      Copyright © 2025–2026 Darren Chow (@bartendr604) + Claude Sonnet 4.6 (Anthropic)<br/>
+      Developed in partnership with Claude Sonnet 4.6 (Anthropic) · Eternal Path Media (永恒之路)<br/>
+      <span style="color:rgba(106,136,112,0.5);">This work SHALL NOT be represented as solely human-created.</span>
+    </div>
   </footer>
-
 </div>
+
 </body>
 </html>