Deploy IntelligenceLab website

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/examples/astro-detail.webp filter=lfs diff=lfs merge=lfs -text
+assets/examples/color-detail.webp filter=lfs diff=lfs merge=lfs -text
+assets/examples/micro-detail.webp filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,10 @@
 ---
-title: AI For Science
-emoji: 🔥
-colorFrom: blue
-colorTo: red
+title: AI for Science Collaboration
+colorFrom: green
+colorTo: indigo
 sdk: static
+app_file: index.html
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+IntelligenceLab AI for Science collaboration site: an open call for biology and materials science graduate students. Static site (`index.html`, `styles.css`, `app.js`, `live.js`, `terminal.js`, `assets/`).

app.js

@@ -0,0 +1,536 @@
+(() => {
+  'use strict';
+
+  // Every message from the interest form and email links goes to all of these addresses.
+  const CONTACT_EMAILS = ['zli12321@terpmail.umd.edu', 'zl22754@uga.edu'];
+  const CONTACT_TEXT = CONTACT_EMAILS.join(' and ');
+
+  const $ = (sel, root = document) => root.querySelector(sel);
+  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  const mailto = (subject, body) => {
+    const params = [`subject=${encodeURIComponent(subject)}`];
+    if (body) params.push(`body=${encodeURIComponent(body)}`);
+    return `mailto:${CONTACT_EMAILS.join(',')}?${params.join('&')}`;
+  };
+
+  function initContact() {
+    $$('[data-contact]').forEach((link) => {
+      link.href = mailto(link.dataset.subject || 'AI for Science collaboration');
+      if (link.hasAttribute('data-show-address')) link.textContent = CONTACT_TEXT;
+    });
+    $$('[data-year]').forEach((el) => {
+      el.textContent = String(new Date().getFullYear());
+    });
+  }
+
+  function initNav() {
+    const nav = $('.nav');
+    const onScroll = () => nav.classList.toggle('is-scrolled', window.scrollY > 8);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    const toggle = $('.nav-toggle');
+    const menu = $('#mobile-menu');
+    const setOpen = (open) => {
+      toggle.setAttribute('aria-expanded', String(open));
+      toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+      menu.hidden = !open;
+      document.body.classList.toggle('menu-open', open);
+    };
+    toggle.addEventListener('click', () => setOpen(toggle.getAttribute('aria-expanded') !== 'true'));
+    $$('a', menu).forEach((a) => a.addEventListener('click', () => setOpen(false)));
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    });
+    window.matchMedia('(min-width: 1101px)').addEventListener('change', (e) => {
+      if (e.matches) setOpen(false);
+    });
+
+    if (!('IntersectionObserver' in window)) return;
+    const links = new Map($$('.nav-links a').map((a) => [a.getAttribute('href').slice(1), a]));
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        links.forEach((a) => a.classList.remove('is-active'));
+        const active = links.get(entry.target.dataset.nav || entry.target.id);
+        if (active) active.classList.add('is-active');
+      });
+    }, { rootMargin: '-45% 0px -50% 0px' });
+    $$('main > section[id]').forEach((section) => observer.observe(section));
+  }
+
+  function initReveal() {
+    const items = $$('.reveal');
+    if (reduceMotion || !('IntersectionObserver' in window)) {
+      items.forEach((el) => el.classList.add('is-visible'));
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add('is-visible');
+        observer.unobserve(entry.target);
+      });
+    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.12 });
+    items.forEach((el) => observer.observe(el));
+  }
+
+  function initExplorer() {
+    const root = $('#explorer');
+    if (!root) return;
+    root.classList.add('is-enhanced');
+    const panels = $$('.explorer-panel', root);
+
+    panels.forEach((panel) => {
+      const stages = $$('.stage', panel);
+      if (!stages.length) return;
+      const tabs = document.createElement('div');
+      tabs.className = 'stage-tabs';
+      tabs.setAttribute('role', 'group');
+      tabs.setAttribute('aria-label', 'Project stages');
+      const buttons = stages.map((stage, i) => {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'stage-btn';
+        const num = document.createElement('span');
+        num.className = 'sb-num';
+        num.textContent = String(i + 1);
+        const name = document.createElement('span');
+        name.textContent = $('.stage-title', stage).textContent;
+        button.append(num, name);
+        return button;
+      });
+      const select = (index) => {
+        buttons.forEach((b, i) => b.setAttribute('aria-pressed', String(i === index)));
+        stages.forEach((s, i) => {
+          s.hidden = i !== index;
+        });
+      };
+      buttons.forEach((b, i) => b.addEventListener('click', () => select(i)));
+      tabs.append(...buttons);
+      panel.insertBefore(tabs, stages[0]);
+      select(0);
+    });
+
+    const toggles = $$('.ft-btn', root);
+    const setField = (field) => {
+      root.dataset.field = field;
+      toggles.forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.field === field)));
+      panels.forEach((p) => {
+        p.hidden = p.dataset.field !== field;
+      });
+    };
+    toggles.forEach((b) => b.addEventListener('click', () => setField(b.dataset.field)));
+    setField('bio');
+  }
+
+  function initExamples() {
+    const grid = $('#ex-grid');
+    const modal = $('#ex-modal');
+    const source = $('#examples-data');
+    if (!grid || !modal || !source) return;
+    let examples;
+    try {
+      examples = JSON.parse(source.textContent);
+    } catch (err) {
+      return;
+    }
+    const cards = $$('.ex-card', grid);
+
+    const more = $('#ex-more');
+    const extras = cards.filter((card) => card.classList.contains('is-extra'));
+    if (more) {
+      if (!extras.length) more.hidden = true;
+      more.textContent = `Show ${extras.length} more demos`;
+      more.addEventListener('click', () => {
+        grid.classList.add('show-all');
+        more.setAttribute('aria-expanded', 'true');
+        if (extras[0]) extras[0].focus({ preventScroll: true });
+      });
+    }
+
+    const sheet = $('.ex-sheet', modal);
+    const closeButton = $('.icon-btn[data-ex-close]', modal);
+    const field = (id) => document.getElementById(id);
+    const fields = {
+      domain: field('exm-domain'),
+      title: field('exm-title'),
+      tracks: field('exm-tracks'),
+      img: field('exm-img'),
+      desc: field('exm-desc'),
+      why: field('exm-why'),
+      software: field('exm-software'),
+      artifacts: field('exm-artifacts'),
+      axes: field('exm-axes'),
+      outputs: field('exm-outputs'),
+      cta: field('exm-cta'),
+      live: field('exm-live'),
+    };
+    let current = 0;
+    let lastFocus = null;
+    let liveView = null;
+
+    const mountLive = (ex) => {
+      if (liveView) {
+        liveView.dispose();
+        liveView = null;
+      }
+      const live = window.ILLive;
+      if (!fields.live || !live || !live.ready) {
+        if (fields.live) fields.live.hidden = true;
+        return;
+      }
+      fields.live.hidden = false;
+      fields.live.style.setProperty('--dc', ex.color);
+      liveView = live.mount(fields.live, ex.kind, { color: ex.color, hero: true });
+      if (!liveView) fields.live.hidden = true;
+    };
+
+    const listItems = (ul, items, cls) => {
+      ul.replaceChildren(...items.map((text) => {
+        const li = document.createElement('li');
+        li.textContent = text;
+        if (cls) li.className = cls;
+        return li;
+      }));
+    };
+
+    const render = (index) => {
+      current = (index + examples.length) % examples.length;
+      const ex = examples[current];
+      sheet.style.setProperty('--dc', ex.color);
+      fields.domain.textContent = ex.domain;
+      fields.title.textContent = ex.title;
+      listItems(fields.tracks, ex.tags, 'trk trk-rel');
+      fields.img.src = ex.img;
+      fields.img.alt = ex.alt;
+      fields.desc.textContent = ex.description;
+      const lead = document.createElement('strong');
+      lead.textContent = 'In your research: ';
+      fields.why.replaceChildren(lead, document.createTextNode(ex.why));
+      listItems(fields.software, ex.software);
+      listItems(fields.artifacts, ex.artifacts);
+      listItems(fields.axes, ex.axes);
+      listItems(fields.outputs, ex.outputs);
+      sheet.scrollTop = 0;
+      if (!modal.hidden) mountLive(ex);
+    };
+
+    const open = (index) => {
+      lastFocus = document.activeElement;
+      render(index);
+      modal.hidden = false;
+      mountLive(examples[current]);
+      document.body.classList.add('modal-open');
+      closeButton.focus();
+    };
+    const close = () => {
+      modal.hidden = true;
+      if (liveView) {
+        liveView.dispose();
+        liveView = null;
+      }
+      document.body.classList.remove('modal-open');
+      if (lastFocus) lastFocus.focus({ preventScroll: true });
+    };
+    document.addEventListener('il-live-ready', () => {
+      if (!modal.hidden) mountLive(examples[current]);
+    });
+
+    fields.cta.addEventListener('click', (e) => {
+      e.preventDefault();
+      const form = $('#join-form');
+      if (form) form.elements.namedItem('interest').value = examples[current].title;
+      close();
+      $('#join').scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth' });
+      const name = form && form.elements.namedItem('name');
+      if (name) setTimeout(() => name.focus({ preventScroll: true }), reduceMotion ? 0 : 600);
+    });
+
+    cards.forEach((card) => {
+      const index = Number(card.dataset.index);
+      card.addEventListener('click', () => open(index));
+      card.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          open(index);
+        }
+      });
+    });
+    $$('[data-ex-close]', modal).forEach((el) => el.addEventListener('click', close));
+    $('[data-ex-prev]', modal).addEventListener('click', () => render(current - 1));
+    $('[data-ex-next]', modal).addEventListener('click', () => render(current + 1));
+
+    document.addEventListener('keydown', (e) => {
+      if (modal.hidden) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        close();
+      } else if (e.key === 'ArrowRight') {
+        render(current + 1);
+      } else if (e.key === 'ArrowLeft') {
+        render(current - 1);
+      } else if (e.key === 'Tab') {
+        const focusables = $$('button, a[href]', sheet);
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    });
+  }
+
+  function initForm() {
+    const form = $('#join-form');
+    if (!form) return;
+    const note = $('#form-note');
+    const nameInput = form.elements.namedItem('name');
+    nameInput.addEventListener('input', () => nameInput.removeAttribute('aria-invalid'));
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const data = new FormData(form);
+      const value = (key) => String(data.get(key) || '').trim();
+      const name = value('name');
+      if (!name) {
+        nameInput.setAttribute('aria-invalid', 'true');
+        note.textContent = 'Please add your name so we know who to reply to.';
+        nameInput.focus();
+        return;
+      }
+      const field = value('field') || 'Not specified';
+      const lines = [
+        `Name: ${name}`,
+        `University & program: ${value('program') || '-'}`,
+        `Field: ${field}`,
+        `Research: ${value('topic') || '-'}`,
+        '',
+        'How I use AI in my research today:',
+        value('ai_use') || '-',
+        '',
+        'Where I would most like help:',
+        value('help') || '-',
+        '',
+        `How I'd like to take part: ${data.getAll('involve').join(', ') || 'Not sure yet'}`,
+      ];
+      if (value('interest')) lines.push(`Demo that caught my eye: ${value('interest')}`);
+
+      const link = document.createElement('a');
+      link.href = mailto(`AI for Science collaboration: ${name} (${field})`, lines.join('\r\n'));
+      link.hidden = true;
+      document.body.append(link);
+      link.click();
+      link.remove();
+      note.textContent = `Your email app should open with your message ready to send. If it doesn't, write to ${CONTACT_TEXT}.`;
+    });
+  }
+
+  function initMorph() {
+    const canvas = $('#morph');
+    if (!canvas || !canvas.getContext) return;
+    const ctx = canvas.getContext('2d');
+    const labels = $$('.morph-labels .ml');
+
+    // Rock-salt lattice: 5 x 5 x 5 sites, two alternating species.
+    const SPACING = 0.42;
+    const lattice = [];
+    for (let i = 0; i < 5; i += 1) {
+      for (let j = 0; j < 5; j += 1) {
+        for (let k = 0; k < 5; k += 1) {
+          lattice.push({ x: (i - 2) * SPACING, y: (j - 2) * SPACING, z: (k - 2) * SPACING, c: (i + j + k) % 2, r: 3.3 });
+        }
+      }
+    }
+    const latticeEdges = [];
+    for (let a = 0; a < lattice.length; a += 1) {
+      for (let b = a + 1; b < lattice.length; b += 1) {
+        const p = lattice[a];
+        const q = lattice[b];
+        const d = Math.abs(p.x - q.x) + Math.abs(p.y - q.y) + Math.abs(p.z - q.z);
+        if (Math.abs(d - SPACING) < 1e-6) latticeEdges.push([a, b]);
+      }
+    }
+
+    // Double helix: two backbones of 50 points plus 25 base pairs on the axis.
+    const PER_STRAND = 50;
+    const helix = [];
+    const helixEdges = [];
+    for (let s = 0; s < 2; s += 1) {
+      for (let i = 0; i < PER_STRAND; i += 1) {
+        const t = i / (PER_STRAND - 1);
+        const angle = t * 2.1 * Math.PI * 2 + s * Math.PI;
+        helix.push({ x: 0.6 * Math.cos(angle), y: (t - 0.5) * 2.1, z: 0.6 * Math.sin(angle), c: 2 + s, r: 3.4 });
+        if (i > 0) helixEdges.push([s * PER_STRAND + i - 1, s * PER_STRAND + i]);
+      }
+    }
+    for (let i = 0; i < PER_STRAND; i += 2) {
+      const a = helix[i];
+      const b = helix[PER_STRAND + i];
+      const mid = helix.length;
+      helix.push({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2, c: 4, r: 2.3 });
+      helixEdges.push([i, mid], [mid, PER_STRAND + i]);
+    }
+
+    // Pair points by height so the morph flows within horizontal bands.
+    const byHeight = (pts) => pts.map((_, i) => i).sort((a, b) =>
+      (pts[a].y - pts[b].y) || (Math.atan2(pts[a].z, pts[a].x) - Math.atan2(pts[b].z, pts[b].x)));
+    const orderA = byHeight(lattice);
+    const orderB = byHeight(helix);
+    const slotA = [];
+    const slotB = [];
+    orderA.forEach((orig, k) => { slotA[orig] = k; });
+    orderB.forEach((orig, k) => { slotB[orig] = k; });
+    const points = orderA.map((orig, k) => ({ a: lattice[orig], b: helix[orderB[k]] }));
+    const edgesA = latticeEdges.map(([p, q]) => [slotA[p], slotA[q]]);
+    const edgesB = helixEdges.map(([p, q]) => [slotB[p], slotB[q]]);
+
+    const RGB = [[15, 159, 117], [79, 70, 229], [15, 159, 117], [20, 184, 166], [245, 158, 11]];
+    const projected = points.map(() => ({ sx: 0, sy: 0, z: 0, p: 1 }));
+    const depthOrder = points.map((_, i) => i);
+    const smooth = (x) => x * x * (3 - 2 * x);
+    const morphAt = (ms) => {
+      const s = (ms / 1000) % 12;
+      if (s < 3.6) return 0;
+      if (s < 6) return smooth((s - 3.6) / 2.4);
+      if (s < 9.6) return 1;
+      return 1 - smooth((s - 9.6) / 2.4);
+    };
+
+    let w = 0;
+    let h = 0;
+    let dpr = 1;
+    let shown = -1;
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      dpr = Math.min(window.devicePixelRatio || 1, 2);
+      w = rect.width;
+      h = rect.height;
+      canvas.width = Math.max(1, Math.round(w * dpr));
+      canvas.height = Math.max(1, Math.round(h * dpr));
+    };
+
+    const draw = (now) => {
+      if (w < 8 || h < 8) return;
+      const m = reduceMotion ? 0 : morphAt(now);
+      const rot = reduceMotion ? 0.6 : now * 0.00022;
+      const tilt = 0.32;
+      const cosR = Math.cos(rot);
+      const sinR = Math.sin(rot);
+      const cosT = Math.cos(tilt);
+      const sinT = Math.sin(tilt);
+      const size = Math.min(w, h);
+      const scale = size * 0.34;
+      const cx = w / 2;
+      const cy = h * 0.47;
+      const camera = 3.6;
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+      for (let k = 0; k < points.length; k += 1) {
+        const { a, b } = points[k];
+        const x = a.x + (b.x - a.x) * m;
+        const y = a.y + (b.y - a.y) * m;
+        const z = a.z + (b.z - a.z) * m;
+        const x1 = x * cosR + z * sinR;
+        const z1 = -x * sinR + z * cosR;
+        const y2 = y * cosT - z1 * sinT;
+        const z2 = y * sinT + z1 * cosT;
+        const persp = camera / (camera - z2);
+        const pr = projected[k];
+        pr.sx = cx + x1 * scale * persp;
+        pr.sy = cy - y2 * scale * persp;
+        pr.z = z2;
+        pr.p = persp;
+      }
+
+      const drawEdges = (edges, alpha, rgb) => {
+        if (alpha < 0.02) return;
+        ctx.lineWidth = 1.2;
+        for (const [i, j] of edges) {
+          const p = projected[i];
+          const q = projected[j];
+          const depth = Math.min(1, Math.max(0, ((p.z + q.z) / 2 + 1.2) / 2.4));
+          ctx.strokeStyle = `rgba(${rgb}, ${(alpha * (0.1 + 0.4 * depth)).toFixed(3)})`;
+          ctx.beginPath();
+          ctx.moveTo(p.sx, p.sy);
+          ctx.lineTo(q.sx, q.sy);
+          ctx.stroke();
+        }
+      };
+      drawEdges(edgesA, 1 - m, '79, 70, 229');
+      drawEdges(edgesB, m, '15, 159, 117');
+
+      depthOrder.sort((i, j) => projected[i].z - projected[j].z);
+      const unit = size / 440;
+      for (const k of depthOrder) {
+        const pr = projected[k];
+        const { a, b } = points[k];
+        const ca = RGB[a.c];
+        const cb = RGB[b.c];
+        const depth = Math.min(1, Math.max(0, (pr.z + 1.2) / 2.4));
+        const radius = (a.r + (b.r - a.r) * m) * pr.p * unit;
+        ctx.fillStyle = `rgba(${Math.round(ca[0] + (cb[0] - ca[0]) * m)}, ${Math.round(ca[1] + (cb[1] - ca[1]) * m)}, ${Math.round(ca[2] + (cb[2] - ca[2]) * m)}, ${(0.42 + 0.58 * depth).toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(pr.sx, pr.sy, radius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      const shape = m >= 0.5 ? 1 : 0;
+      if (shape !== shown) {
+        shown = shape;
+        labels.forEach((label) => label.classList.toggle('is-on', Number(label.dataset.shape) === shape));
+      }
+    };
+
+    let raf = 0;
+    let inView = true;
+    const loop = (now) => {
+      draw(now);
+      raf = requestAnimationFrame(loop);
+    };
+    const start = () => {
+      if (!raf && inView && !document.hidden && !reduceMotion) raf = requestAnimationFrame(loop);
+    };
+    const stop = () => {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    };
+
+    resize();
+    draw(performance.now());
+    if ('ResizeObserver' in window) {
+      new ResizeObserver(() => {
+        resize();
+        if (!raf) draw(performance.now());
+      }).observe(canvas);
+    }
+    if (reduceMotion) return;
+    if ('IntersectionObserver' in window) {
+      new IntersectionObserver((entries) => {
+        inView = entries[0].isIntersecting;
+        if (inView) start();
+        else stop();
+      }).observe(canvas);
+    }
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) stop();
+      else start();
+    });
+    start();
+  }
+
+  initContact();
+  initNav();
+  initReveal();
+  initExplorer();
+  initExamples();
+  initForm();
+  initMorph();
+})();

index.html

@@ -1,19 +1,782 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>AI for Science Collaboration · IntelligenceLab</title>
+  <meta name="description" content="We're looking for biology and materials science graduate students to collaborate on AI for Science: tell us how you do research, help us test AI agents on real scientific workflows, and co-author the results.">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="AI for Science Collaboration · IntelligenceLab">
+  <meta property="og:description" content="Help us build AI agents that actually help biology and materials science research, and write the paper with us.">
+  <meta name="theme-color" content="#faf8f3">
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2310b981'/%3E%3Cstop offset='1' stop-color='%236366f1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M7 23h5v-5h5v-5h5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.6 9.4l2.2 2.2 4.2-4.4' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+  <script>document.documentElement.classList.add('js');</script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+
+  <header class="nav">
+    <div class="container nav-inner">
+      <a class="brand" href="#top" aria-label="IntelligenceLab AI for Science home">
+        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
+          <defs>
+            <linearGradient id="brand-grad" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0" stop-color="#10b981"/>
+              <stop offset="1" stop-color="#6366f1"/>
+            </linearGradient>
+          </defs>
+          <rect width="32" height="32" rx="8" fill="url(#brand-grad)"/>
+          <path d="M7 23h5v-5h5v-5h5" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M19.6 9.4l2.2 2.2 4.2-4.4" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span>IntelligenceLab <em>AI for Science</em></span>
+      </a>
+      <nav class="nav-links" aria-label="Primary">
+        <a href="#why">Why</a>
+        <a href="#your-research">Your research</a>
+        <a href="#examples">Demos</a>
+        <a href="#collaborate">How we work</a>
+        <a href="#papers">Papers</a>
+      </nav>
+      <div class="nav-cta">
+        <a class="btn btn-dark btn-sm" href="#join">Get involved</a>
+        <button class="nav-toggle" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
+          <span></span><span></span>
+        </button>
+      </div>
+    </div>
+    <div class="mobile-menu" id="mobile-menu" hidden>
+      <a href="#why">Why</a>
+      <a href="#your-research">Your research</a>
+      <a href="#examples">Demos</a>
+      <a href="#collaborate">How we work</a>
+      <a href="#papers">Papers</a>
+      <a class="btn btn-dark" href="#join">Get involved</a>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="hero" id="top" aria-labelledby="hero-title">
+      <div class="container hero-grid">
+        <div class="hero-copy">
+          <p class="eyebrow"><span class="pulse-dot" aria-hidden="true"></span>Open call · Biology &amp; materials science</p>
+          <h1 id="hero-title">Let's build AI that actually <em>helps your research</em>.</h1>
+          <p class="lede">We're AI researchers who teach language-model agents to use real scientific software. Now we want to learn from the people doing the science: how you work, where AI already helps, and where it falls short. If you're a graduate student in biology or materials science, come shape what we build and write the paper with us.</p>
+          <div class="hero-actions">
+            <a class="btn btn-dark" href="#join">Join the collaboration
+              <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11m-4-4 4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </a>
+            <a class="btn btn-ghost" href="#examples">See our demos</a>
+          </div>
+          <ul class="hero-points">
+            <li>No ML background needed</li>
+            <li>Your workflows, your expertise</li>
+            <li>Contributors can join the paper</li>
+          </ul>
+        </div>
+        <figure class="hero-visual" aria-hidden="true">
+          <canvas class="morph-canvas" id="morph"></canvas>
+          <figcaption class="morph-labels"><span class="ml is-on" data-shape="0">Crystal lattice</span><span class="ml" data-shape="1">DNA double helix</span></figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <section class="team-strip" aria-label="Who we are">
+      <div class="container">
+        <p class="team-title">Our team includes researchers from</p>
+        <ul class="team-list">
+          <li>University of Maryland</li>
+          <li>University of Georgia</li>
+          <li>National University of Singapore</li>
+          <li>Indiana University</li>
+          <li>The Hong Kong Polytechnic University</li>
+        </ul>
+        <p class="team-more">and collaborators at other universities</p>
+      </div>
+    </section>
+
+    <section class="section" id="why" aria-labelledby="why-title">
+      <div class="container why-grid">
+        <div class="why-copy reveal">
+          <p class="kicker">Why we need you</p>
+          <h2 id="why-title">Frontier AI agents still struggle with real science.</h2>
+          <p class="sub">We built a test from 100 tasks based on real scientific software and ran eight frontier models on it. The best one solved one task in five. Life-science tasks were solved once in 120 attempts.</p>
+          <p class="sub">Most training data for AI agents comes from software engineering, so the workflows scientists actually run are barely covered. Closing that gap takes people who know what a correct result looks like in their field.</p>
+        </div>
+        <div class="stat-stack reveal">
+          <div class="stat"><strong>20%</strong><span>Success rate of the best of eight frontier models on our held-out scientific-software test</span></div>
+          <div class="stat stat-warm"><strong>1 in 120</strong><span>Attempts that succeeded on life &amp; molecular science tasks, across all eight models</span></div>
+          <div class="stat stat-cool"><strong>98%</strong><span>Agreement between our automated checks and blinded human reviewers</span></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="who" data-nav="why" aria-labelledby="who-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Who we're looking for</p>
+          <h2 id="who-title">Graduate students in biology and materials science.</h2>
+          <p class="sub">Master's or PhD, wet lab or computational, any level of AI experience. If you script, simulate, image, or analyze data as part of your research, you have exactly the knowledge we're missing.</p>
+        </div>
+        <div class="field-grid">
+          <article class="field-card field-bio reveal">
+            <div class="field-icon" aria-hidden="true">
+              <svg viewBox="0 0 48 48"><path d="M16 6c0 12 16 12 16 24s-16 12-16 12M32 6c0 12-16 12-16 24s16 12 16 12" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/><path d="M18 12h12M19.5 19h9M19.5 29h9M18 36h12" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" opacity=".55"/></svg>
+            </div>
+            <h3>Biology</h3>
+            <p>Cell and molecular biology, genomics and bioinformatics, structural biology, neuroscience, microbiology, and ecology.</p>
+            <p class="tools-label">Tools you might use</p>
+            <ul class="tool-chips">
+              <li>Fiji / ImageJ</li><li>CellProfiler</li><li>Biopython</li><li>BLAST</li><li>Snakemake</li><li>R / Bioconductor</li><li>AlphaFold</li><li>PyMOL</li><li>GROMACS</li>
+            </ul>
+          </article>
+          <article class="field-card field-mat reveal">
+            <div class="field-icon" aria-hidden="true">
+              <svg viewBox="0 0 48 48"><path d="M10 16l14-8 14 8v16l-14 8-14-8z" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><path d="M10 16l14 8 14-8M24 24v16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" opacity=".55"/><g fill="currentColor"><circle cx="24" cy="8" r="3"/><circle cx="10" cy="16" r="3"/><circle cx="38" cy="16" r="3"/><circle cx="24" cy="24" r="3"/><circle cx="10" cy="32" r="3"/><circle cx="38" cy="32" r="3"/><circle cx="24" cy="40" r="3"/></g></svg>
+            </div>
+            <h3>Materials science</h3>
+            <p>Computational materials, characterization, polymers and soft matter, energy materials, and metals and ceramics.</p>
+            <p class="tools-label">Tools you might use</p>
+            <ul class="tool-chips">
+              <li>VASP</li><li>Quantum ESPRESSO</li><li>LAMMPS</li><li>ASE</li><li>pymatgen</li><li>Materials Project</li><li>GSAS-II</li><li>OVITO</li><li>COMSOL</li>
+            </ul>
+          </article>
+        </div>
+        <p class="who-note reveal">Working in a neighboring field, like chemistry, biophysics, or chemical engineering? We'd still love to hear from you.</p>
+      </div>
+    </section>
+
+    <section class="section" id="your-research" aria-labelledby="yr-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Let's talk about your research</p>
+          <h2 id="yr-title">Where does AI help you today, and where does it fall short?</h2>
+          <p class="sub">We want to understand research from the inside: what fills your week, which steps AI already speeds up, and which ones it gets wrong. Here is our starting picture of a typical project. Help us correct it.</p>
+        </div>
+        <div class="explorer reveal" id="explorer">
+          <div class="explorer-top">
+            <div class="field-toggle" role="group" aria-label="Choose a field">
+              <button type="button" class="ft-btn" data-field="bio" aria-pressed="true">Biology</button>
+              <button type="button" class="ft-btn" data-field="mat" aria-pressed="false">Materials science</button>
+            </div>
+            <p class="explorer-hint">Pick a stage of a typical project.</p>
+          </div>
+
+          <div class="explorer-panel" data-field="bio">
+            <h3 class="panel-title">Biology</h3>
+            <article class="stage">
+              <h4 class="stage-title">Reading &amp; planning</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Keeping up with papers and preprints, comparing protocols, and planning the next experiment.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Confident summaries with missing or invented citations, and little sense of which protocol details actually matter.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Tasks that check an agent's answers against the papers and protocols you rely on.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Designing experiments</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Designing primers, guide RNAs, constructs, and controls, often across several separate tools.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Chaining specialized tools together and respecting organism- and lab-specific constraints.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Design tasks scored by the same tools and rules you use to sanity-check a design.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Processing data</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Sequencing pipelines, microscopy segmentation, and flow-cytometry or plate-reader data.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Installing tools, wiring up multi-step pipelines, and catching silent errors in the output.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Pipelines rebuilt from your real runs, with checks on the numbers, not just on whether files exist.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Analysis &amp; modeling</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Statistics, structure prediction, docking, and molecular dynamics.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Choosing sensible methods and parameters, and noticing when a result is biologically implausible.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Analyses checked on hidden test cases, so an agent has to get the method right, not just the format.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Figures &amp; writing</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Figures, methods sections, and notebooks that others can rerun.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Methods text that drifts from what the code actually did.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Tasks where every figure and methods detail has to match the analysis that produced it.</dd></div>
+              </dl>
+            </article>
+          </div>
+
+          <div class="explorer-panel" data-field="mat">
+            <h3 class="panel-title">Materials science</h3>
+            <article class="stage">
+              <h4 class="stage-title">Reading &amp; planning</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Finding synthesis routes, processing conditions, and property data scattered across many papers.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Pulling values out of tables and figures without mixing up units, samples, or conditions.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Extraction tasks checked against values curated by people who know the field.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Setting up simulations</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Building DFT or molecular-dynamics inputs, running convergence tests, and writing cluster job scripts.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Physically sensible parameters, pseudopotential and force-field choices, and the quirks of each cluster.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Simulation tasks checked by rerunning the real codes on inputs the agent never saw.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Characterization</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Processing XRD patterns, electron-microscopy images, and spectra.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Peak fits and refinements that look reasonable but aren't physically right.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Characterization pipelines rebuilt from real instrument data, with checks that respect measurement tolerances.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Screening &amp; data</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Querying materials databases, featurizing structures, and screening candidates.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Keeping structures, compositions, and units consistent from one tool to the next.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Screening workflows checked against reference results from the codes you trust.</dd></div>
+              </dl>
+            </article>
+            <article class="stage">
+              <h4 class="stage-title">Figures &amp; writing</h4>
+              <dl class="stage-grid">
+                <div class="sg sg-work"><dt>What it looks like</dt><dd>Phase diagrams, band structures, and methods that others can reproduce.</dd></div>
+                <div class="sg sg-gap"><dt>Where AI falls short</dt><dd>Plots and text that drift from the underlying calculations.</dd></div>
+                <div class="sg sg-build"><dt>What we'd build together</dt><dd>Tasks where every figure traces back to a verified calculation.</dd></div>
+              </dl>
+            </article>
+          </div>
+        </div>
+
+        <div class="questions reveal">
+          <div class="questions-head">
+            <h3>Questions we'd love to ask you</h3>
+            <p>No preparation needed. These are the kinds of things we'd talk about in a first conversation.</p>
+          </div>
+          <ol class="question-list">
+            <li>Which part of your week feels most like busywork?</li>
+            <li>Where do you already use AI, and where have you stopped trusting it?</li>
+            <li>What software, instruments, or pipelines does your work depend on?</li>
+            <li>How do you check that a result is right before you believe it?</li>
+            <li>Which task would you hand to a reliable assistant tomorrow?</li>
+            <li>What would an AI agent need to show before you'd publish its result?</li>
+          </ol>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="examples" aria-labelledby="ex-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Demos from our previous work</p>
+          <h2 id="ex-title">Agents working with real scientific software.</h2>
+          <p class="sub">Each demo is a task from our research. An agent sees a few real runs of a scientific tool and writes a program that reproduces it. We then run that program on settings it has never seen and check every output against the real software.</p>
+        </div>
+        <div class="ex-grid" id="ex-grid">
+<!--DEMO_CARDS:START-->
+          <article class="ex-card reveal" data-index="0" data-kind="micro" tabindex="0" role="button" aria-label="Open demo: Microscopy cell segmentation and counting" style="--dc:#16a34a">
+            <div class="ex-thumb"><img src="assets/examples/micro-thumb.webp" alt="Microscopy label masks from public runs" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Life &amp; Molecular Sciences</p>
+              <h3>Microscopy cell segmentation and counting</h3>
+              <p>The same steps as counting nuclei or measuring cell shape in your own fluorescence images.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Biology</li><li class="trk trk-rel">Microscopy</li></ul>
+              <ul class="ex-sw"><li>CellProfiler</li><li>scikit-image</li><li>Bio-Formats</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal" data-index="1" data-kind="foam" tabindex="0" role="button" aria-label="Open demo: OpenFOAM 2-D dam-break CFD" style="--dc:#0891b2">
+            <div class="ex-thumb"><img src="assets/examples/foam-thumb.webp" alt="OpenFOAM dam-break mesh drawn from the public polyMesh" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Physical &amp; Engineering Simulation</p>
+              <h3>OpenFOAM 2-D dam-break CFD</h3>
+              <p>Meshing, boundary conditions, and solver settings: the setup behind any flow or transport simulation.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Simulation</li><li class="trk trk-rel">Fluid dynamics</li></ul>
+              <ul class="ex-sw"><li>OpenFOAM</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal" data-index="2" data-kind="stl" tabindex="0" role="button" aria-label="Open demo: OpenSCAD / BOSL2 parametric fan duct" style="--dc:#7c3aed">
+            <div class="ex-thumb"><img src="assets/examples/stl-thumb.webp" alt="Rendered fan-duct mesh from a public OpenSCAD run" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Spatial, Visual &amp; 3D</p>
+              <h3>OpenSCAD / BOSL2 parametric fan duct</h3>
+              <p>Parametric CAD for 3D-printed sample holders, fixtures, and flow cells.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Lab hardware</li><li class="trk trk-rel">CAD</li></ul>
+              <ul class="ex-sw"><li>OpenSCAD</li><li>BOSL2</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal" data-index="3" data-kind="astro" tabindex="0" role="button" aria-label="Open demo: Astronomy FITS/WCS cutout and photometry" style="--dc:#db2777">
+            <div class="ex-thumb"><img src="assets/examples/astro-thumb.webp" alt="Astronomy FITS cutouts from public runs" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Earth &amp; Space Sciences</p>
+              <h3>Astronomy FITS/WCS cutout and photometry</h3>
+              <p>Aperture photometry and background subtraction, the same math as quantifying spots or bands in noisy images.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Imaging</li><li class="trk trk-rel">Signal extraction</li></ul>
+              <ul class="ex-sw"><li>Astropy</li><li>Photutils</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal" data-index="4" data-kind="color" tabindex="0" role="button" aria-label="Open demo: Color-space and tone-curve pipeline" style="--dc:#7c3aed">
+            <div class="ex-thumb"><img src="assets/examples/color-thumb.webp" alt="Color-pipeline previews from public runs" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Spatial, Visual &amp; 3D</p>
+              <h3>Color-space and tone-curve pipeline</h3>
+              <p>The color-space math behind calibrated imaging, colorimetric assays, and optical characterization.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Imaging</li><li class="trk trk-rel">Optics</li></ul>
+              <ul class="ex-sw"><li>colour-science</li><li>ImageMagick</li><li>scikit-image</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal" data-index="5" data-kind="ocr" tabindex="0" role="button" aria-label="Open demo: Tesseract table-image OCR" style="--dc:#d97706">
+            <div class="ex-thumb"><img src="assets/examples/ocr-thumb.webp" alt="OCR page preview from a public run" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Data &amp; Document Workflows</p>
+              <h3>Tesseract table-image OCR</h3>
+              <p>Reading numbers out of scanned tables, the first step in mining property data from papers.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Literature</li><li class="trk trk-rel">Data extraction</li></ul>
+              <ul class="ex-sw"><li>Pandoc</li><li>Poppler</li><li>Tesseract</li><li>QPDF</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal is-extra" data-index="6" data-kind="robot" tabindex="0" role="button" aria-label="Open demo: MuJoCo / URDF mass-inertia repair" style="--dc:#0891b2">
+            <div class="ex-thumb"><img src="assets/examples/robot-thumb.webp" alt="MuJoCo joint-position trajectories across public scenarios" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Physical &amp; Engineering Simulation</p>
+              <h3>MuJoCo / URDF mass-inertia repair</h3>
+              <p>Physical models with masses, inertias, and joint limits, as used to simulate lab robots before running them.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Lab automation</li><li class="trk trk-rel">Physics</li></ul>
+              <ul class="ex-sw"><li>MuJoCo</li><li>URDF/MJCF tooling</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal is-extra" data-index="7" data-kind="blender" tabindex="0" role="button" aria-label="Open demo: Blender cloth flag scene" style="--dc:#7c3aed">
+            <div class="ex-thumb"><img src="assets/examples/blender-thumb.webp" alt="Blender cloth scene rotation dial across public scenarios" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Spatial, Visual &amp; 3D</p>
+              <h3>Blender cloth flag scene</h3>
+              <p>A physics simulation whose outcome shifts with wind, constraints, and resolution.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Simulation</li><li class="trk trk-rel">Physics</li></ul>
+              <ul class="ex-sw"><li>Blender</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal is-extra" data-index="8" data-kind="drc" tabindex="0" role="button" aria-label="Open demo: KiCad LED-matrix driver PCB" style="--dc:#7c3aed">
+            <div class="ex-thumb"><img src="assets/examples/drc-thumb.webp" alt="KiCad board with design-rule findings plotted at their positions" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Spatial, Visual &amp; 3D</p>
+              <h3>KiCad LED-matrix driver PCB</h3>
+              <p>Design-rule checks on circuit boards, like the custom electronics inside lab instruments.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Instrumentation</li><li class="trk trk-rel">Electronics</li></ul>
+              <ul class="ex-sw"><li>KiCad</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+          <article class="ex-card reveal is-extra" data-index="9" data-kind="container" tabindex="0" role="button" aria-label="Open demo: Container SBOM and supply-chain attestation" style="--dc:#2563eb">
+            <div class="ex-thumb"><img src="assets/examples/container-thumb.webp" alt="Container image layers and attestation from a public run" width="740" height="394" loading="lazy"></div>
+            <div class="ex-card-body">
+              <p class="ex-card-domain">Software &amp; Formal Systems</p>
+              <h3>Container SBOM and supply-chain attestation</h3>
+              <p>Recording exactly which software went into an environment, the backbone of reproducible analysis.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-rel">Reproducibility</li><li class="trk trk-rel">Software</li></ul>
+              <ul class="ex-sw"><li>Hadolint</li><li>Syft</li><li>Skopeo</li></ul>
+            </div>
+            <span class="ex-open" aria-hidden="true">Explore ↗</span>
+          </article>
+<!--DEMO_CARDS:END-->
+        </div>
+        <div class="ex-more">
+          <button class="btn btn-ghost" id="ex-more" type="button" aria-expanded="false">Show more demos</button>
+        </div>
+
+        <div class="chores">
+          <div class="chores-head reveal">
+            <h3>Everyday research computing, too</h3>
+            <p>Plenty of research time goes to installing tools, managing data, and fixing broken environments. Our agents practice that as well. Each replay shows commands from the task's own reference solution.</p>
+          </div>
+          <div class="tx-grid" id="tx-grid">
+<!--TERMINAL_CARDS:START-->
+            <article class="tx-card reveal" data-index="0" tabindex="0" role="button" aria-label="Open task: Install an HPC scheduler&#x27;s Python bindings, verified">
+              <div class="tx-term" aria-hidden="true">
+                <div class="tx-bar"><i></i><i></i><i></i><em>fluxrm/flux-core:focal-v0.48.0</em></div>
+                <pre class="tx-screen"><code><span class="tx-cmd"><b>$</b> ACTUAL_HASH=$(sha256sum &quot;$TARBALL&quot; | awk &#x27;{print $1}&#x27;)</span><span class="tx-cmd"><b>$</b> pip install --no-compile &quot;$TARBALL&quot;</span><span class="tx-cmd"><b>$</b> find &quot;$FLUX_ROOT&quot; -type f ! -name &#x27;*.pyc&#x27; -exec sha256sum {} \; | sort -k2 &gt; &quot;$INSTALLED_MANIFEST&quot;</span><span class="tx-cmd"><b>$</b> cp &quot;$INSTALLED_MANIFEST&quot; &quot;$EXPECTED_MANIFEST&quot;</span><span class="tx-cmd"><b>$</b> flux start --test-size=4 bash -c &#x27;…&#x27;</span></code></pre>
+              </div>
+              <div class="tx-body">
+                <p class="tx-area">HPC &amp; clusters</p>
+                <h3>Install an HPC scheduler&#x27;s Python bindings, verified</h3>
+                <p>Install the Flux Python package from the tarball at /app/flux-python-0.48.0rc6.tar.gz after verifying its integrity against the provided checksum file.</p>
+                <ul class="tx-meta"><li>171-line reference solution</li><li>Checked in a fresh sandbox</li></ul>
+              </div>
+              <span class="ex-open" aria-hidden="true">Explore ↗</span>
+            </article>
+            <article class="tx-card reveal" data-index="1" tabindex="0" role="button" aria-label="Open task: Version a dataset with DVC and reconcile its history">
+              <div class="tx-term" aria-hidden="true">
+                <div class="tx-bar"><i></i><i></i><i></i><em>ubuntu:22.04</em></div>
+                <pre class="tx-screen"><code><span class="tx-cmd"><b>$</b> dvc add dataset/foo</span><span class="tx-cmd"><b>$</b> dvc add dataset/test/0</span><span class="tx-cmd"><b>$</b> git add dataset/foo.dvc dataset/test/0.dvc</span><span class="tx-cmd"><b>$</b> git commit -m &quot;DVC track dataset items&quot;</span><span class="tx-cmd"><b>$</b> git diff &quot;${PARENT}..${ADD_COMMIT}&quot; -- &quot;$dvc_file&quot; &gt; &quot;$patch_path&quot;</span></code></pre>
+              </div>
+              <div class="tx-body">
+                <p class="tx-area">Research data management</p>
+                <h3>Version a dataset with DVC and reconcile its history</h3>
+                <p>Set up a DVC-tracked dataset under /app/dataset/ with two items: dataset/foo and dataset/test/0.</p>
+                <ul class="tx-meta"><li>313-line reference solution</li><li>Checked in a fresh sandbox</li></ul>
+              </div>
+              <span class="ex-open" aria-hidden="true">Explore ↗</span>
+            </article>
+            <article class="tx-card reveal" data-index="2" tabindex="0" role="button" aria-label="Open task: Diagnose and fix a Python dependency bug">
+              <div class="tx-term" aria-hidden="true">
+                <div class="tx-bar"><i></i><i></i><i></i><em>python:3.11-slim</em></div>
+                <pre class="tx-screen"><code><span class="tx-cmd"><b>$</b> python /app/bug.py &gt; /app/result.txt</span><span class="tx-cmd"><b>$</b> /app/validate_output.py /app/result.txt &gt; /app/validation_stdout.txt 2&gt; /app/validation_stderr.txt</span><span class="tx-cmd"><b>$</b> pip install &quot;environs==${REQUIRED_VERSION}&quot; &#x27;marshmallow&lt;4.0.0&#x27;</span><span class="tx-cmd"><b>$</b> python /app/bug.py &gt; /app/fixed.txt</span></code></pre>
+              </div>
+              <div class="tx-body">
+                <p class="tx-area">Python environments</p>
+                <h3>Diagnose and fix a Python dependency bug</h3>
+                <p>In /app, diagnose and fix the environs URL parsing bug.</p>
+                <ul class="tx-meta"><li>202-line reference solution</li><li>Checked in a fresh sandbox</li></ul>
+              </div>
+              <span class="ex-open" aria-hidden="true">Explore ↗</span>
+            </article>
+<!--TERMINAL_CARDS:END-->
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="collaborate" aria-labelledby="collab-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">How we'd work together</p>
+          <h2 id="collab-title">From one conversation to a shared paper.</h2>
+          <p class="sub">Start small and go as far as you like. Every step helps, and you decide how involved you want to be.</p>
+        </div>
+        <ol class="steps">
+          <li class="step reveal"><span class="step-num">1</span><h3>Talk</h3><p>An informal conversation about your research, your tools, and where AI helps or gets in the way.</p></li>
+          <li class="step reveal"><span class="step-num">2</span><h3>Pick a workflow</h3><p>Together we choose a real piece of your work: an analysis script, a simulation setup, or a data pipeline.</p></li>
+          <li class="step reveal"><span class="step-num">3</span><h3>Turn it into a test</h3><p>We package it as a task an agent can attempt, with checks you agree are scientifically right.</p></li>
+          <li class="step reveal"><span class="step-num">4</span><h3>Improve and publish</h3><p>We measure today's agents, train better ones, and write up what we learn together.</p></li>
+        </ol>
+        <div class="collab-grid">
+          <div class="give-card reveal">
+            <h3>What you'd bring</h3>
+            <ul class="check-list">
+              <li>How research in your field actually gets done</li>
+              <li>Real workflows: scripts, simulations, and pipelines</li>
+              <li>Judgment about what counts as a correct result</li>
+              <li>Feedback on what agents get right and wrong</li>
+            </ul>
+          </div>
+          <div class="give-card give-card-accent reveal">
+            <h3>What you'd get</h3>
+            <ul class="check-list">
+              <li>Co-authorship on the resulting paper for substantial contributions</li>
+              <li>A first look at how today's AI agents handle your own workflows</li>
+              <li>A packaged, tested version of the workflow you contributed</li>
+              <li>Hands-on experience with how AI agents are trained and evaluated</li>
+            </ul>
+          </div>
+        </div>
+        <div class="ways reveal">
+          <h3>Ways to take part</h3>
+          <div class="ways-grid">
+            <div class="way"><span class="way-tag">One conversation</span><p>Tell us how you work and where AI lets you down.</p></div>
+            <div class="way"><span class="way-tag">Contribute a workflow</span><p>Help turn a piece of your research into a task with real checks.</p></div>
+            <div class="way"><span class="way-tag">Co-author</span><p>Join the analysis and the writing of the paper.</p></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="papers" aria-labelledby="papers-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Our research so far</p>
+          <h2 id="papers-title">Results from our recent papers.</h2>
+          <p class="sub">The demos above come from this work. Each paper tackles one part of the problem: building tasks that check results reliably, making tasks harder over time, and turning an agent's successes into better training data.</p>
+        </div>
+        <div class="paper-list">
+          <article class="paper reveal">
+            <div class="paper-main">
+              <p class="paper-meta"><span class="paper-tag">Scientific software</span>arXiv · October 2026</p>
+              <h3><a href="https://arxiv.org/abs/2610.02710" target="_blank" rel="noopener">Self-Supervised Scaling of Terminal Environments for Scientific Domains</a></h3>
+              <p class="paper-authors">Zhongzhi Li, Yucheng Shi, Zongxia Li, et al.</p>
+              <p class="paper-summary">Builds agent tasks directly from existing scientific software. The agent sees a few real runs and must reproduce the workflow, and hidden runs check the result. The tasks span six domains, including life and molecular sciences, physical and engineering simulation, and earth and space sciences.</p>
+              <p class="paper-you"><strong>Why it matters to you:</strong> this is how we'd turn your workflows into tasks.</p>
+              <div class="paper-links"><a class="btn btn-ghost btn-sm" href="https://arxiv.org/abs/2610.02710" target="_blank" rel="noopener">Read the paper</a></div>
+            </div>
+            <div class="paper-results">
+              <h4>Key results</h4>
+              <div class="res">
+                <p class="res-label">Fine-tuning on these tasks, Terminal-Bench 2</p>
+                <div class="rb rb-base" style="--v:47.9"><i></i><span>Before 47.9%</span></div>
+                <div class="rb rb-ours" style="--v:53.6"><i></i><span>After 53.6%</span></div>
+              </div>
+              <div class="res">
+                <p class="res-label">Long-horizon terminal tasks</p>
+                <div class="rb rb-base" style="--v:20.7"><i></i><span>Before 20.7%</span></div>
+                <div class="rb rb-ours" style="--v:27.7"><i></i><span>After 27.7%</span></div>
+              </div>
+              <div class="res">
+                <p class="res-label">Automated checks agree with blinded human reviewers</p>
+                <div class="rb rb-ours" style="--v:98"><i></i><span>98%</span></div>
+              </div>
+            </div>
+          </article>
+
+          <article class="paper reveal">
+            <div class="paper-main">
+              <p class="paper-meta"><span class="paper-tag">Harder tasks</span>arXiv · August 2026</p>
+              <h3><a href="https://arxiv.org/abs/2608.05466" target="_blank" rel="noopener">Recursive Synthesis for Long-Horizon Terminal Tasks</a></h3>
+              <p class="paper-authors">Zhongzhi Li, Yucheng Shi, Zongxia Li, et al.</p>
+              <p class="paper-summary">Grows simple, verified tasks into long, multi-step ones, round after round. Every new task is checked in a fresh sandbox before it is kept, at roughly $0.05 per task.</p>
+              <p class="paper-you"><strong>Why it matters to you:</strong> agents learn to finish whole projects, not just single commands.</p>
+              <div class="paper-links"><a class="btn btn-ghost btn-sm" href="https://arxiv.org/abs/2608.05466" target="_blank" rel="noopener">Read the paper</a></div>
+            </div>
+            <div class="paper-results">
+              <h4>Key results</h4>
+              <div class="res">
+                <p class="res-label">Same strong model, tasks from round 1 vs. round 15</p>
+                <div class="rb rb-base" style="--v:90"><i></i><span>Round 1 solved 90%</span></div>
+                <div class="rb rb-warm" style="--v:2.5"><i></i><span>Round 15 solved 2.5%</span></div>
+              </div>
+              <div class="res">
+                <p class="res-label">Median reference solution length</p>
+                <div class="rb rb-base" style="--v:17.9"><i></i><span>67 lines</span></div>
+                <div class="rb rb-ours" style="--v:100"><i></i><span>374 lines</span></div>
+              </div>
+              <div class="res">
+                <p class="res-label">Reinforcement learning on these tasks, Terminal-Bench Hard</p>
+                <div class="rb rb-base" style="--v:22.7"><i></i><span>Before 22.7%</span></div>
+                <div class="rb rb-ours" style="--v:32"><i></i><span>After 32.0% (+41% relative)</span></div>
+              </div>
+            </div>
+          </article>
+
+          <article class="paper reveal">
+            <div class="paper-main">
+              <p class="paper-meta"><span class="paper-tag">Better training data</span>arXiv · October 2026</p>
+              <h3><a href="https://arxiv.org/abs/2610.02826" target="_blank" rel="noopener">Scaling Trajectories for Complex Tasks through Recursive Self-Rewrite</a></h3>
+              <p class="paper-authors">Zongxia Li, Yucheng Shi, Zhongzhi Li, et al.</p>
+              <p class="paper-summary">Collects an agent's successful solutions from several different setups, then rewrites them into one consistent style the model can learn from. The rewritten data teaches the model far more than the raw successes do.</p>
+              <p class="paper-you"><strong>Why it matters to you:</strong> one good solution to your task can become many training examples.</p>
+              <div class="paper-links">
+                <a class="btn btn-ghost btn-sm" href="https://arxiv.org/abs/2610.02826" target="_blank" rel="noopener">Read the paper</a>
+                <a class="btn btn-ghost btn-sm" href="https://huggingface.co/IntelligenceLab/RSR-27B" target="_blank" rel="noopener">Model on Hugging Face</a>
+              </div>
+            </div>
+            <div class="paper-results">
+              <h4>Key results</h4>
+              <div class="res">
+                <p class="res-label">Terminal-Bench 2, solved within three tries</p>
+                <div class="rb rb-base" style="--v:57"><i></i><span>Before 57.0%</span></div>
+                <div class="rb rb-ours" style="--v:74.2"><i></i><span>After 74.2%</span></div>
+              </div>
+              <div class="res">
+                <p class="res-label">Terminal-Bench Hard, solved within three tries</p>
+                <div class="rb rb-base" style="--v:39"><i></i><span>Before 39.0%</span></div>
+                <div class="rb rb-ours" style="--v:63"><i></i><span>After 63.0%</span></div>
+              </div>
+              <div class="res">
+                <p class="res-label">Terminal-Bench 4, solved within three tries</p>
+                <div class="rb rb-base" style="--v:1.5"><i></i><span>Before 1.5%</span></div>
+                <div class="rb rb-ours" style="--v:9.1"><i></i><span>After 9.1%</span></div>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="faq" aria-labelledby="faq-title">
+      <div class="container faq-grid">
+        <div class="faq-head reveal">
+          <p class="kicker">Questions</p>
+          <h2 id="faq-title">Before you write to us.</h2>
+          <p class="sub">Anything else? Ask us directly. We're happy to talk it through.</p>
+        </div>
+        <div class="faq-list reveal">
+          <details open>
+            <summary>Who are you?</summary>
+            <p>AI researchers from the University of Maryland, the University of Georgia, the National University of Singapore, Indiana University, The Hong Kong Polytechnic University, and other universities. We build and train AI agents that work with real software, and we publish our results on arXiv.</p>
+          </details>
+          <details>
+            <summary>Do I need machine-learning experience?</summary>
+            <p>No. We bring the AI side. What we need is your knowledge of how the science is done and how you know a result is right.</p>
+          </details>
+          <details>
+            <summary>How much time does it take?</summary>
+            <p>It's up to you. A single conversation already helps us. Contributing a workflow takes more time, and we'll plan it around your schedule.</p>
+          </details>
+          <details>
+            <summary>Do I have to share unpublished data?</summary>
+            <p>No. Tasks can be built from open-source software with public or synthetic inputs. We'll agree together on anything that goes into a paper.</p>
+          </details>
+          <details>
+            <summary>Can I be an author on the paper?</summary>
+            <p>Yes. Collaborators who contribute workflows, tasks, or analysis can be co-authors on the resulting paper, following standard authorship norms.</p>
+          </details>
+          <details>
+            <summary>Who can join?</summary>
+            <p>Graduate students, Master's or PhD, in biology, materials science, and related fields. Not sure you fit? Write to us anyway.</p>
+          </details>
+        </div>
+      </div>
+    </section>
+
+    <section class="section join" id="join" aria-labelledby="join-title">
+      <div class="container join-grid">
+        <div class="join-copy reveal">
+          <p class="kicker">Get involved</p>
+          <h2 id="join-title">Tell us about your research.</h2>
+          <p class="sub">A few lines is plenty, and we'll reply to set up a conversation. Sending opens your email app with your answers filled in, so nothing is stored on this site.</p>
+          <p class="join-alt">Prefer plain email? Write to <a class="mail-link" data-contact data-show-address data-subject="AI for Science collaboration" href="mailto:zli12321@terpmail.umd.edu,zl22754@uga.edu">zli12321@terpmail.umd.edu and zl22754@uga.edu</a>.</p>
+        </div>
+        <form class="join-form reveal" id="join-form" novalidate>
+          <div class="row2">
+            <label>Name<input name="name" autocomplete="name" required></label>
+            <label>University &amp; program<input name="program" placeholder="e.g. PhD, Materials Science"></label>
+          </div>
+          <fieldset class="pill-set">
+            <legend>Field</legend>
+            <div class="pills">
+              <label><input type="radio" name="field" value="Biology" checked><span>Biology</span></label>
+              <label><input type="radio" name="field" value="Materials science"><span>Materials science</span></label>
+              <label><input type="radio" name="field" value="Other"><span>Something else</span></label>
+            </div>
+          </fieldset>
+          <label>Your research in a sentence<input name="topic" placeholder="e.g. segmenting neurons in light-sheet images"></label>
+          <label>How do you use AI in your research today?<textarea name="ai_use" rows="3" placeholder="Writing code, reading papers, structure prediction, nothing yet…"></textarea></label>
+          <label>Which part of your work would you most like help with?<textarea name="help" rows="3" placeholder="The step that takes the longest or breaks most often"></textarea></label>
+          <fieldset class="pill-set">
+            <legend>How would you like to take part?</legend>
+            <div class="pills">
+              <label><input type="checkbox" name="involve" value="A conversation" checked><span>A conversation</span></label>
+              <label><input type="checkbox" name="involve" value="Contribute a workflow"><span>Contribute a workflow</span></label>
+              <label><input type="checkbox" name="involve" value="Co-author the paper"><span>Co-author the paper</span></label>
+            </div>
+          </fieldset>
+          <input type="hidden" name="interest" value="">
+          <div class="form-actions">
+            <button class="btn btn-dark" type="submit">Send to the team
+              <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11m-4-4 4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <p class="form-note" id="form-note" aria-live="polite"></p>
+          </div>
+        </form>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="container footer-inner">
+      <a class="brand" href="#top" aria-label="Back to top">
+        <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
+          <rect width="32" height="32" rx="8" fill="url(#brand-grad)"/>
+          <path d="M7 23h5v-5h5v-5h5" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M19.6 9.4l2.2 2.2 4.2-4.4" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span>IntelligenceLab <em>AI for Science</em></span>
+      </a>
+      <nav class="footer-links" aria-label="Footer">
+        <a href="#your-research">Your research</a>
+        <a href="#examples">Demos</a>
+        <a href="#papers">Papers</a>
+        <a href="#join">Get involved</a>
+      </nav>
+      <p class="footer-note">© <span data-year>2026</span> IntelligenceLab. Software names belong to their respective projects.</p>
+    </div>
+  </footer>
+
+  <div class="ex-modal" id="ex-modal" hidden>
+    <div class="ex-backdrop" data-ex-close></div>
+    <div class="ex-sheet" role="dialog" aria-modal="true" aria-labelledby="exm-title">
+      <header class="ex-head">
+        <div>
+          <p class="ex-domain" id="exm-domain"></p>
+          <h3 id="exm-title"></h3>
+          <ul class="ex-tracks" id="exm-tracks"></ul>
+        </div>
+        <div class="ex-nav">
+          <button class="icon-btn" type="button" data-ex-prev aria-label="Previous demo">←</button>
+          <button class="icon-btn" type="button" data-ex-next aria-label="Next demo">→</button>
+          <button class="icon-btn" type="button" data-ex-close aria-label="Close">✕</button>
+        </div>
+      </header>
+      <div class="ex-body">
+        <figure class="ex-figure">
+          <div class="ex-live-hero" id="exm-live" aria-hidden="true" hidden></div>
+          <figcaption class="ex-evidence-label">Evidence from the task's public runs</figcaption>
+          <img id="exm-img" alt="" width="1600" height="939">
+        </figure>
+        <p class="ex-desc" id="exm-desc"></p>
+        <p class="ex-why" id="exm-why"></p>
+        <div class="ex-facts">
+          <div><h4>Software</h4><ul id="exm-software"></ul></div>
+          <div><h4>What the agent sees</h4><ul id="exm-artifacts"></ul></div>
+          <div><h4>What we vary</h4><ul id="exm-axes"></ul></div>
+          <div><h4>What gets checked</h4><ul id="exm-outputs"></ul></div>
+        </div>
+        <p class="ex-how">The agent sees public runs of the real software and writes a program that reproduces it. That program is then run on hidden settings of these parameters and must match the software's outputs, field by field.</p>
+        <a class="btn btn-dark" id="exm-cta" href="#join">Work with tools like these? Let's talk
+          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11m-4-4 4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="ex-modal" id="tx-modal" data-subject="AI for Science, research computing" hidden>
+    <div class="ex-backdrop" data-tx-close></div>
+    <div class="ex-sheet" role="dialog" aria-modal="true" aria-labelledby="txm-title">
+      <header class="ex-head">
+        <div>
+          <p class="ex-domain" id="txm-area"></p>
+          <h3 id="txm-title"></h3>
+          <ul class="ex-tracks" id="txm-tags"></ul>
+        </div>
+        <div class="ex-nav">
+          <button class="icon-btn" type="button" data-tx-prev aria-label="Previous task">←</button>
+          <button class="icon-btn" type="button" data-tx-next aria-label="Next task">→</button>
+          <button class="icon-btn" type="button" data-tx-close aria-label="Close">✕</button>
+        </div>
+      </header>
+      <div class="ex-body">
+        <div class="txm-grid">
+          <div class="txm-col">
+            <h4 class="txm-h">Instruction the agent receives</h4>
+            <div class="txm-instruction" id="txm-instruction"></div>
+            <dl class="txm-facts">
+              <div><dt>Environment</dt><dd id="txm-base"></dd></div>
+              <div><dt>Reference solution</dt><dd id="txm-lines"></dd></div>
+              <div><dt>Checking</dt><dd>The reference solution passes every check in a fresh sandbox, and each check is stated in the instruction.</dd></div>
+            </dl>
+          </div>
+          <div class="txm-col">
+            <h4 class="txm-h">Replay of the reference solution</h4>
+            <div class="tx-term tx-term-lg" aria-hidden="true">
+              <div class="tx-bar"><i></i><i></i><i></i><em id="txm-term-base"></em></div>
+              <pre class="tx-screen" id="txm-replay"><code></code></pre>
+            </div>
+            <h4 class="txm-h">Excerpt of <code>solve.sh</code></h4>
+            <pre class="txm-code" id="txm-code"></pre>
+          </div>
+        </div>
+        <a class="btn btn-dark" id="txm-cta" data-contact data-subject="AI for Science, research computing" href="#join">Email us about a task like this
+          <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11m-4-4 4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <script type="application/json" id="examples-data">[{"kind": "micro", "title": "Microscopy cell segmentation and counting", "domain": "Life & Molecular Sciences", "color": "#16a34a", "description": "Reconstruct cell segmentation and measurement behavior across channel, illumination, threshold, object size, and measurement feature.", "why": "The same steps as counting nuclei or measuring cell shape in your own fluorescence images.", "tags": ["Biology", "Microscopy"], "software": ["CellProfiler", "scikit-image", "Bio-Formats"], "artifacts": ["label-mask image", "object-measurements CSV"], "axes": ["channel selection", "illumination correction", "measurement feature", "object size range", "threshold method"], "outputs": ["object count", "area sum", "eccentricity sum", "threshold", "minimum size"], "img": "assets/examples/micro-detail.webp", "alt": "Microscopy label masks from public runs"}, {"kind": "foam", "title": "OpenFOAM 2-D dam-break CFD", "domain": "Physical & Engineering Simulation", "color": "#0891b2", "description": "Reconstruct a 2-D dam-break CFD workflow across water height, mesh, gravity, and simulation time.", "why": "Meshing, boundary conditions, and solver settings: the setup behind any flow or transport simulation.", "tags": ["Simulation", "Fluid dynamics"], "software": ["OpenFOAM"], "artifacts": ["blockMesh log", "polyMesh", "initial field files", "case dictionaries"], "axes": ["water height", "mesh", "gravity", "time"], "outputs": ["mesh statistics", "field summaries", "residual/probe behavior"], "img": "assets/examples/foam-detail.webp", "alt": "OpenFOAM dam-break mesh drawn from the public polyMesh"}, {"kind": "stl", "title": "OpenSCAD / BOSL2 parametric fan duct", "domain": "Spatial, Visual & 3D", "color": "#7c3aed", "description": "Regenerate a swept fan-duct mount STL whose inlet size, outlet size, bend angle, and rib count change the geometry.", "why": "Parametric CAD for 3D-printed sample holders, fixtures, and flow cells.", "tags": ["Lab hardware", "CAD"], "software": ["OpenSCAD", "BOSL2"], "artifacts": ["STL mesh", "geometry metrics JSON"], "axes": ["inlet size", "outlet size", "bend angle", "rib count"], "outputs": ["bounding box", "volume", "surface area", "connected components", "sampled surface distance"], "img": "assets/examples/stl-detail.webp", "alt": "Rendered fan-duct mesh from a public OpenSCAD run"}, {"kind": "astro", "title": "Astronomy FITS/WCS cutout and photometry", "domain": "Earth & Space Sciences", "color": "#db2777", "description": "Reconstruct FITS/WCS cutout and photometry behavior under aperture, background, clipping, threshold, and coordinate-frame interventions.", "why": "Aperture photometry and background subtraction, the same math as quantifying spots or bands in noisy images.", "tags": ["Imaging", "Signal extraction"], "software": ["Astropy", "Photutils"], "artifacts": ["FITS image", "photometry catalog CSV"], "axes": ["aperture radius", "background model", "sigma clip", "source threshold", "WCS frame"], "outputs": ["flux", "coordinate frame", "median", "shape", "standard deviation"], "img": "assets/examples/astro-detail.webp", "alt": "Astronomy FITS cutouts from public runs"}, {"kind": "color", "title": "Color-space and tone-curve pipeline", "domain": "Spatial, Visual & 3D", "color": "#7c3aed", "description": "Infer a color pipeline across color space, white point, tone curve, demosaicing, and compression quality.", "why": "The color-space math behind calibrated imaging, colorimetric assays, and optical characterization.", "tags": ["Imaging", "Optics"], "software": ["colour-science", "ImageMagick", "scikit-image"], "artifacts": ["color measurements JSON", "PPM preview"], "axes": ["color space", "white point", "tone curve", "demosaic method", "compression quality"], "outputs": ["mean color", "image shape", "XYZ tristimulus values"], "img": "assets/examples/color-detail.webp", "alt": "Color-pipeline previews from public runs"}, {"kind": "ocr", "title": "Tesseract table-image OCR", "domain": "Data & Document Workflows", "color": "#d97706", "description": "Reconstruct how DPI, font, language, metadata, and page range affect OCR behavior.", "why": "Reading numbers out of scanned tables, the first step in mining property data from papers.", "tags": ["Literature", "Data extraction"], "software": ["Pandoc", "Poppler", "Tesseract", "QPDF"], "artifacts": ["OCR summary JSON", "page-preview image"], "axes": ["DPI", "font", "language", "metadata", "page range"], "outputs": ["ink", "line count", "page size", "text digest", "text length"], "img": "assets/examples/ocr-detail.webp", "alt": "OCR page preview from a public run"}, {"kind": "robot", "title": "MuJoCo / URDF mass-inertia repair", "domain": "Physical & Engineering Simulation", "color": "#0891b2", "description": "Infer robot state and trajectory behavior under actuator, collision, pose, joint-limit, and target interventions.", "why": "Physical models with masses, inertias, and joint limits, as used to simulate lab robots before running them.", "tags": ["Lab automation", "Physics"], "software": ["MuJoCo", "URDF/MJCF tooling"], "artifacts": ["URDF model", "trajectory CSV", "control summary"], "axes": ["actuator gain", "collision margin", "initial pose", "joint limit", "trajectory target"], "outputs": ["gain", "nq", "nv", "qpos", "qvel"], "img": "assets/examples/robot-detail.webp", "alt": "MuJoCo joint-position trajectories across public scenarios"}, {"kind": "blender", "title": "Blender cloth flag scene", "domain": "Spatial, Visual & 3D", "color": "#7c3aed", "description": "Reconstruct cloth-scene behavior under wind, pin-group, frame, and subdivision interventions.", "why": "A physics simulation whose outcome shifts with wind, constraints, and resolution.", "tags": ["Simulation", "Physics"], "software": ["Blender"], "artifacts": ["scene graph JSON"], "axes": ["wind strength", "pin group", "frame", "cloth subdiv"], "outputs": ["evaluated objects", "frame", "materials", "node groups", "object counts", "rotation"], "img": "assets/examples/blender-detail.webp", "alt": "Blender cloth scene rotation dial across public scenarios"}, {"kind": "drc", "title": "KiCad LED-matrix driver PCB", "domain": "Spatial, Visual & 3D", "color": "#7c3aed", "description": "Reconstruct LED-matrix driver board outputs (DRC report and project files) under row, column, driver, and routing interventions.", "why": "Design-rule checks on circuit boards, like the custom electronics inside lab instruments.", "tags": ["Instrumentation", "Electronics"], "software": ["KiCad"], "artifacts": ["DRC report", "project file list"], "axes": ["rows", "cols", "driver", "routing"], "outputs": ["DRC report summary", "project file inventory"], "img": "assets/examples/drc-detail.webp", "alt": "KiCad board with design-rule findings plotted at their positions"}, {"kind": "container", "title": "Container SBOM and supply-chain attestation", "domain": "Software & Formal Systems", "color": "#2563eb", "description": "Infer coupled container base-image, package-set, label, entrypoint, and SBOM-scope behavior.", "why": "Recording exactly which software went into an environment, the backbone of reproducible analysis.", "tags": ["Reproducibility", "Software"], "software": ["Hadolint", "Syft", "Skopeo"], "artifacts": ["Dockerfile", "in-toto attestation", "SPDX SBOM"], "axes": ["base image", "entrypoint", "labels", "package set", "SBOM scope"], "outputs": ["attestation", "base", "layer count", "merkle", "vuln budget"], "img": "assets/examples/container-detail.webp", "alt": "Container image layers and attestation from a public run"}]</script>
+  <script type="application/json" id="terminal-data">{"tasks": [{"title": "Install an HPC scheduler's Python bindings, verified", "area": "HPC & clusters", "summary": "Install the Flux Python package from the tarball at /app/flux-python-0.48.0rc6.tar.gz after verifying its integrity against the provided checksum file.", "instruction": "<p>Install the Flux Python package from the tarball at /app/flux-python-0.48.0rc6.tar.gz after verifying its integrity against the provided checksum file.<\/p><p>The expected manifest file may be outdated; if the installed layout differs, update the manifest and note the discrepancy in the installation report.<\/p><p>The installation report at /app/installation_report.txt must include the verified tarball hash, describe any manifest changes, and also contain additional package metadata specified by the configuration at /app/config/metadata.json — follow that config&#x27;s instructions for intermediate reporting.<\/p><p>Finally, use the Flux Python bindings to produce /app/result.txt containing exactly the string found in /app/config/expected.txt.<\/p>", "base": "fluxrm/flux-core:focal-v0.48.0", "lines": 171, "tags": ["flux", "hpc", "job-scheduling", "python-bindings"], "replay": [["$", "ACTUAL_HASH=$(sha256sum \"$TARBALL\" | awk '{print $1}')"], ["$", "pip install --no-compile \"$TARBALL\""], ["$", "find \"$FLUX_ROOT\" -type f ! -name '*.pyc' -exec sha256sum {} \\; | sort -k2 > \"$INSTALLED_MANIFEST\""], ["$", "cp \"$INSTALLED_MANIFEST\" \"$EXPECTED_MANIFEST\""], ["$", "flux start --test-size=4 bash -c '…'"]], "code": "set -euo pipefail\nTARBALL=\"/app/flux-python-0.48.0rc6.tar.gz\"\nCHECKSUM_FILE=\"/app/checksum.sha256\"\nVALIDATION_FILE=\"/app/validation.txt\"\nCONFIG_FILE=\"/app/config/expected.txt\"\nRESULT_FILE=\"/app/result.txt\"\nEXPECTED_MANIFEST=\"/app/expected_manifest.txt\"\nINSTALLED_MANIFEST=\"/app/installed_manifest.txt\"\nINSTALLATION_REPORT=\"/app/installation_report.txt\"\nMETADATA_CONFIG=\"/app/config/metadata.json\"\necho \"=== INSPECT: verify required inputs exist ===\"\nfor f in \"$TARBALL\" \"$CHECKSUM_FILE\" \"$EXPECTED_MANIFEST\" \"$CONFIG_FILE\" \"$METADATA_CONFIG\"; do\n    if [ ! -f \"$f\" ]; then\n        echo \"ERROR: Required file $f not found\" >&2\n        exit 1\n    fi\ndone\necho \"=== INSPECT: read metadata configuration ===\"\nMETADATA_FILE=$(python3 -c \"import json; cfg=json.load(open('$METADATA_CONFIG')); print(cfg['metadata_file'])\")\nFIELDS=$(python3 -c \"import json; cfg=json.load(open('$METADATA_CONFIG')); print(' '.join(cfg['required_metadata']))\")\necho \"Metadata will be gathered for fields: $FIELDS\"\necho \"Intermediate metadata file: /app/$METADATA_FILE\"\necho \"=== DERIVE: verify tarball hash ===\"\nACTUAL_HASH=$(sha256sum \"$TARBALL\" | awk '{print $1}')\nEXPECTED_HASH=$(awk '{print $1}' \"$CHECKSUM_FILE\")\nif [ \"$ACTUAL_HASH\" != \"$EXPECTED_HASH\" ]; then\n    echo \"ERROR: Tarball checksum mismatch\" >&2\n    exit 1\nfi\necho \"=== VALIDATE checksum OK, writing validation report ===\""}, {"title": "Version a dataset with DVC and reconcile its history", "area": "Research data management", "summary": "Set up a DVC-tracked dataset under /app/dataset/ with two items: dataset/foo and dataset/test/0.", "instruction": "<p>Set up a DVC-tracked dataset under /app/dataset/ with two items: dataset/foo and dataset/test/0.<\/p><p>Track both with DVC, remove the original data, and commit the resulting .dvc files.<\/p><p>Then produce the following artifacts under /app: dvc_inventory.json, dvc_reconciliation.md, dvc_changes.diff, dvc_status.txt, and a directory /app/patches/ containing a patch file for each of dataset/foo.dvc and dataset/test/0.dvc that captures the changes introduced when that file was first committed.<\/p><p>The reconciliation report must document the absence of the data, the git commits that introduced each .dvc file (SHA and message), and the baseline tag (name and commit SHA).<\/p><p>The diff should be taken from that tag to HEAD.<\/p><p>The repository already has git and DVC initialized, and a git tag marks the initial DVC initialization; discover and use that tag as the baseline.<\/p><p>Refer to /app/task_files/ for the required formats of the inventory and the reconciliation report.<\/p>", "base": "ubuntu:22.04", "lines": 313, "tags": ["dvc", "data-versioning", "version-control"], "replay": [["$", "dvc add dataset/foo"], ["$", "dvc add dataset/test/0"], ["$", "git add dataset/foo.dvc dataset/test/0.dvc"], ["$", "git commit -m \"DVC track dataset items\""], ["$", "git diff \"${PARENT}..${ADD_COMMIT}\" -- \"$dvc_file\" > \"$patch_path\""]], "code": "set -euo pipefail\nif [ -s /app/dvc_changes.diff ] && \\\n   [ -s /app/dvc_reconciliation.md ] && \\\n   [ -s /app/dvc_inventory.json ] && \\\n   [ -s /app/dvc_status.txt ] && \\\n   grep -q 'Commit message:' /app/dvc_reconciliation.md && \\\n   grep -q 'Baseline tag:' /app/dvc_reconciliation.md && \\\n   [ -d /app/patches ] && \\\n   [ \"$(ls -1 /app/patches/*.patch 2>/dev/null | wc -l)\" -ge 2 ]; then\n    echo \"Required artifacts with commit messages, baseline tag, and patches already present. Nothing to do.\"\n    exit 0\nfi\ncd /app\nrm -f dataset/foo.dvc dataset/test/0.dvc\nrm -rf dataset/foo dataset/test/0\nrm -f /app/dvc_reconciliation.md \\\n      /app/dvc_inventory.json \\\n      /app/dvc_changes.diff \\\n      /app/dvc_status.txt\nrm -rf /app/patches\nINIT_COMMIT=$(git rev-list --max-parents=0 HEAD)\nif [ -z \"$INIT_COMMIT\" ]; then\n    echo \"ERROR: could not determine initial commit\"\n    exit 1\nfi\necho \"Initial commit: $INIT_COMMIT\"\nreadarray -t TAGS < <(git tag --points-at \"$INIT_COMMIT\")\nif [ \"${#TAGS[@]}\" -eq 0 ]; then\n    echo \"ERROR: no tag found pointing to the initial commit\"\n    exit 1"}, {"title": "Diagnose and fix a Python dependency bug", "area": "Python environments", "summary": "In /app, diagnose and fix the environs URL parsing bug.", "instruction": "<p>In /app, diagnose and fix the environs URL parsing bug.<\/p><p>Run bug.py to capture the original output and use validate_output.py to diagnose the failure.<\/p><p>Consult changelog.md to determine the required environs version, upgrade the library, and produce a corrected output in fixed.txt.<\/p><p>Write a test suite test_bug.py covering both mongodb and mongodb+srv URL schemes.<\/p><p>The suite must include a test that runs validate_output.py against bug.py’s output after the fix and asserts the validator exits successfully.<\/p><p>Run the tests and save the report as test_report.txt.<\/p><p>Finally, create validation_passed.txt and a debug summary debug_summary.txt describing the error and the fix.<\/p>", "base": "python:3.11-slim", "lines": 202, "tags": ["python", "library-bug", "url-parsing", "environs"], "replay": [["$", "python /app/bug.py > /app/result.txt"], ["$", "/app/validate_output.py /app/result.txt > /app/validation_stdout.txt 2> /app/validation_stderr.txt"], ["$", "pip install \"environs==${REQUIRED_VERSION}\" 'marshmallow<4.0.0'"], ["$", "python /app/bug.py > /app/fixed.txt"]], "code": "set -euo pipefail\necho \"Ensuring pytest is available\"\npython -m pytest --version >/dev/null 2>&1 || pip install pytest\necho \"Stage 1: Create original bug.py (known buggy)\"\ncat > /app/bug.py << 'EOF'\nfrom environs import Env\nenv = Env()\nMONGODB_URL = env.url(\n    \"MONGODB_URL\",\n    default=\"mongodb://user:pass@mongo.example.local/db?authSource=admin\",\n    schemes={\"mongodb\", \"mongodb+srv\"},\n    require_tld=False,\n)\nprint(MONGODB_URL)\nEOF\necho \"Stage 2: Run bug.py and capture original output\"\npython /app/bug.py > /app/result.txt\necho \"Stage 3: Validate original output and interpret failure\"\nset +e\n/app/validate_output.py /app/result.txt > /app/validation_stdout.txt 2> /app/validation_stderr.txt\nVALIDATION_EXIT=$?\nset -e\nif [ $VALIDATION_EXIT -eq 0 ]; then\n    echo \"ERROR: validate_output.py unexpectedly succeeded on buggy output\" >&2\n    exit 1\nfi\nif ! grep -q \"ParseResult\" /app/validation_stderr.txt; then\n    echo \"ERROR: Expected 'ParseResult' indication in validator failure output\" >&2\n    exit 1\nfi"}]}</script>
+  <script src="app.js" defer></script>
+  <script src="live.js" defer></script>
+  <script src="terminal.js" defer></script>
+</body>
 </html>

live.js

@@ -0,0 +1,810 @@
+(() => {
+  'use strict';
+
+  const REDUCE = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const SC = ['#0d9488', '#2563eb', '#7c3aed', '#db2777', '#d97706', '#059669'];
+  const DRC = ['#fbbf24', '#2dd4bf', '#f472b6', '#60a5fa', '#a78bfa', '#34d399', '#fb7185', '#22d3ee'];
+  const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+  const easeOut = (t) => 1 - Math.pow(1 - clamp(t, 0, 1), 3);
+  const easeInOut = (t) => {
+    const x = clamp(t, 0, 1);
+    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+  };
+  const fmt = (n) => n.toLocaleString('en-US');
+  const hexRgb = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+
+  function decode(b64, Type) {
+    const bin = atob(b64);
+    const u8 = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i += 1) u8[i] = bin.charCodeAt(i);
+    return new Type(u8.buffer);
+  }
+
+  function make(tag, cls, parent, text) {
+    const node = document.createElement(tag);
+    if (cls) node.className = cls;
+    if (text != null) node.textContent = text;
+    if (parent) parent.appendChild(node);
+    return node;
+  }
+
+  // One animation loop drives every visible view.
+  const active = new Set();
+  let raf = 0;
+  function loop(now) {
+    active.forEach((view) => { if (view.ready) view.render(now); });
+    raf = active.size && !document.hidden ? requestAnimationFrame(loop) : 0;
+  }
+  function wake() {
+    if (!raf && active.size && !document.hidden) raf = requestAnimationFrame(loop);
+  }
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    } else {
+      wake();
+    }
+  });
+
+  class View {
+    constructor(box, { canvas = true, hero = false } = {}) {
+      this.box = box;
+      this.hero = hero;
+      this.t0 = performance.now() - (REDUCE ? 600000 : 0);
+      this.w = 1;
+      this.h = 1;
+      if (canvas) {
+        this.canvas = make('canvas', 'lv-canvas', box);
+        this.ctx = this.canvas.getContext('2d');
+      }
+    }
+
+    start() {
+      this.ro = new ResizeObserver(() => this.resize());
+      this.ro.observe(this.box);
+      this.io = new IntersectionObserver((entries) => {
+        if (!REDUCE && entries.some((e) => e.isIntersecting)) {
+          active.add(this);
+          wake();
+        } else {
+          active.delete(this);
+        }
+      }, { rootMargin: '60px' });
+      this.io.observe(this.box);
+      this.resize();
+      return this;
+    }
+
+    resize() {
+      const r = this.box.getBoundingClientRect();
+      this.w = Math.max(1, r.width);
+      this.h = Math.max(1, r.height);
+      if (this.canvas) {
+        const dpr = Math.min(2, window.devicePixelRatio || 1);
+        const W = Math.round(this.w * dpr);
+        const H = Math.round(this.h * dpr);
+        if (this.canvas.width !== W || this.canvas.height !== H) {
+          this.canvas.width = W;
+          this.canvas.height = H;
+        }
+        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
+      if (this.w < 8 || this.h < 8) return;
+      this.layout();
+      this.ready = true;
+      this.render(performance.now());
+    }
+
+    layout() {}
+
+    render() {}
+
+    elapsed(now) {
+      return now - this.t0;
+    }
+
+    caption(text) {
+      if (!this.cap) this.cap = make('span', 'lv-cap', this.box);
+      if (this.cap.textContent !== text) this.cap.textContent = text;
+    }
+
+    dispose() {
+      active.delete(this);
+      if (this.io) this.io.disconnect();
+      if (this.ro) this.ro.disconnect();
+      this.box.replaceChildren();
+    }
+  }
+
+  // OpenSCAD meshes: rotate, alternating public runs at one shared scale.
+  class MeshLive extends View {
+    constructor(box, v, opts) {
+      super(box, opts);
+      this.base = hexRgb(opts.color || '#7c3aed');
+      this.meshes = v.meshes.map((m) => {
+        const T = decode(m.tris, Float32Array);
+        const mn = [Infinity, Infinity, Infinity];
+        const mx = [-Infinity, -Infinity, -Infinity];
+        for (let i = 0; i < T.length; i += 3) {
+          for (let k = 0; k < 3; k += 1) {
+            const x = T[i + k];
+            if (x < mn[k]) mn[k] = x;
+            if (x > mx[k]) mx[k] = x;
+          }
+        }
+        return {
+          id: m.id,
+          T,
+          n: T.length / 9,
+          ctr: [0, 1, 2].map((k) => (mn[k] + mx[k]) / 2),
+          rad: Math.hypot(mx[0] - mn[0], mx[1] - mn[1], mx[2] - mn[2]) / 2 || 1,
+        };
+      });
+      this.rad = Math.max(...this.meshes.map((m) => m.rad));
+      const maxN = Math.max(...this.meshes.map((m) => m.n));
+      this.tmp = new Float32Array(9);
+      this.depth = new Float32Array(maxN);
+      this.order = new Uint32Array(maxN);
+      this.pts = new Float32Array(maxN * 6);
+      this.col = new Array(maxN);
+      this.cycle = 6500;
+      this.start();
+    }
+
+    render(now) {
+      const { ctx, w, h, tmp, pts, depth, order } = this;
+      const t = this.elapsed(now);
+      const mesh = this.meshes[Math.floor(t / this.cycle) % this.meshes.length];
+      const ph = (t % this.cycle) / this.cycle;
+      const alpha = REDUCE ? 1 : clamp(Math.min(ph, 1 - ph) / 0.07, 0, 1);
+      ctx.clearRect(0, 0, w, h);
+
+      const m = Math.min(w, h);
+      const ox = w / 2;
+      const oy = h / 2;
+      const shadow = ctx.createRadialGradient(ox, oy + h * 0.33, 0, ox, oy + h * 0.33, m * 0.45);
+      shadow.addColorStop(0, 'rgba(15,23,42,.24)');
+      shadow.addColorStop(1, 'rgba(15,23,42,0)');
+      ctx.fillStyle = shadow;
+      ctx.beginPath();
+      ctx.ellipse(ox, oy + h * 0.33, m * 0.45, m * 0.07, 0, 0, Math.PI * 2);
+      ctx.fill();
+
+      const s = (m * 0.5) / this.rad;
+      const yaw = -0.75 + t * 0.00045;
+      const cy = Math.cos(yaw);
+      const sy = Math.sin(yaw);
+      const cp = Math.cos(0.42);
+      const sp = Math.sin(0.42);
+      const [mx, my, mz] = mesh.ctr;
+      let lx = -0.45;
+      let ly = -0.72;
+      let lz = 0.55;
+      const ll = Math.hypot(lx, ly, lz);
+      lx /= ll; ly /= ll; lz /= ll;
+      let hx = lx;
+      let hy = ly - 1;
+      let hz = lz;
+      const hl = Math.hypot(hx, hy, hz);
+      hx /= hl; hy /= hl; hz /= hl;
+      const [br, bg, bb] = this.base;
+      const { T, n } = mesh;
+
+      for (let f = 0; f < n; f += 1) {
+        const b = f * 9;
+        for (let k = 0; k < 3; k += 1) {
+          const x = T[b + 3 * k] - mx;
+          const y = T[b + 3 * k + 1] - my;
+          const z = T[b + 3 * k + 2] - mz;
+          const x1 = x * cy - y * sy;
+          const y1 = x * sy + y * cy;
+          tmp[3 * k] = x1;
+          tmp[3 * k + 1] = y1 * cp - z * sp;
+          tmp[3 * k + 2] = y1 * sp + z * cp;
+        }
+        const ux = tmp[3] - tmp[0];
+        const uy = tmp[4] - tmp[1];
+        const uz = tmp[5] - tmp[2];
+        const vx = tmp[6] - tmp[0];
+        const vy = tmp[7] - tmp[1];
+        const vz = tmp[8] - tmp[2];
+        let nx = uy * vz - uz * vy;
+        let ny = uz * vx - ux * vz;
+        let nz = ux * vy - uy * vx;
+        const nl = Math.hypot(nx, ny, nz) || 1;
+        nx /= nl; ny /= nl; nz /= nl;
+        if (ny > 0) { nx = -nx; ny = -ny; nz = -nz; }
+        const dif = Math.max(0, nx * lx + ny * ly + nz * lz);
+        const spec = Math.pow(Math.max(0, nx * hx + ny * hy + nz * hz), 30) * 140;
+        const k = 0.2 + 0.8 * dif;
+        this.col[f] = `rgb(${Math.min(255, br * k + spec) | 0},${Math.min(255, bg * k + spec) | 0},${Math.min(255, bb * k + spec) | 0})`;
+        depth[f] = tmp[1] + tmp[4] + tmp[7];
+        const o = f * 6;
+        pts[o] = ox + tmp[0] * s;
+        pts[o + 1] = oy - tmp[2] * s;
+        pts[o + 2] = ox + tmp[3] * s;
+        pts[o + 3] = oy - tmp[5] * s;
+        pts[o + 4] = ox + tmp[6] * s;
+        pts[o + 5] = oy - tmp[8] * s;
+        order[f] = f;
+      }
+      const sorted = order.subarray(0, n).sort((p, q) => depth[q] - depth[p]);
+      ctx.globalAlpha = alpha;
+      ctx.lineJoin = 'round';
+      ctx.lineWidth = 0.6;
+      for (let j = 0; j < n; j += 1) {
+        const f = sorted[j];
+        const o = f * 6;
+        ctx.beginPath();
+        ctx.moveTo(pts[o], pts[o + 1]);
+        ctx.lineTo(pts[o + 2], pts[o + 3]);
+        ctx.lineTo(pts[o + 4], pts[o + 5]);
+        ctx.closePath();
+        ctx.fillStyle = this.col[f];
+        ctx.strokeStyle = this.col[f];
+        ctx.fill();
+        ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+      this.caption(`${mesh.id} · ${fmt(mesh.n)} facets`);
+    }
+  }
+
+  // OpenFOAM: the mesh draws in, then tracer particles flow inlet to outlet.
+  class FoamLive extends View {
+    constructor(box, v, opts) {
+      super(box, opts);
+      this.P = decode(v.points, Float32Array);
+      this.Q = decode(v.quads, Uint16Array);
+      const pal = { inlet: '#2563eb', outlet: '#d97706' };
+      this.patches = v.patches.map((p) => ({
+        E: decode(p.edges, Uint16Array),
+        color: pal[p.name] || (p.type === 'wall' ? '#1e293b' : '#db2777'),
+      }));
+      let x0 = Infinity;
+      let x1 = -Infinity;
+      let y0 = Infinity;
+      let y1 = -Infinity;
+      for (let i = 0; i < this.P.length; i += 2) {
+        const x = this.P[i];
+        const y = this.P[i + 1];
+        if (x < x0) x0 = x;
+        if (x > x1) x1 = x;
+        if (y < y0) y0 = y;
+        if (y > y1) y1 = y;
+      }
+      this.bb = [x0, y0, x1, y1];
+
+      const bins = 160;
+      const lo = new Float32Array(bins).fill(Infinity);
+      const hi = new Float32Array(bins).fill(-Infinity);
+      for (let i = 0; i < this.P.length; i += 2) {
+        const b = clamp(Math.round(((this.P[i] - x0) / (x1 - x0)) * (bins - 1)), 0, bins - 1);
+        lo[b] = Math.min(lo[b], this.P[i + 1]);
+        hi[b] = Math.max(hi[b], this.P[i + 1]);
+      }
+      for (let b = 1; b < bins; b += 1) {
+        if (!Number.isFinite(lo[b])) { lo[b] = lo[b - 1]; hi[b] = hi[b - 1]; }
+      }
+      this.bins = bins;
+      this.lo = lo;
+      this.hi = hi;
+      this.maxSpan = Math.max(...Array.from(hi, (v2, b) => v2 - lo[b]));
+      this.cells = v.n_cells;
+      this.off = document.createElement('canvas');
+      this.parts = Array.from({ length: opts.hero ? 280 : 120 }, () => this.spawn(true));
+      this.last = 0;
+      this.start();
+    }
+
+    spawn(scatter) {
+      return { f: scatter ? Math.random() : -Math.random() * 0.04, u: 0.05 + Math.random() * 0.9, v: 0.7 + Math.random() * 0.6, ph: Math.random() * 6.3 };
+    }
+
+    layout() {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      const pad = this.hero ? 30 : 14;
+      const [x0, y0, x1, y1] = this.bb;
+      this.s = Math.min((this.w - 2 * pad) / (x1 - x0), (this.h - 2 * pad) / (y1 - y0));
+      this.ox = this.w / 2 - ((x0 + x1) / 2) * this.s;
+      this.oy = this.h / 2 + ((y0 + y1) / 2) * this.s;
+      const off = this.off;
+      off.width = Math.round(this.w * dpr);
+      off.height = Math.round(this.h * dpr);
+      const c = off.getContext('2d');
+      c.setTransform(dpr, 0, 0, dpr, 0, 0);
+      c.clearRect(0, 0, this.w, this.h);
+      const { P, Q } = this;
+      const X = (x) => this.ox + x * this.s;
+      const Y = (y) => this.oy - y * this.s;
+      c.lineWidth = 0.45;
+      c.strokeStyle = 'rgba(5,150,105,.5)';
+      c.beginPath();
+      for (let q = 0; q < Q.length; q += 4) {
+        c.moveTo(X(P[2 * Q[q]]), Y(P[2 * Q[q] + 1]));
+        for (let k = 1; k < 4; k += 1) c.lineTo(X(P[2 * Q[q + k]]), Y(P[2 * Q[q + k] + 1]));
+        c.closePath();
+      }
+      c.stroke();
+      c.lineWidth = this.hero ? 2.4 : 1.6;
+      for (const p of this.patches) {
+        c.strokeStyle = p.color;
+        c.beginPath();
+        for (let e = 0; e < p.E.length; e += 2) {
+          c.moveTo(X(P[2 * p.E[e]]), Y(P[2 * p.E[e] + 1]));
+          c.lineTo(X(P[2 * p.E[e + 1]]), Y(P[2 * p.E[e + 1] + 1]));
+        }
+        c.stroke();
+      }
+    }
+
+    at(p) {
+      const [x0, , x1] = this.bb;
+      const b = clamp(Math.round(clamp(p.f, 0, 1) * (this.bins - 1)), 0, this.bins - 1);
+      const span = this.hi[b] - this.lo[b];
+      const y = this.lo[b] + span * (0.04 + 0.92 * p.u);
+      return { x: this.ox + (x0 + clamp(p.f, 0, 1) * (x1 - x0)) * this.s, y: this.oy - y * this.s, span };
+    }
+
+    render(now) {
+      const { ctx, w, h } = this;
+      const t = this.elapsed(now);
+      const dt = clamp(now - (this.last || now), 0, 48);
+      this.last = now;
+      ctx.clearRect(0, 0, w, h);
+      const reveal = REDUCE ? 1 : easeOut(t / 1500);
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(0, 0, w * reveal, h);
+      ctx.clip();
+      ctx.drawImage(this.off, 0, 0, w, h);
+      ctx.restore();
+      this.caption(`${fmt(this.cells)} cells`);
+      if (reveal < 1) return;
+
+      ctx.lineCap = 'round';
+      ctx.lineWidth = this.hero ? 1.8 : 1.4;
+      for (const p of this.parts) {
+        const a = this.at(p);
+        const speed = 0.00007 * p.v * (this.maxSpan / Math.max(a.span, 1e-6)) ** 0.7;
+        p.f += speed * dt;
+        if (p.f > 1) Object.assign(p, this.spawn(false));
+        const b = this.at(p);
+        const wobble = Math.sin(t * 0.002 + p.ph) * 0.6;
+        const len = clamp((b.x - a.x) * 5, 2, 14);
+        ctx.strokeStyle = 'rgba(14,165,233,.75)';
+        ctx.beginPath();
+        ctx.moveTo(b.x - len, b.y + wobble);
+        ctx.lineTo(b.x, b.y + wobble);
+        ctx.stroke();
+      }
+    }
+  }
+
+  // KiCad: a design-rule scan sweeps the board and lights up each finding.
+  class DrcLive extends View {
+    constructor(box, v, opts) {
+      super(box, opts);
+      this.dots = v.dots;
+      let x0 = Infinity;
+      let x1 = -Infinity;
+      let y0 = Infinity;
+      let y1 = -Infinity;
+      for (const [x, y] of this.dots) {
+        x0 = Math.min(x0, x); x1 = Math.max(x1, x);
+        y0 = Math.min(y0, y); y1 = Math.max(y1, y);
+      }
+      const pad = 14;
+      this.bb = [x0 - pad, y0 - pad, x1 + pad, y1 + pad];
+      this.sweepMs = 3200;
+      this.cycle = 4600;
+      this.start();
+    }
+
+    layout() {
+      const margin = this.hero ? 26 : 12;
+      const [x0, y0, x1, y1] = this.bb;
+      this.s = Math.min((this.w - 2 * margin) / (x1 - x0), (this.h - 2 * margin) / (y1 - y0));
+      this.bw = (x1 - x0) * this.s;
+      this.bh = (y1 - y0) * this.s;
+      this.bx = (this.w - this.bw) / 2;
+      this.by = (this.h - this.bh) / 2;
+    }
+
+    render(now) {
+      const { ctx, w, h, s, bx, by, bw, bh } = this;
+      const [x0, y0] = this.bb;
+      const t = this.elapsed(now) % this.cycle;
+      const sweep = REDUCE ? 1.2 : t / this.sweepMs;
+      const beam = bx + sweep * bw;
+      ctx.clearRect(0, 0, w, h);
+
+      ctx.save();
+      ctx.beginPath();
+      if (ctx.roundRect) ctx.roundRect(bx, by, bw, bh, 8);
+      else ctx.rect(bx, by, bw, bh);
+      ctx.fillStyle = '#05271f';
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(52,211,153,.5)';
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      ctx.clip();
+      ctx.strokeStyle = 'rgba(94,234,212,.1)';
+      ctx.lineWidth = 0.6;
+      ctx.beginPath();
+      const step = 10 * s;
+      for (let gx = bx; gx < bx + bw; gx += step) { ctx.moveTo(gx, by); ctx.lineTo(gx, by + bh); }
+      for (let gy = by; gy < by + bh; gy += step) { ctx.moveTo(bx, gy); ctx.lineTo(bx + bw, gy); }
+      ctx.stroke();
+      if (sweep <= 1) {
+        const band = ctx.createLinearGradient(beam - 46, 0, beam + 6, 0);
+        band.addColorStop(0, 'rgba(45,212,191,0)');
+        band.addColorStop(1, 'rgba(45,212,191,.28)');
+        ctx.fillStyle = band;
+        ctx.fillRect(beam - 46, by, 52, bh);
+        ctx.fillStyle = 'rgba(153,246,228,.9)';
+        ctx.fillRect(beam, by, 1.5, bh);
+      }
+      ctx.restore();
+
+      let found = 0;
+      const r = this.hero ? 3.4 : 2.6;
+      for (const [x, y, g] of this.dots) {
+        const px = bx + (x - x0) * s;
+        const py = by + (y - y0) * s;
+        const color = DRC[g % DRC.length];
+        const passed = px <= beam;
+        if (passed) found += 1;
+        ctx.globalAlpha = passed ? 1 : 0.22;
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(px, py, r, 0, Math.PI * 2);
+        ctx.fill();
+        const since = ((beam - px) / bw) * this.sweepMs;
+        if (passed && since < 700 && sweep <= 1) {
+          const k = since / 700;
+          ctx.globalAlpha = 1 - k;
+          ctx.strokeStyle = color;
+          ctx.lineWidth = 1.4;
+          ctx.beginPath();
+          ctx.arc(px, py, r + 2 + k * 9, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+      }
+      ctx.globalAlpha = 1;
+      this.caption(`DRC scan · ${found} findings`);
+    }
+  }
+
+  // Container: layers build bottom-up, then the attestation is written.
+  class ContainerLive extends View {
+    constructor(box, v, opts) {
+      super(box, { ...opts, canvas: false });
+      this.sc = v.scenarios;
+      const wrap = make('div', 'lv-container', box);
+      this.code = make('div', 'lv-code', wrap);
+      this.stack = make('div', 'lv-stack', wrap);
+      this.hash = make('div', 'lv-hash', wrap);
+      this.layers = [];
+      this.idx = -1;
+      this.cycle = 3800;
+      this.start();
+    }
+
+    render(now) {
+      const t = this.elapsed(now);
+      const idx = REDUCE ? 0 : Math.floor(t / this.cycle) % this.sc.length;
+      const lt = REDUCE ? this.cycle : t % this.cycle;
+      const sc = this.sc[idx];
+      if (idx !== this.idx) {
+        this.idx = idx;
+        this.code.textContent = `FROM ${sc.base} · ${sc.id}`;
+        this.layers = Array.from({ length: sc.layers }, (_, k) => {
+          const el = make('div', 'lv-layer', null, k === sc.layers - 1 ? `L1 · base ${sc.base}` : `L${sc.layers - k}`);
+          el.style.setProperty('--k', String(k));
+          return el;
+        });
+        this.stack.replaceChildren(...this.layers);
+      }
+      const n = this.layers.length;
+      this.layers.forEach((el, k) => el.classList.toggle('on', lt > 180 + (n - 1 - k) * 260));
+      const typeStart = 180 + n * 260 + 120;
+      const chars = clamp(Math.floor((lt - typeStart) / 42), 0, sc.attestation.length);
+      const cursor = chars > 0 && chars < sc.attestation.length ? '▍' : '';
+      const text = `attestation ${sc.attestation.slice(0, chars)}${cursor}`;
+      if (this.hash.textContent !== text) this.hash.textContent = text;
+      this.box.classList.toggle('lv-fade', !REDUCE && lt > this.cycle - 320);
+    }
+  }
+
+  // Blender: rotation dial sweeps out to each scenario's evaluated rotation.
+  class DialLive extends View {
+    constructor(box, v, opts) {
+      super(box, opts);
+      this.scenes = v.scenes;
+      this.cycle = 4800;
+      this.start();
+    }
+
+    render(now) {
+      const { ctx, w, h } = this;
+      const t = this.elapsed(now) % this.cycle;
+      ctx.clearRect(0, 0, w, h);
+      const cx = w / 2;
+      const cy = h / 2 - (this.hero ? 0 : 8);
+      const R = Math.min(w, h) * (this.hero ? 0.3 : 0.32);
+      ctx.fillStyle = 'rgba(255,255,255,.92)';
+      ctx.strokeStyle = 'rgba(100,116,139,.35)';
+      ctx.lineWidth = 1.2;
+      ctx.beginPath();
+      ctx.arc(cx, cy, R, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      ctx.strokeStyle = 'rgba(100,116,139,.45)';
+      for (let k = 0; k < 36; k += 1) {
+        const a = (k / 36) * Math.PI * 2;
+        const r1 = R - (k % 9 === 0 ? 10 : 5);
+        ctx.lineWidth = k % 9 === 0 ? 1.4 : 0.9;
+        ctx.beginPath();
+        ctx.moveTo(cx + R * Math.cos(a), cy - R * Math.sin(a));
+        ctx.lineTo(cx + r1 * Math.cos(a), cy - r1 * Math.sin(a));
+        ctx.stroke();
+      }
+      this.scenes.forEach((sc, i) => {
+        const local = t - i * 220;
+        let k;
+        if (REDUCE) k = 1;
+        else if (local < 1400) k = easeInOut(local / 1400);
+        else if (local < 3700) k = 1;
+        else k = 1 - easeInOut((local - 3700) / 800);
+        const a = sc.rotation_z * clamp(k, 0, 1);
+        const color = SC[i % SC.length];
+        ctx.strokeStyle = color;
+        ctx.lineCap = 'round';
+        ctx.lineWidth = 3;
+        ctx.globalAlpha = 0.85;
+        ctx.beginPath();
+        ctx.arc(cx, cy, R + 8 + i * 7, 0, -a, true);
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+        const tip = R - 16;
+        ctx.lineWidth = 3.2;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.lineTo(cx + tip * Math.cos(a), cy - tip * Math.sin(a));
+        ctx.stroke();
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(cx + tip * Math.cos(a), cy - tip * Math.sin(a), 5, 0, Math.PI * 2);
+        ctx.fill();
+      });
+      ctx.fillStyle = '#0f172a';
+      ctx.beginPath();
+      ctx.arc(cx, cy, 6, 0, Math.PI * 2);
+      ctx.fill();
+      this.caption(`rotation_z ${this.scenes.map((sc) => sc.rotation_z).join(' · ')} rad`);
+    }
+  }
+
+  // MuJoCo: joint-position trajectories draw in across every public scenario.
+  class LinesLive extends View {
+    constructor(box, v, opts) {
+      super(box, opts);
+      this.series = v.series;
+      const xs = this.series.flatMap((sr) => sr.step);
+      const ys = this.series.flatMap((sr) => sr.qpos);
+      this.x0 = Math.min(...xs);
+      this.x1 = Math.max(...xs);
+      let y0 = Math.min(...ys);
+      let y1 = Math.max(...ys);
+      const pad = (y1 - y0) * 0.1 || 1;
+      this.y0 = y0 - pad;
+      this.y1 = y1 + pad;
+      this.cycle = 5200;
+      this.start();
+    }
+
+    render(now) {
+      const { ctx, w, h } = this;
+      const t = this.elapsed(now) % this.cycle;
+      const p = REDUCE ? 1 : easeInOut(t / 2600);
+      const fade = REDUCE || t < this.cycle - 500 ? 1 : (this.cycle - t) / 500;
+      ctx.clearRect(0, 0, w, h);
+      const L = this.hero ? 40 : 22;
+      const Rm = this.hero ? 30 : 22;
+      const T = this.hero ? 30 : 22;
+      const B = this.hero ? 34 : 24;
+      const X = (v) => L + ((v - this.x0) / ((this.x1 - this.x0) || 1)) * (w - L - Rm);
+      const Y = (v) => T + (1 - (v - this.y0) / (this.y1 - this.y0)) * (h - T - B);
+      ctx.strokeStyle = 'rgba(148,163,184,.25)';
+      ctx.lineWidth = 1;
+      for (let k = 0; k <= 3; k += 1) {
+        const y = T + (k / 3) * (h - T - B);
+        ctx.beginPath();
+        ctx.moveTo(L, y);
+        ctx.lineTo(w - Rm, y);
+        ctx.stroke();
+      }
+      const cursorX = L + p * (w - L - Rm);
+      ctx.strokeStyle = 'rgba(15,23,42,.12)';
+      ctx.setLineDash([3, 4]);
+      ctx.beginPath();
+      ctx.moveTo(cursorX, T - 6);
+      ctx.lineTo(cursorX, h - B + 6);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.globalAlpha = fade;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      this.series.forEach((sr, i) => {
+        const n = sr.step.length - 1;
+        const reach = p * n;
+        const color = SC[i % SC.length];
+        ctx.strokeStyle = color;
+        ctx.lineWidth = this.hero ? 2.8 : 2.2;
+        ctx.beginPath();
+        let hx = X(sr.step[0]);
+        let hy = Y(sr.qpos[0]);
+        ctx.moveTo(hx, hy);
+        for (let j = 1; j <= n; j += 1) {
+          if (j <= reach) {
+            hx = X(sr.step[j]);
+            hy = Y(sr.qpos[j]);
+            ctx.lineTo(hx, hy);
+          } else {
+            const f = reach - (j - 1);
+            if (f > 0) {
+              hx = X(sr.step[j - 1]) + (X(sr.step[j]) - X(sr.step[j - 1])) * f;
+              hy = Y(sr.qpos[j - 1]) + (Y(sr.qpos[j]) - Y(sr.qpos[j - 1])) * f;
+              ctx.lineTo(hx, hy);
+            }
+            break;
+          }
+        }
+        ctx.stroke();
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(hx, hy, this.hero ? 4.2 : 3.2, 0, Math.PI * 2);
+        ctx.fill();
+      });
+      ctx.globalAlpha = 1;
+      this.caption(`qpos over the trajectory · ${this.series.length} public scenarios`);
+    }
+  }
+
+  // Image tasks: public outputs cycle with a scan line or photometry aperture.
+  class ImagesLive extends View {
+    constructor(box, v, opts, mode) {
+      super(box, { ...opts, canvas: false });
+      this.mode = mode;
+      this.images = v.images;
+      this.wrap = make('div', `lv-images lv-${mode}`, box);
+      const slots = { micro: 3, astro: 4, ocr: 1, color: 6 }[mode];
+      this.slots = Array.from({ length: slots }, (_, j) => {
+        const cell = make('div', 'lv-cell', this.wrap);
+        const a = make('img', 'on', cell);
+        const b = make('img', '', cell);
+        [a, b].forEach((img) => { img.alt = ''; img.decoding = 'async'; });
+        const first = this.images[j % this.images.length];
+        a.src = first.src;
+        if (mode === 'astro') make('span', 'lv-aperture', cell);
+        if (mode === 'ocr' || mode === 'micro') make('span', 'lv-scan', cell);
+        if (mode === 'color') {
+          const sw = make('span', 'lv-swatch', cell);
+          sw.style.background = first.m;
+        }
+        return { cell, layers: [a, b], front: 0, idx: j % this.images.length };
+      });
+      this.period = mode === 'ocr' ? 3200 : 2600;
+      this.start();
+    }
+
+    show(slot, idx) {
+      if (slot.idx === idx) return;
+      slot.idx = idx;
+      const back = slot.layers[1 - slot.front];
+      back.src = this.images[idx].src;
+      back.classList.add('on');
+      slot.layers[slot.front].classList.remove('on');
+      slot.front = 1 - slot.front;
+    }
+
+    render(now) {
+      const t = this.elapsed(now);
+      const n = this.images.length;
+      if (this.mode === 'color') {
+        const hot = REDUCE ? 0 : Math.floor(t / 900) % n;
+        this.slots.forEach((slot, j) => slot.cell.classList.toggle('hot', j === hot));
+        const im = this.images[hot];
+        this.caption(`${im.id} · mean swatch ${im.m}`);
+        return;
+      }
+      this.slots.forEach((slot, j) => {
+        const step = REDUCE ? 0 : Math.floor((t + j * 450) / this.period);
+        this.show(slot, (j + step) % n);
+      });
+      const im = this.images[this.slots[0].idx];
+      if (this.mode === 'ocr') this.caption(`${im.id} · ${im.m} text lines`);
+      else if (this.mode === 'micro') this.caption(`${im.id} · ${im.m} objects segmented`);
+      else this.caption(`${im.id} · flux ${im.m.toFixed(1)}`);
+    }
+  }
+
+  const RENDERERS = {
+    stl: (box, v, o) => new MeshLive(box, v, o),
+    foam: (box, v, o) => new FoamLive(box, v, o),
+    drc: (box, v, o) => new DrcLive(box, v, o),
+    container: (box, v, o) => new ContainerLive(box, v, o),
+    blender: (box, v, o) => new DialLive(box, v, o),
+    robot: (box, v, o) => new LinesLive(box, v, o),
+    micro: (box, v, o) => new ImagesLive(box, v, o, 'micro'),
+    astro: (box, v, o) => new ImagesLive(box, v, o, 'astro'),
+    ocr: (box, v, o) => new ImagesLive(box, v, o, 'ocr'),
+    color: (box, v, o) => new ImagesLive(box, v, o, 'color'),
+  };
+
+  function mount(box, kind, opts = {}) {
+    const data = window.IL_VISUALS && window.IL_VISUALS[kind];
+    const build = RENDERERS[kind];
+    if (!data || !build) return null;
+    box.dataset.kind = kind;
+    try {
+      return build(box, data, opts);
+    } catch (err) {
+      box.replaceChildren();
+      console.error(`live preview failed for ${kind}`, err);
+      return null;
+    }
+  }
+
+  function mountCards() {
+    document.querySelectorAll('.ex-card[data-kind]').forEach((card) => {
+      const thumb = card.querySelector('.ex-thumb');
+      if (!thumb || thumb.querySelector('.ex-live')) return;
+      const box = make('div', 'ex-live', thumb);
+      box.setAttribute('aria-hidden', 'true');
+      const color = getComputedStyle(card).getPropertyValue('--dc').trim();
+      if (mount(box, card.dataset.kind, { color })) {
+        requestAnimationFrame(() => thumb.classList.add('is-live'));
+      } else {
+        box.remove();
+      }
+    });
+  }
+
+  function loadData() {
+    if (window.IL_VISUALS) return Promise.resolve();
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'assets/examples/visuals.js';
+      script.async = true;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  const api = { ready: false, mount };
+  window.ILLive = api;
+
+  const section = document.getElementById('examples');
+  if (!section) return;
+  const go = () => loadData()
+    .then(() => {
+      api.ready = true;
+      mountCards();
+      document.dispatchEvent(new CustomEvent('il-live-ready'));
+    })
+    .catch(() => {});
+  if (!('IntersectionObserver' in window)) {
+    go();
+  } else {
+    const io = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      io.disconnect();
+      go();
+    }, { rootMargin: '900px 0px' });
+    io.observe(section);
+  }
+})();

styles.css

@@ -0,0 +1,598 @@
+:root {
+  --bg: #faf8f3;
+  --surface: #ffffff;
+  --tint: #f3efe6;
+  --tint-2: #f8f6f0;
+  --ink: #18202e;
+  --ink-2: #374151;
+  --muted: #6b7280;
+  --line: #e7e1d5;
+  --accent: #0f9f75;
+  --accent-deep: #047857;
+  --accent-soft: rgba(15, 159, 117, 0.12);
+  --mat: #4f46e5;
+  --mat-soft: rgba(79, 70, 229, 0.1);
+  --warm: #b45309;
+  --indigo: #6366f1;
+  --dark: #151b27;
+  --radius: 18px;
+  --shadow-sm: 0 1px 2px rgba(41, 37, 28, 0.05);
+  --shadow: 0 1px 2px rgba(41, 37, 28, 0.05), 0 14px 34px -14px rgba(41, 37, 28, 0.16);
+  --shadow-lg: 0 26px 60px -26px rgba(41, 37, 28, 0.35);
+  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --serif: "Fraunces", Georgia, "Times New Roman", serif;
+  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  font-family: var(--font);
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--ink);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+body.menu-open { overflow: hidden; }
+img, svg { display: block; max-width: 100%; }
+a { color: inherit; text-decoration: none; }
+h1, h2, h3, h4 { margin: 0; line-height: 1.22; }
+p { margin: 0; }
+.container { width: min(1200px, 100% - 48px); margin-inline: auto; }
+section[id] { scroll-margin-top: 72px; }
+
+.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; }
+.skip-link:focus { top: 12px; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 46px;
+  padding: 0 22px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font: 600 15px/1 var(--font);
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  transition: transform 0.2s var(--ease), background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+.btn svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
+.btn:hover svg { transform: translateX(2px); }
+.btn:hover { transform: translateY(-1px); }
+.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
+.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(24, 32, 46, 0.6); }
+.btn-dark:hover { background: #26303f; }
+.btn-ghost { background: rgba(255, 255, 255, 0.8); border-color: var(--line); color: var(--ink); }
+.btn-ghost:hover { border-color: #d4cbb9; background: #fff; }
+
+/* Navigation */
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(250, 248, 243, 0.82);
+  -webkit-backdrop-filter: saturate(1.4) blur(14px);
+  backdrop-filter: saturate(1.4) blur(14px);
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
+.nav.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(41, 37, 28, 0.35); }
+.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; }
+.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
+.brand em { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); font-style: normal; font-weight: 500; color: var(--muted); }
+.brand-mark { width: 30px; height: 30px; flex: none; }
+.nav-links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
+.nav-links a { position: relative; padding: 6px 0; transition: color 0.2s; }
+.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.25s var(--ease); }
+.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
+.nav-links a.is-active::after { transform: scaleX(1); }
+.nav-cta { display: flex; align-items: center; gap: 10px; }
+.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
+.nav-toggle span { width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease); }
+.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
+.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
+.mobile-menu { display: grid; gap: 4px; padding: 12px 24px 24px; border-top: 1px solid var(--line); background: var(--bg); }
+.mobile-menu[hidden] { display: none; }
+.mobile-menu a:not(.btn) { padding: 12px 4px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--line); }
+.mobile-menu .btn { margin-top: 14px; }
+
+/* Hero */
+.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px); }
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-image: radial-gradient(rgba(24, 32, 46, 0.09) 1px, transparent 1.4px);
+  background-size: 22px 22px;
+  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000 20%, transparent 100%);
+  mask-image: radial-gradient(70% 70% at 70% 45%, #000 20%, transparent 100%);
+}
+.hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(36% 46% at 12% 26%, rgba(15, 159, 117, 0.13), transparent 70%),
+    radial-gradient(32% 42% at 86% 40%, rgba(79, 70, 229, 0.11), transparent 70%),
+    radial-gradient(30% 30% at 50% 100%, rgba(217, 119, 6, 0.08), transparent 70%);
+}
+.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; }
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 14px 7px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid var(--line);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent-deep);
+  box-shadow: var(--shadow-sm);
+}
+.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ping 2.2s infinite; }
+@keyframes ping {
+  0% { box-shadow: 0 0 0 0 rgba(15, 159, 117, 0.45); }
+  70% { box-shadow: 0 0 0 9px rgba(15, 159, 117, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(15, 159, 117, 0); }
+}
+.hero h1 { margin: 22px 0 22px; font-family: var(--serif); font-size: clamp(40px, 5.3vw, 68px); line-height: 1.04; font-weight: 600; letter-spacing: -0.025em; }
+.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent-deep); }
+.lede { max-width: 590px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--ink-2); }
+.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
+.hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
+.hero-points li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; color: var(--ink-2); }
+.hero-points li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 800; }
+.hero-visual { position: relative; width: 100%; max-width: 560px; margin: 0; justify-self: center; aspect-ratio: 1; }
+.hero-visual::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.95), rgba(15, 159, 117, 0.08) 58%, transparent 72%); }
+.morph-canvas { position: relative; display: block; width: 100%; height: 100%; }
+.morph-labels { position: absolute; left: 0; right: 0; bottom: 3%; height: 34px; }
+.ml { position: absolute; left: 50%; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; box-shadow: var(--shadow-sm); opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.5s, transform 0.5s var(--ease); }
+.ml.is-on { opacity: 1; transform: translate(-50%, 0); }
+
+/* Team strip */
+.team-strip { padding: 26px 0 28px; border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); text-align: center; }
+.team-title { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
+.team-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px; margin: 12px 0 0; padding: 0; list-style: none; }
+.team-list li { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink-2); }
+.team-more { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
+
+/* Sections */
+.section { padding: clamp(80px, 10vw, 124px) 0; }
+.section-tint { background: var(--tint); }
+.section-head { max-width: 780px; margin-bottom: 48px; }
+.kicker { margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.section h2 { font-family: var(--serif); font-size: clamp(32px, 3.7vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
+.sub { max-width: 700px; margin-top: 18px; font-size: 17.5px; color: var(--ink-2); }
+
+/* Why */
+.why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
+.stat-stack { display: grid; gap: 14px; }
+.stat { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
+.stat strong { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--accent-deep); white-space: nowrap; }
+.stat-warm strong { color: var(--warm); }
+.stat-cool strong { color: var(--mat); }
+.stat span { font-size: 14.5px; color: var(--ink-2); }
+
+/* Who */
+.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
+.field-card { position: relative; overflow: hidden; padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
+.field-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
+.field-card::after { content: ""; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 159, 117, 0.14), transparent 70%); }
+.field-mat::after { background: radial-gradient(circle, rgba(79, 70, 229, 0.13), transparent 70%); }
+.field-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-deep); }
+.field-mat .field-icon { background: var(--mat-soft); color: var(--mat); }
+.field-icon svg { width: 38px; height: 38px; }
+.field-card h3 { margin: 18px 0 8px; font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
+.field-card > p { font-size: 15.5px; color: var(--ink-2); }
+.field-card .tools-label { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
+.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
+.tool-chips li { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--tint-2); font: 500 12px var(--mono); color: var(--ink-2); }
+.who-note { margin-top: 24px; text-align: center; font-size: 15px; color: var(--muted); }
+
+/* Research explorer */
+.explorer { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
+.explorer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
+.field-toggle { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--tint); }
+.ft-btn { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 600 14px var(--font); color: var(--ink-2); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
+.ft-btn[aria-pressed="true"] { background: #fff; color: var(--accent-deep); box-shadow: var(--shadow-sm); }
+.explorer[data-field="mat"] .ft-btn[aria-pressed="true"] { color: var(--mat); }
+.explorer-hint { font-size: 14px; color: var(--muted); }
+html:not(.js) .explorer-top { display: none; }
+.explorer-panel { margin-top: 22px; }
+.explorer-panel[hidden] { display: none; }
+.panel-title { margin-bottom: 14px; font-family: var(--serif); font-size: 22px; font-weight: 600; }
+.is-enhanced .panel-title { display: none; }
+.stage + .stage { margin-top: 18px; }
+.is-enhanced .stage + .stage { margin-top: 0; }
+.stage[hidden] { display: none; }
+.stage-title { margin-bottom: 10px; font-size: 16px; }
+.is-enhanced .stage-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.stage-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
+.stage-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--tint-2); font: 600 13.5px/1.25 var(--font); color: var(--ink-2); text-align: left; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
+.stage-btn:hover { border-color: #d4cbb9; }
+.sb-num { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 700 12px var(--mono); color: var(--muted); }
+.stage-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
+.stage-btn[aria-pressed="true"] .sb-num { border-color: var(--accent); background: var(--accent); color: #fff; }
+.explorer[data-field="mat"] .stage-btn[aria-pressed="true"] .sb-num { border-color: var(--mat); background: var(--mat); }
+.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
+.sg { padding: 18px 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--tint-2); }
+.sg dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
+.sg dt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
+.sg-gap dt { color: var(--warm); }
+.sg-gap dt::before { background: #f59e0b; }
+.sg-build { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, #fff); }
+.sg-build dt { color: var(--accent-deep); }
+.sg-build dt::before { background: var(--accent); }
+.explorer[data-field="mat"] .sg-build { border-color: color-mix(in srgb, var(--mat) 22%, var(--line)); background: color-mix(in srgb, var(--mat) 6%, #fff); }
+.explorer[data-field="mat"] .sg-build dt { color: var(--mat); }
+.explorer[data-field="mat"] .sg-build dt::before { background: var(--mat); }
+.sg dd { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
+.is-enhanced .stage:not([hidden]) .sg { animation: sg-in 0.4s var(--ease) both; }
+.is-enhanced .stage:not([hidden]) .sg:nth-child(2) { animation-delay: 0.05s; }
+.is-enhanced .stage:not([hidden]) .sg:nth-child(3) { animation-delay: 0.1s; }
+@keyframes sg-in { from { opacity: 0; transform: translateY(8px); } }
+
+.questions { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 36px; margin-top: 40px; padding: 30px; border-radius: 24px; background: var(--tint); }
+.questions-head h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
+.questions-head p { margin-top: 10px; color: var(--muted); }
+.question-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
+.question-list li { position: relative; padding: 14px 16px 14px 48px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 15px; counter-increment: q; }
+.question-list li::before { content: counter(q); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font: 700 11.5px/1 var(--mono); }
+
+/* Demos */
+.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
+.ex-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 20px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
+}
+.ex-card:hover, .ex-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--dc) 35%, var(--line)); }
+.ex-card:focus-visible { outline: 2px solid var(--dc); outline-offset: 3px; }
+.ex-card.is-extra { display: none; }
+.ex-grid.show-all .ex-card.is-extra { display: flex; }
+.ex-thumb { position: relative; aspect-ratio: 740 / 394; overflow: hidden; border-bottom: 1px solid var(--line); background: #f7f8fb; }
+.ex-thumb > img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease, transform 0.6s var(--ease); }
+.ex-card:hover .ex-thumb > img { transform: scale(1.04); }
+.ex-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
+.ex-card-domain { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--dc) 80%, #0b1220); }
+.ex-card-domain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); }
+.ex-card h3 { margin: 8px 0 6px; font-size: 18px; letter-spacing: -0.02em; }
+.ex-card-body > p:not(.ex-card-domain) { font-size: 14px; color: var(--muted); }
+.ex-card-tracks { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
+.trk { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
+.trk-rel { background: var(--accent-soft); color: var(--accent-deep); }
+.trk-rel + .trk-rel { border: 1px solid var(--line); background: var(--tint-2); color: var(--ink-2); font-weight: 600; }
+.trk-mod { border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
+.ex-sw { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 14px 0 0; list-style: none; }
+.ex-sw li { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--tint-2); font: 500 11px var(--mono); color: var(--ink-2); }
+.ex-open { position: absolute; top: 12px; right: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(24, 32, 46, 0.86); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s var(--ease); }
+.ex-card:hover .ex-open, .ex-card:focus-visible .ex-open { opacity: 1; transform: none; }
+.ex-more { display: flex; justify-content: center; margin-top: 30px; }
+.ex-grid.show-all + .ex-more { display: none; }
+
+.ex-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; }
+.ex-modal[hidden] { display: none; }
+.ex-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 14, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.25s ease; }
+.ex-sheet {
+  position: relative;
+  width: min(1080px, 100%);
+  max-height: min(92vh, 980px);
+  overflow: auto;
+  border-radius: 24px;
+  background: var(--surface);
+  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.55);
+  animation: sheet-in 0.35s var(--ease);
+}
+@keyframes fade-in { from { opacity: 0; } }
+@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
+.ex-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
+.ex-domain { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--dc, #0f9f75) 80%, #0b1220); }
+.ex-domain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dc, #0f9f75); }
+.ex-head h3 { margin: 6px 0 10px; font-size: 24px; letter-spacing: -0.025em; }
+.ex-tracks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.ex-nav { display: flex; flex: none; gap: 8px; }
+.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 600 15px/1 var(--font); color: var(--ink); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
+.icon-btn:hover { border-color: #d4cbb9; background: var(--tint-2); }
+.ex-body { padding: 22px 26px 28px; }
+.ex-figure { margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #f7f8fb; }
+.ex-figure img { width: 100%; height: auto; }
+.ex-desc { margin-top: 18px; font-size: 16.5px; color: var(--ink-2); }
+.ex-why { margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-soft); font-size: 15px; color: var(--ink-2); }
+.ex-why strong { color: var(--accent-deep); }
+.ex-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
+.ex-facts > div { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--tint-2); }
+.ex-facts h4 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.ex-facts ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.ex-facts li { padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: #fff; font: 500 11.5px var(--mono); color: var(--ink-2); }
+.ex-how { margin: 18px 0 20px; padding-left: 14px; border-left: 3px solid var(--line); font-size: 15px; color: var(--muted); }
+body.modal-open { overflow: hidden; }
+
+/* Live demo previews */
+.ex-thumb.is-live > img { opacity: 0; }
+.ex-live, .ex-live-hero { overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--dc, #0f9f75) 13%, #fff) 0%, #fbfcfd 70%); }
+.ex-live { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
+.ex-thumb.is-live .ex-live { opacity: 1; }
+.ex-live-hero { position: relative; aspect-ratio: 16 / 7; border-bottom: 1px solid var(--line); }
+.ex-live-hero[hidden] { display: none; }
+.ex-evidence-label { padding: 12px 16px 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.ex-live-hero[hidden] + .ex-evidence-label { display: none; }
+.lv-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
+.lv-cap { position: absolute; left: 14px; bottom: 10px; z-index: 2; font: 500 11px var(--mono); color: var(--muted); }
+.ex-live-hero .lv-cap { left: 22px; bottom: 16px; font-size: 12px; }
+[data-kind="drc"] .lv-cap { left: 24px; bottom: 20px; color: #a7f3d0; }
+.ex-live-hero[data-kind="drc"] .lv-cap { left: 40px; bottom: 36px; }
+.lv-container { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; width: 74%; margin: auto; transition: opacity 0.3s; }
+.lv-fade .lv-container { opacity: 0; }
+.lv-code { margin-bottom: 4px; font: 600 12px var(--mono); color: #0d9488; }
+.lv-stack { display: grid; gap: 6px; }
+.lv-layer {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin-left: calc(var(--k) * 16px);
+  padding: 0 10px;
+  border-radius: 7px;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  background: linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.05));
+  font: 500 11px var(--mono);
+  color: var(--ink-2);
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.35s, transform 0.35s var(--ease);
+}
+.lv-layer.on { opacity: 1; transform: none; }
+.lv-hash { min-height: 1.6em; margin-top: 6px; font: 500 11px var(--mono); color: var(--muted); }
+.ex-live-hero .lv-container { width: 54%; gap: 8px; }
+.ex-live-hero .lv-layer { height: 34px; margin-left: calc(var(--k) * 26px); font-size: 13px; }
+.ex-live-hero .lv-code, .ex-live-hero .lv-hash { font-size: 13.5px; }
+.lv-images { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; }
+.lv-cell { position: relative; overflow: hidden; border-radius: 12px; background: #e9eef2; box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.4); }
+.lv-cell img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0; transition: opacity 0.6s ease; }
+.lv-cell img.on { opacity: 1; }
+.lv-micro .lv-cell { width: 25%; aspect-ratio: 1; }
+.lv-astro .lv-cell { width: 18.5%; aspect-ratio: 1; border-radius: 8px; box-shadow: 0 0 30px -6px rgba(249, 140, 10, 0.5); }
+.lv-ocr .lv-cell { width: 84%; aspect-ratio: 237 / 82; border-radius: 8px; }
+.lv-color { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; align-content: center; justify-content: center; }
+.lv-color .lv-cell { width: 62px; height: 62px; border-radius: 10px; transition: transform 0.35s var(--ease), box-shadow 0.35s; }
+.lv-color .lv-cell.hot { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dc, #7c3aed), 0 14px 26px -12px rgba(15, 23, 42, 0.5); }
+.ex-live-hero .lv-color .lv-cell { width: 92px; height: 92px; }
+.lv-swatch { position: absolute; right: 5px; bottom: 5px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
+.lv-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 2px; background: var(--dc, #0f9f75); box-shadow: 0 0 14px 2px var(--dc, #0f9f75); animation: lv-scan 2.6s ease-in-out infinite; }
+@keyframes lv-scan { 0%, 100% { top: 0; } 50% { top: calc(100% - 2px); } }
+.lv-aperture { position: absolute; left: 50%; top: 50%; z-index: 1; width: 40%; aspect-ratio: 1; border: 1.5px solid rgba(255, 255, 255, 0.92); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); animation: lv-aperture 2.6s ease-in-out infinite; }
+.lv-aperture::before, .lv-aperture::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 255, 255, 0.85); transform: translate(-50%, -50%); }
+.lv-aperture::before { width: 140%; height: 1px; }
+.lv-aperture::after { width: 1px; height: 140%; }
+@keyframes lv-aperture { 0%, 100% { width: 30%; } 50% { width: 58%; } }
+
+/* Research computing replays */
+.chores { margin-top: 72px; }
+.chores-head { max-width: 720px; margin-bottom: 22px; }
+.chores-head h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
+.chores-head p { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
+.tx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
+.tx-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 20px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
+}
+.tx-card:hover, .tx-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(15, 159, 117, 0.4); }
+.tx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.tx-card .ex-open { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); }
+.tx-card:hover .ex-open, .tx-card:focus-visible .ex-open { opacity: 1; transform: none; }
+.tx-term { overflow: hidden; background: #0b1220; }
+.tx-card .tx-term { border-bottom: 1px solid #1e293b; }
+.tx-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #1e293b; background: #0f172a; }
+.tx-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #334155; }
+.tx-bar i:nth-child(1) { background: #f26b5b; }
+.tx-bar i:nth-child(2) { background: #f5b84b; }
+.tx-bar i:nth-child(3) { background: #34d399; }
+.tx-bar em { min-width: 0; margin-left: 8px; overflow: hidden; font: 500 11px var(--mono); font-style: normal; color: #8b9ab0; white-space: nowrap; text-overflow: ellipsis; }
+.tx-screen { height: 200px; margin: 0; padding: 12px 16px; overflow: hidden; font: 11.5px/1.65 var(--mono); color: #e2e8f0; }
+.tx-screen code { white-space: normal; }
+.tx-screen span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.tx-screen b { color: #34d399; font-weight: 600; }
+.tx-screen .tx-sys { margin-top: 6px; color: #a5b4fc; }
+.tx-screen .tx-ok { color: #34d399; font-weight: 600; }
+.tx-caret { display: inline-block; width: 7px; height: 1.15em; margin-left: 2px; vertical-align: -3px; background: #34d399; animation: tx-caret 1s steps(1) infinite; }
+@keyframes tx-caret { 50% { opacity: 0; } }
+.tx-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
+.tx-area { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-deep); }
+.tx-area::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
+.tx-card h3 { margin: 8px 0 6px; font-size: 18px; letter-spacing: -0.02em; }
+.tx-body > p:not(.tx-area) { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
+.tx-body code, .txm-instruction code { padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); background: #fff; font: 500 0.86em var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
+.tx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 14px 0 0; list-style: none; }
+.tx-meta li { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--tint-2); font: 500 11px var(--mono); color: var(--ink-2); }
+.txm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+.txm-h { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.txm-h code { font: inherit; text-transform: none; letter-spacing: 0; }
+.txm-col .tx-term + .txm-h { margin-top: 20px; }
+.txm-instruction { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--tint-2); font-size: 15px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
+.txm-instruction p + p { margin-top: 6px; }
+.txm-facts { margin: 16px 0 0; }
+.txm-facts div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
+.txm-facts dt { padding-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.txm-facts dd { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
+.tx-term-lg { border-radius: 14px; border: 1px solid #1e293b; }
+.tx-term-lg .tx-screen { height: 236px; font-size: 12px; }
+.txm-code { max-height: 300px; margin: 0; padding: 14px 16px; overflow: auto; border-radius: 14px; background: #0b1220; color: #cbd5e1; font: 11.5px/1.65 var(--mono); white-space: pre; }
+#txm-cta { margin-top: 22px; }
+
+/* Collaboration */
+.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
+.steps::before { content: ""; position: absolute; left: 26px; right: calc(25% - 40px); top: 25px; height: 2px; background: repeating-linear-gradient(90deg, #d6cdbb 0 8px, transparent 8px 14px); }
+.step { position: relative; padding-right: 8px; }
+.step-num { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--accent-deep); }
+.step:last-child .step-num { border-color: var(--accent); background: var(--accent); color: #fff; }
+.step h3 { margin: 16px 0 6px; font-size: 19px; letter-spacing: -0.015em; }
+.step p { font-size: 15px; color: var(--ink-2); }
+.collab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
+.give-card { padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
+.give-card h3 { margin-bottom: 14px; font-family: var(--serif); font-size: 24px; font-weight: 600; }
+.give-card-accent { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, #fff), #fff 72%); }
+.check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
+.check-list li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
+.check-list li::before { content: "✓"; flex: none; color: var(--accent); font-weight: 800; }
+.ways { margin-top: 20px; padding: 24px 28px; border-radius: 22px; border: 1px dashed #d6cdbb; background: rgba(255, 255, 255, 0.6); }
+.ways h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
+.ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
+.way-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
+.way p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
+
+/* Papers */
+.paper-list { display: grid; gap: 22px; }
+.paper { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; padding: 30px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
+.paper-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
+.paper-tag { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; font-weight: 700; }
+.paper h3 { margin: 12px 0 8px; font-family: var(--serif); font-size: clamp(22px, 2.1vw, 27px); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; }
+.paper h3 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.2s, text-decoration-color 0.2s; }
+.paper h3 a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }
+.paper-authors { font-size: 14px; color: var(--muted); }
+.paper-summary { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); }
+.paper-you { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--tint-2); font-size: 14.5px; color: var(--ink-2); }
+.paper-you strong { color: var(--ink); }
+.paper-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
+.paper-results { align-self: start; padding: 20px 22px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--tint-2); }
+.paper-results h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.res { margin-top: 16px; }
+.res-label { margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
+.rb { display: grid; gap: 3px; margin-top: 7px; }
+.rb span { order: -1; font: 500 12px var(--mono); color: var(--ink-2); }
+.rb i { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 999px; background: rgba(24, 32, 46, 0.07); }
+.rb i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 1%); min-width: 4px; border-radius: inherit; background: #b8c0cc; transform-origin: left; }
+.rb-ours i::after { background: linear-gradient(90deg, var(--accent), #14b8a6); }
+.rb-warm i::after { background: linear-gradient(90deg, #f59e0b, #ea580c); }
+.js .paper .rb i::after { transform: scaleX(0); transition: transform 1s var(--ease) 0.25s; }
+.js .paper.is-visible .rb i::after { transform: none; }
+
+/* FAQ */
+.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
+.faq-list { display: grid; gap: 10px; }
+.faq-list details { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
+.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 16.5px; font-weight: 600; list-style: none; cursor: pointer; }
+.faq-list summary::-webkit-details-marker { display: none; }
+.faq-list summary::after { content: "+"; display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); font-size: 18px; font-weight: 500; color: var(--ink-2); transition: transform 0.25s var(--ease); }
+.faq-list details[open] summary::after { transform: rotate(45deg); }
+.faq-list details p { padding: 0 20px 18px; font-size: 15.5px; color: var(--ink-2); }
+
+/* Join */
+.join {
+  color: #e8ecf2;
+  background:
+    radial-gradient(60% 80% at 0% 0%, rgba(15, 159, 117, 0.18), transparent 60%),
+    radial-gradient(50% 70% at 100% 100%, rgba(79, 70, 229, 0.16), transparent 60%),
+    var(--dark);
+}
+.join .kicker { color: #6ee7b7; }
+.join h2 { color: #fff; }
+.join .sub { color: #b9c2cf; }
+.join-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
+.join-alt { margin-top: 22px; font-size: 15px; color: #b9c2cf; }
+.mail-link { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; overflow-wrap: anywhere; }
+.join-form { display: grid; gap: 16px; padding: 28px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); }
+.join-form > label, .row2 > label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
+.join-form input:not([type="radio"]):not([type="checkbox"]), .join-form textarea { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--tint-2); font: 400 15px/1.45 var(--font); color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
+.join-form textarea { min-height: 84px; resize: vertical; }
+.join-form input:focus, .join-form textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
+.join-form input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
+.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.pill-set { margin: 0; padding: 0; border: 0; }
+.pill-set legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; }
+.pills { display: flex; flex-wrap: wrap; gap: 8px; }
+.pills label { position: relative; display: inline-flex; cursor: pointer; }
+.pills input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.pills span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--tint-2); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
+.pills input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
+.pills input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
+.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
+.form-note { flex: 1 1 220px; font-size: 13.5px; color: var(--muted); }
+
+/* Footer */
+.footer { padding: 30px 0 34px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: #10151f; color: #9aa4b2; }
+.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
+.footer .brand { color: #fff; }
+.footer .brand em { border-color: rgba(255, 255, 255, 0.2); color: #9aa4b2; }
+.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
+.footer-links a:hover { color: #fff; }
+.footer-note { width: 100%; font-size: 12.5px; color: #6b7686; }
+
+/* Scroll reveal */
+.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
+.js .reveal.is-visible { opacity: 1; transform: none; }
+.field-grid .reveal:nth-child(2), .collab-grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 0.08s; }
+.steps .reveal:nth-child(3) { transition-delay: 0.16s; }
+.steps .reveal:nth-child(4) { transition-delay: 0.24s; }
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .nav-links { display: none; }
+  .nav-toggle { display: inline-flex; }
+  .nav-cta .btn { display: none; }
+  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .hero-visual { max-width: 440px; }
+  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
+  .stage-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
+  .stage-tabs::-webkit-scrollbar { display: none; }
+  .questions { grid-template-columns: minmax(0, 1fr); gap: 20px; }
+  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ex-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .txm-grid { grid-template-columns: minmax(0, 1fr); }
+  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
+  .steps::before { display: none; }
+  .paper { grid-template-columns: minmax(0, 1fr); gap: 22px; }
+  .faq-grid, .join-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
+}
+
+@media (max-width: 760px) {
+  .field-grid, .collab-grid, .ways-grid, .question-list, .stage-grid { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (max-width: 640px) {
+  .container { width: min(1200px, 100% - 36px); }
+  .brand em { display: none; }
+  .hero-visual { max-width: 340px; }
+  .stat { grid-template-columns: minmax(0, 1fr); gap: 6px; }
+  .explorer { padding: 18px; border-radius: 20px; }
+  .questions { padding: 22px 18px; }
+  .field-card, .give-card, .paper { padding: 22px; }
+  .ex-grid, .ex-facts, .tx-grid, .steps, .row2 { grid-template-columns: minmax(0, 1fr); }
+  .ex-modal { padding: 10px; }
+  .ex-sheet { max-height: 100%; border-radius: 18px; }
+  .ex-head { padding: 16px 16px 14px; }
+  .ex-head h3 { font-size: 20px; }
+  .ex-body { padding: 16px; }
+  .txm-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+  .join-form { padding: 20px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
+}

terminal.js

@@ -0,0 +1,418 @@
+(() => {
+  'use strict';
+
+  const $ = (sel, root = document) => root.querySelector(sel);
+  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  const source = $('#terminal-data');
+  if (!source) return;
+  let DATA;
+  try {
+    DATA = JSON.parse(source.textContent);
+  } catch (err) {
+    return;
+  }
+
+  const contactHref = (subject) => {
+    const link = $('[data-contact]');
+    const href = link ? link.getAttribute('href') || '' : '';
+    const address = href.startsWith('mailto:') ? href.slice(7).split('?')[0] : '';
+    return address ? `mailto:${address}?subject=${encodeURIComponent(subject)}` : '#contact';
+  };
+
+  const VERIFY = [
+    ['tx-sys', 'Running verifier in a fresh sandbox…'],
+    ['tx-ok', '✓ All checks passed'],
+  ];
+
+  class Replayer {
+    constructor(screen, lines) {
+      this.screen = screen;
+      this.code = $('code', screen) || screen;
+      this.lines = lines;
+      this.timer = 0;
+      this.running = false;
+      this.caret = document.createElement('i');
+      this.caret.className = 'tx-caret';
+      this.reset();
+    }
+
+    reset() {
+      this.code.replaceChildren();
+      this.line = 0;
+      this.char = 0;
+      this.phase = 'type';
+      this.verified = 0;
+      this.text = null;
+    }
+
+    prompt(symbol) {
+      const span = document.createElement('span');
+      span.className = 'tx-cmd';
+      const b = document.createElement('b');
+      b.textContent = symbol;
+      const text = document.createTextNode('');
+      span.append(b, ' ', text);
+      this.code.append(span);
+      return { span, text };
+    }
+
+    status(cls, message) {
+      const span = document.createElement('span');
+      span.className = cls;
+      span.textContent = message;
+      this.code.append(span);
+    }
+
+    renderStatic() {
+      this.stop();
+      this.reset();
+      this.lines.forEach(([symbol, line]) => {
+        this.prompt(symbol).text.data = line;
+      });
+      VERIFY.forEach(([cls, message]) => this.status(cls, message));
+    }
+
+    start(delay = 0) {
+      if (this.running) return;
+      this.running = true;
+      this.schedule(delay);
+    }
+
+    stop() {
+      this.running = false;
+      clearTimeout(this.timer);
+    }
+
+    schedule(ms) {
+      clearTimeout(this.timer);
+      if (this.running) this.timer = setTimeout(() => this.tick(), ms);
+    }
+
+    scroll() {
+      this.screen.scrollTop = this.screen.scrollHeight;
+    }
+
+    tick() {
+      if (!this.running) return;
+      if (this.phase === 'type') {
+        if (this.line >= this.lines.length) {
+          this.caret.remove();
+          this.phase = 'verify';
+          this.schedule(420);
+          return;
+        }
+        const [symbol, line] = this.lines[this.line];
+        if (!this.text) {
+          const { span, text } = this.prompt(symbol);
+          span.append(this.caret);
+          this.text = text;
+          this.scroll();
+          this.schedule(160);
+          return;
+        }
+        this.char = Math.min(line.length, this.char + Math.max(1, Math.ceil(line.length / 40)));
+        this.text.data = line.slice(0, this.char);
+        if (this.char >= line.length) {
+          this.line += 1;
+          this.char = 0;
+          this.text = null;
+          this.scroll();
+          this.schedule(300);
+          return;
+        }
+        this.schedule(22);
+        return;
+      }
+      if (this.phase === 'verify') {
+        if (this.verified >= VERIFY.length) {
+          this.prompt('$').span.append(this.caret);
+          this.scroll();
+          this.phase = 'hold';
+          this.schedule(3200);
+          return;
+        }
+        const [cls, message] = VERIFY[this.verified];
+        this.verified += 1;
+        this.status(cls, message);
+        this.scroll();
+        this.schedule(this.verified === 1 ? 1000 : 200);
+        return;
+      }
+      this.reset();
+      this.schedule(260);
+    }
+  }
+
+  function initCards(tasks) {
+    const grid = $('#tx-grid');
+    if (!grid) return;
+    const cards = $$('.tx-card', grid);
+    const players = cards.map((card) => {
+      const task = tasks[Number(card.dataset.index)];
+      return task ? new Replayer($('.tx-screen', card), task.replay) : null;
+    });
+
+    if (reduceMotion || !('IntersectionObserver' in window)) {
+      players.forEach((p) => p && p.renderStatic());
+    } else {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          const i = cards.indexOf(entry.target);
+          const player = players[i];
+          if (!player) return;
+          if (entry.isIntersecting) {
+            player.start(player.started ? 0 : (i % 3) * 450);
+            player.started = true;
+          } else {
+            player.stop();
+          }
+        });
+      }, { threshold: 0.25 });
+      cards.forEach((card) => observer.observe(card));
+    }
+
+    const more = $('#tx-more');
+    const extras = cards.filter((card) => card.classList.contains('is-extra'));
+    if (more) {
+      if (!extras.length) more.hidden = true;
+      more.textContent = `Show ${extras.length} more terminal tasks`;
+      more.addEventListener('click', () => {
+        grid.classList.add('show-all');
+        more.setAttribute('aria-expanded', 'true');
+        if (extras[0]) extras[0].focus({ preventScroll: true });
+      });
+    }
+    return cards;
+  }
+
+  function initModal(tasks, cards) {
+    const modal = $('#tx-modal');
+    if (!modal || !cards) return;
+    const sheet = $('.ex-sheet', modal);
+    const closeButton = $('.icon-btn[data-tx-close]', modal);
+    const field = (id) => document.getElementById(id);
+    const f = {
+      area: field('txm-area'),
+      title: field('txm-title'),
+      tags: field('txm-tags'),
+      instruction: field('txm-instruction'),
+      base: field('txm-base'),
+      termBase: field('txm-term-base'),
+      lines: field('txm-lines'),
+      replay: field('txm-replay'),
+      code: field('txm-code'),
+      cta: field('txm-cta'),
+    };
+    let current = 0;
+    let lastFocus = null;
+    let player = null;
+
+    const play = () => {
+      if (player) player.stop();
+      player = new Replayer(f.replay, tasks[current].replay);
+      if (reduceMotion) player.renderStatic();
+      else player.start(250);
+    };
+
+    const render = (index) => {
+      current = (index + tasks.length) % tasks.length;
+      const t = tasks[current];
+      f.area.textContent = t.area;
+      f.title.textContent = t.title;
+      f.tags.replaceChildren(...t.tags.map((tag) => {
+        const li = document.createElement('li');
+        li.className = 'trk trk-mod';
+        li.textContent = tag;
+        return li;
+      }));
+      f.instruction.innerHTML = t.instruction;
+      f.base.textContent = t.base;
+      f.termBase.textContent = t.base;
+      f.lines.textContent = `${t.lines}-line solve.sh`;
+      f.code.textContent = t.code;
+      f.code.scrollTop = 0;
+      f.cta.href = contactHref(`${modal.dataset.subject || 'Terminal task sample'}: ${t.title}`);
+      sheet.scrollTop = 0;
+      if (!modal.hidden) play();
+    };
+
+    const open = (index) => {
+      lastFocus = document.activeElement;
+      modal.hidden = false;
+      render(index);
+      document.body.classList.add('modal-open');
+      closeButton.focus();
+    };
+    const close = () => {
+      modal.hidden = true;
+      if (player) player.stop();
+      document.body.classList.remove('modal-open');
+      if (lastFocus) lastFocus.focus({ preventScroll: true });
+    };
+
+    cards.forEach((card) => {
+      const index = Number(card.dataset.index);
+      card.addEventListener('click', () => open(index));
+      card.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          open(index);
+        }
+      });
+    });
+    $$('[data-tx-close]', modal).forEach((el) => el.addEventListener('click', close));
+    $('[data-tx-prev]', modal).addEventListener('click', () => render(current - 1));
+    $('[data-tx-next]', modal).addEventListener('click', () => render(current + 1));
+
+    document.addEventListener('keydown', (e) => {
+      if (modal.hidden) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        close();
+      } else if (e.key === 'ArrowRight') {
+        render(current + 1);
+      } else if (e.key === 'ArrowLeft') {
+        render(current - 1);
+      } else if (e.key === 'Tab') {
+        const focusables = $$('button, a[href]', sheet);
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    });
+  }
+
+  function initGrowth(growth) {
+    const root = $('#growth');
+    if (!root || !growth || !growth.stages || !growth.stages.length) return;
+    const stages = growth.stages;
+    const steps = $('#growth-steps');
+    const instruction = $('#growth-instruction');
+    const linesEl = $('#growth-lines');
+    const wordsEl = $('#growth-words');
+    const linesBar = $('#growth-lines-bar');
+    const wordsBar = $('#growth-words-bar');
+    const spark = $('#growth-spark');
+    const maxLines = Math.max(...stages.map((s) => s.lines));
+    const maxWords = Math.max(...stages.map((s) => s.words));
+    const svgNS = 'http://www.w3.org/2000/svg';
+
+    const W = 240;
+    const H = 72;
+    const P = 6;
+    const xs = stages.map((_, i) => P + (i * (W - 2 * P)) / Math.max(1, stages.length - 1));
+    const ys = stages.map((s) => H - P - ((H - 2 * P) * s.lines) / maxLines);
+    const pts = xs.map((x, i) => `${x.toFixed(1)},${ys[i].toFixed(1)}`).join(' ');
+    const make = (tag, attrs) => {
+      const node = document.createElementNS(svgNS, tag);
+      Object.entries(attrs).forEach(([k, v]) => node.setAttribute(k, v));
+      spark.append(node);
+      return node;
+    };
+    spark.replaceChildren();
+    make('polygon', { class: 'gs-area', points: `${P},${H - P} ${pts} ${W - P},${H - P}` });
+    make('polyline', { class: 'gs-line', points: pts });
+    const guide = make('line', { class: 'gs-guide', x1: 0, x2: 0, y1: 2, y2: H - 2 });
+    const dots = xs.map((x, i) => make('circle', { class: 'gs-dot', cx: x.toFixed(1), cy: ys[i].toFixed(1), r: 3 }));
+
+    let index = 0;
+    let shown = { lines: 0, words: 0 };
+    let tween = 0;
+    const countTo = (target) => {
+      cancelAnimationFrame(tween);
+      const from = { ...shown };
+      const t0 = performance.now();
+      const step = (now) => {
+        const k = reduceMotion ? 1 : Math.min(1, (now - t0) / 600);
+        const e = 1 - (1 - k) ** 3;
+        shown = {
+          lines: Math.round(from.lines + (target.lines - from.lines) * e),
+          words: Math.round(from.words + (target.words - from.words) * e),
+        };
+        linesEl.textContent = `${shown.lines} lines`;
+        wordsEl.textContent = `${shown.words} words`;
+        if (k < 1) tween = requestAnimationFrame(step);
+      };
+      tween = requestAnimationFrame(step);
+    };
+
+    const buttons = stages.map((_, i) => {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'gstep';
+      b.setAttribute('aria-label', `Stage ${i + 1} of ${stages.length}`);
+      b.innerHTML = `<span>Stage</span><strong>${i + 1}</strong>`;
+      b.addEventListener('click', () => {
+        setAuto(false);
+        show(i);
+      });
+      return b;
+    });
+    const toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.className = 'gplay';
+    steps.replaceChildren(...buttons, toggle);
+
+    const show = (i) => {
+      index = i;
+      const stage = stages[i];
+      buttons.forEach((b, k) => {
+        b.setAttribute('aria-pressed', String(k === i));
+        b.classList.toggle('is-done', k < i);
+      });
+      const text = document.createElement('p');
+      text.className = 'g-text';
+      text.innerHTML = stage.segments.map((s) => (s.new ? `<mark>${s.html}</mark>` : s.html)).join(' ');
+      instruction.replaceChildren(text);
+      linesBar.style.width = `${((100 * stage.lines) / maxLines).toFixed(1)}%`;
+      wordsBar.style.width = `${((100 * stage.words) / maxWords).toFixed(1)}%`;
+      countTo(stage);
+      dots.forEach((d, k) => {
+        d.classList.toggle('is-on', k <= i);
+        d.setAttribute('r', k === i ? 5 : 3);
+      });
+      guide.style.transform = `translateX(${xs[i].toFixed(1)}px)`;
+    };
+
+    let auto = !reduceMotion;
+    let visible = false;
+    let timer = 0;
+    const schedule = () => {
+      clearTimeout(timer);
+      if (!auto || !visible) return;
+      timer = setTimeout(() => {
+        show(index === stages.length - 1 ? 0 : index + 1);
+        schedule();
+      }, index === stages.length - 1 ? 6000 : 4200);
+    };
+    const setAuto = (on) => {
+      auto = on;
+      toggle.textContent = on ? 'Pause' : 'Play';
+      toggle.setAttribute('aria-label', on ? 'Pause stage autoplay' : 'Play stages automatically');
+      schedule();
+    };
+    toggle.addEventListener('click', () => setAuto(!auto));
+
+    show(0);
+    setAuto(auto);
+    if ('IntersectionObserver' in window) {
+      new IntersectionObserver((entries) => {
+        visible = entries[0].isIntersecting;
+        schedule();
+      }, { threshold: 0.35 }).observe(root);
+    }
+  }
+
+  const tasks = DATA.tasks || [];
+  const cards = initCards(tasks);
+  initModal(tasks, cards);
+  initGrowth(DATA.growth);
+})();