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: Website
-emoji: 🌖
-colorFrom: yellow
-colorTo: purple
+title: IntelligenceLab
+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 website: verified terminal, coding, and multimodal training data for agents. Static site (`index.html`, `styles.css`, `app.js`, `live.js`, `assets/`).

app.js

@@ -0,0 +1,737 @@
+(() => {
+  'use strict';
+
+  // Where "Email us" and "Contact" links send inquiries. Replace before publishing.
+  const CONTACT_EMAIL = 'contact@example.com';
+
+  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 clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+  const rand = (lo, hi) => lo + Math.random() * (hi - lo);
+
+  function initContact() {
+    $$('[data-contact]').forEach((link) => {
+      const subject = encodeURIComponent(link.dataset.subject || 'Hello');
+      link.href = `mailto:${CONTACT_EMAIL}?subject=${subject}`;
+    });
+    $$('[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.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 initTabs() {
+    const tabs = $$('[role="tab"]');
+    if (!tabs.length) return;
+    const panels = tabs.map((tab) => document.getElementById(tab.getAttribute('aria-controls')));
+
+    const select = (index, focus) => {
+      tabs.forEach((tab, i) => {
+        const on = i === index;
+        tab.setAttribute('aria-selected', String(on));
+        tab.tabIndex = on ? 0 : -1;
+        panels[i].hidden = !on;
+        panels[i].classList.toggle('is-active', on);
+      });
+      if (focus) tabs[index].focus();
+      tabs[index].scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: reduceMotion ? 'auto' : 'smooth' });
+    };
+
+    tabs.forEach((tab, i) => {
+      tab.addEventListener('click', () => select(i, false));
+      tab.addEventListener('keydown', (e) => {
+        const keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+        if (e.key in keys) {
+          e.preventDefault();
+          select((i + keys[e.key] + tabs.length) % tabs.length, true);
+        } else if (e.key === 'Home' || e.key === 'End') {
+          e.preventDefault();
+          select(e.key === 'Home' ? 0 : tabs.length - 1, true);
+        }
+      });
+    });
+  }
+
+  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 examples`;
+      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'),
+      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) => {
+      ul.replaceChildren(...items.map(({ text, cls }) => {
+        const li = document.createElement('li');
+        li.textContent = text;
+        if (cls) li.className = cls;
+        return li;
+      }));
+    };
+    const plain = (items) => items.map((text) => ({ text }));
+
+    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;
+      const tracks = ex.tracks.map((t) => ({ text: t, cls: `trk trk-${t.toLowerCase()}` }));
+      if (ex.modality) tracks.push({ text: ex.modality, cls: 'trk trk-mod' });
+      listItems(fields.tracks, tracks);
+      fields.img.src = ex.img;
+      fields.img.alt = ex.alt;
+      fields.desc.textContent = ex.description;
+      listItems(fields.software, plain(ex.software));
+      listItems(fields.artifacts, plain(ex.artifacts));
+      listItems(fields.axes, plain(ex.axes));
+      listItems(fields.outputs, plain(ex.outputs));
+      fields.cta.href = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(`Sample request: ${ex.title}`)}`;
+      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]);
+    });
+
+    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 initWaves() {
+    $$('path[data-wave]').forEach((path) => {
+      const [amp, decay, freq, phase] = path.dataset.wave.split(/\s+/).map(Number);
+      const points = [];
+      for (let i = 0; i <= 120; i += 1) {
+        const t = (3 * i) / 120;
+        const x = 40 + (296 * i) / 120;
+        const y = 104 - amp * Math.exp(-decay * t) * Math.cos(freq * t + phase);
+        points.push(`${x.toFixed(1)},${y.toFixed(1)}`);
+      }
+      path.setAttribute('d', `M${points.join('L')}`);
+      if (path.classList.contains('wave-recon')) path.setAttribute('pathLength', '1');
+    });
+  }
+
+  function initLadder() {
+    const svg = $('#ladder-chart');
+    const slider = $('#ladder-strength');
+    const readout = $('#ladder-readout');
+    const label = $('#ladder-strength-label');
+    if (!svg || !slider || !readout || !label) return;
+
+    const NS = 'http://www.w3.org/2000/svg';
+    // Reference-solver measurements (pass@4) by synthesis round.
+    const ANCHORS = [[1, 0.9], [6, 0.2], [15, 0.025]];
+    const ROUNDS = 15;
+    const LOW = 0.1;
+    const HIGH = 0.5;
+    const logit = (p) => Math.log(p / (1 - p));
+    const sigmoid = (z) => 1 / (1 + Math.exp(-z));
+    const baseLogit = (r) => {
+      for (let i = 0; i < ANCHORS.length - 1; i += 1) {
+        const [r0, p0] = ANCHORS[i];
+        const [r1, p1] = ANCHORS[i + 1];
+        if (r <= r1) return logit(p0) + ((r - r0) / (r1 - r0)) * (logit(p1) - logit(p0));
+      }
+      return logit(ANCHORS[ANCHORS.length - 1][1]);
+    };
+
+    const W = 640;
+    const H = 330;
+    const m = { l: 46, r: 14, t: 18, b: 46 };
+    const pw = W - m.l - m.r;
+    const ph = H - m.t - m.b;
+    const xOf = (r) => m.l + ((r - 0.5) / ROUNDS) * pw;
+    const yOf = (p) => m.t + (1 - p) * ph;
+    const barW = (pw / ROUNDS) * 0.6;
+    svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
+
+    const add = (tag, attrs, text) => {
+      const node = document.createElementNS(NS, tag);
+      Object.entries(attrs).forEach(([k, v]) => node.setAttribute(k, String(v)));
+      if (text != null) node.textContent = text;
+      svg.appendChild(node);
+      return node;
+    };
+
+    [0, 0.25, 0.5, 0.75, 1].forEach((v) => {
+      add('line', { x1: m.l, x2: m.l + pw, y1: yOf(v), y2: yOf(v), class: 'grid' });
+      add('text', { x: m.l - 10, y: yOf(v) + 4, class: 'tick', 'text-anchor': 'end' }, `${v * 100}%`);
+    });
+    add('rect', { x: m.l, y: yOf(HIGH), width: pw, height: yOf(LOW) - yOf(HIGH), class: 'zone' });
+    add('line', { x1: m.l, x2: m.l + pw, y1: yOf(HIGH), y2: yOf(HIGH), class: 'zone-edge' });
+    add('line', { x1: m.l, x2: m.l + pw, y1: yOf(LOW), y2: yOf(LOW), class: 'zone-edge' });
+
+    const bars = [];
+    for (let r = 1; r <= ROUNDS; r += 1) {
+      bars.push(add('rect', { x: xOf(r) - barW / 2, y: yOf(0), width: barW, height: 0, rx: 3, class: 'bar' }));
+      add('text', { x: xOf(r), y: H - m.b + 18, class: 'tick', 'text-anchor': 'middle' }, String(r));
+    }
+    add('text', { x: m.l + pw / 2, y: H - 6, class: 'axis-label', 'text-anchor': 'middle' }, 'Synthesis round (harder →)');
+
+    let d = '';
+    for (let r = 1; r <= ROUNDS + 1e-9; r += 0.2) {
+      d += `${d ? 'L' : 'M'}${xOf(r).toFixed(1)},${yOf(sigmoid(baseLogit(r))).toFixed(1)}`;
+    }
+    add('path', { d, class: 'ref-line' });
+    ANCHORS.forEach(([r, p]) => {
+      add('circle', { cx: xOf(r), cy: yOf(p), r: 5, class: 'anchor' });
+      const lastRound = r === ROUNDS;
+      add('text', {
+        x: xOf(r) + (lastRound ? -10 : 10),
+        y: yOf(p) - 10,
+        class: 'anchor-label',
+        'text-anchor': lastRound ? 'end' : 'start',
+      }, `${+(p * 100).toFixed(1)}%`);
+    });
+
+    const current = bars.map(() => 0);
+    let target = bars.map(() => 0);
+    let frame = 0;
+    let started = false;
+
+    const drawBars = (values) => {
+      values.forEach((p, i) => {
+        const top = yOf(p);
+        bars[i].setAttribute('y', top.toFixed(2));
+        bars[i].setAttribute('height', Math.max(0, yOf(0) - top).toFixed(2));
+      });
+    };
+    const tick = () => {
+      let moving = false;
+      for (let i = 0; i < current.length; i += 1) {
+        const delta = target[i] - current[i];
+        if (Math.abs(delta) > 0.0005) {
+          current[i] += delta * 0.2;
+          moving = true;
+        } else {
+          current[i] = target[i];
+        }
+      }
+      drawBars(current);
+      frame = moving ? requestAnimationFrame(tick) : 0;
+    };
+    const kick = () => {
+      if (reduceMotion) {
+        target.forEach((p, i) => { current[i] = p; });
+        drawBars(current);
+      } else if (!frame) {
+        frame = requestAnimationFrame(tick);
+      }
+    };
+
+    const update = () => {
+      const shift = Number(slider.value);
+      target = bars.map((_, i) => sigmoid(baseLogit(i + 1) + shift));
+      const zone = [];
+      target.forEach((p, i) => {
+        const inZone = p >= LOW && p <= HIGH;
+        bars[i].classList.toggle('in-zone', inZone);
+        if (inZone) zone.push(i + 1);
+      });
+      if (Math.abs(shift) < 0.05) label.textContent = 'Reference solver';
+      else label.textContent = shift > 0 ? 'Stronger than reference' : 'Weaker than reference';
+
+      if (zone.length) {
+        const span = zone.length === 1 ? `round ${zone[0]}` : `rounds ${zone[0]}–${zone[zone.length - 1]}`;
+        readout.innerHTML = `Next batch: <strong>${span}</strong>, where this model succeeds 10–50% of the time.`;
+      } else if (target[ROUNDS - 1] > HIGH) {
+        readout.innerHTML = 'This model has outgrown the ladder: <strong>we synthesize further rounds</strong>.';
+      } else {
+        readout.innerHTML = '<strong>Start with warm-up tiers</strong> and calibrate upward.';
+      }
+      if (started) kick();
+    };
+
+    slider.addEventListener('input', update);
+    update();
+
+    const begin = () => {
+      started = true;
+      kick();
+    };
+    if (reduceMotion || !('IntersectionObserver' in window)) {
+      begin();
+    } else {
+      const observer = new IntersectionObserver((entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        observer.disconnect();
+        begin();
+      }, { threshold: 0.3 });
+      observer.observe(svg);
+    }
+  }
+
+  function initHero() {
+    const hero = $('.hero');
+    const canvas = hero && $('.hero-canvas', hero);
+    if (!canvas || !canvas.getContext) return;
+    const ctx = canvas.getContext('2d');
+    const copy = $('.hero-copy', hero);
+    const badges = $$('.tier-badges li', hero);
+
+    const TIER_RGB = [[20, 184, 138], [13, 165, 160], [37, 140, 214], [88, 101, 226], [124, 92, 220]];
+    const IDLE_RGB = [100, 116, 139];
+    const REJECT_RGB = [242, 107, 91];
+    const GATE_LABELS = ['Execute', 'Verify', 'Audit'];
+    const REJECT_RATE = [0.14, 0.1, 0.06];
+
+    let W = 0;
+    let H = 0;
+    let copyRight = 0;
+    let flowMode = true;
+    let gates = [];
+    let targets = [];
+    const particles = [];
+    let raf = 0;
+    let last = 0;
+    let onScreen = true;
+    const mouse = { x: -1e4, y: -1e4 };
+    const glowing = new Set();
+
+    const smooth = (k) => k * k * (3 - 2 * k);
+
+    function spawn(scatter) {
+      const x = scatter ? rand(-40, W) : rand(-90, -10);
+      let y;
+      let tier;
+      if (flowMode || !targets.length) {
+        y = rand(H * 0.08, H * 0.92);
+        tier = Math.floor(Math.random() * TIER_RGB.length);
+      } else {
+        // Lanes start near the badge they feed, so streams fan in instead of crossing.
+        const top = targets[0].y;
+        const bottom = targets[targets.length - 1].y;
+        y = clamp(rand(top - 90, bottom + 90), H * 0.06, H * 0.94);
+        const slot = ((y - top) / (bottom - top)) * (targets.length - 1) + rand(-0.6, 0.6);
+        tier = clamp(Math.round(slot), 0, targets.length - 1);
+      }
+      return {
+        x, y, px: x, py: y, baseY: y,
+        speed: rand(0.45, 1.05),
+        phase: rand(0, Math.PI * 2),
+        amp: rand(4, 16),
+        tier,
+        gate: 0,
+        rejected: false,
+        alpha: 1,
+        size: rand(1, 2.3),
+      };
+    }
+
+    function measure() {
+      const rect = hero.getBoundingClientRect();
+      W = rect.width;
+      H = rect.height;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      copyRight = copy ? copy.getBoundingClientRect().right - rect.left : W * 0.5;
+      targets = badges.map((badge) => {
+        const r = badge.getBoundingClientRect();
+        return { x: r.left - rect.left - 6, y: r.top - rect.top + r.height / 2, ok: r.width > 0 };
+      });
+      flowMode = !(targets.length && targets.every((t) => t.ok));
+      gates = [];
+      if (!flowMode) {
+        const start = copyRight + 56;
+        const end = Math.min(...targets.map((t) => t.x)) - 60;
+        if (end - start > 200) {
+          gates = GATE_LABELS.map((_, i) => start + ((end - start) * i) / (GATE_LABELS.length - 1));
+        } else {
+          flowMode = true;
+        }
+      }
+      const count = Math.round(clamp((W * H) / (flowMode ? 4200 : 1500), 110, 760));
+      while (particles.length < count) particles.push(spawn(true));
+      particles.length = count;
+      particles.forEach((p) => {
+        if (p.baseY > H || p.y > H) Object.assign(p, spawn(true));
+      });
+    }
+
+    function arrive(i) {
+      if (glowing.has(i) || Math.random() > 0.05) return;
+      const badge = badges[i];
+      if (!badge) return;
+      glowing.add(i);
+      badge.classList.add('glow');
+      setTimeout(() => {
+        badge.classList.remove('glow');
+        glowing.delete(i);
+      }, 700);
+    }
+
+    function update(p, dt, t) {
+      p.px = p.x;
+      p.py = p.y;
+      if (p.rejected) {
+        p.x += p.speed * 0.45 * dt;
+        p.y += 0.8 * dt;
+        p.alpha -= 0.024 * dt;
+        if (p.alpha <= 0) Object.assign(p, spawn(false));
+        return;
+      }
+      while (p.gate < gates.length && p.x >= gates[p.gate]) {
+        if (Math.random() < REJECT_RATE[p.gate]) {
+          p.rejected = true;
+          return;
+        }
+        p.gate += 1;
+      }
+      const target = flowMode ? null : targets[p.tier];
+      let k = 0;
+      let laneY = p.baseY;
+      if (target) {
+        const x0 = gates[0] - 80;
+        k = clamp((p.x - x0) / (target.x - x0), 0, 1);
+        laneY = p.baseY + (target.y - p.baseY) * smooth(k);
+      }
+      const wave = Math.sin(t * 0.0011 + p.phase + p.x * 0.0045) * p.amp * (1 - 0.9 * k);
+      p.x += p.speed * (0.8 + W / 1800) * dt;
+      p.y += (laneY + wave - p.y) * Math.min(1, 0.085 * dt);
+
+      const dx = p.x - mouse.x;
+      const dy = p.y - mouse.y;
+      const d2 = dx * dx + dy * dy;
+      if (d2 < 14400) {
+        const dist = Math.sqrt(d2) || 1;
+        const force = (1 - dist / 120) * 2.4 * dt;
+        p.x += (dx / dist) * force * 0.35;
+        p.y += (dy / dist) * force;
+      }
+
+      if (target && p.x >= target.x) {
+        arrive(p.tier);
+        Object.assign(p, spawn(false));
+      } else if (p.x > W + 24) {
+        Object.assign(p, spawn(false));
+      }
+    }
+
+    function roundRect(x, y, w, h, r) {
+      ctx.beginPath();
+      if (ctx.roundRect) {
+        ctx.roundRect(x, y, w, h, r);
+        return;
+      }
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+    }
+
+    function drawGates() {
+      const top = H * 0.16;
+      const bottom = H * 0.86;
+      ctx.save();
+      ctx.font = '600 11px Inter, ui-sans-serif, system-ui, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      gates.forEach((gx, i) => {
+        const grad = ctx.createLinearGradient(0, top, 0, bottom);
+        grad.addColorStop(0, 'rgba(15,23,42,0)');
+        grad.addColorStop(0.5, 'rgba(15,23,42,0.18)');
+        grad.addColorStop(1, 'rgba(15,23,42,0)');
+        ctx.strokeStyle = grad;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 6]);
+        ctx.beginPath();
+        ctx.moveTo(gx, top);
+        ctx.lineTo(gx, bottom);
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        const text = GATE_LABELS[i];
+        const w = ctx.measureText(text).width + 22;
+        const h = 24;
+        const y = top - 16;
+        ctx.fillStyle = 'rgba(255,255,255,0.92)';
+        ctx.strokeStyle = 'rgba(15,23,42,0.12)';
+        roundRect(gx - w / 2, y - h / 2, w, h, 12);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = '#334155';
+        ctx.fillText(text, gx, y + 0.5);
+      });
+      ctx.restore();
+    }
+
+    function drawBadgeGlow() {
+      targets.forEach((t, i) => {
+        const [r, g, b] = TIER_RGB[i];
+        const glow = ctx.createRadialGradient(t.x, t.y, 0, t.x, t.y, 72);
+        glow.addColorStop(0, `rgba(${r},${g},${b},0.18)`);
+        glow.addColorStop(1, `rgba(${r},${g},${b},0)`);
+        ctx.fillStyle = glow;
+        ctx.fillRect(t.x - 72, t.y - 72, 144, 144);
+      });
+    }
+
+    function draw() {
+      ctx.clearRect(0, 0, W, H);
+      if (gates.length) {
+        drawGates();
+        drawBadgeGlow();
+      }
+      ctx.lineCap = 'round';
+      for (const p of particles) {
+        let rgb;
+        let a;
+        if (p.rejected) {
+          rgb = REJECT_RGB;
+          a = 0.75 * p.alpha;
+        } else if (flowMode) {
+          rgb = TIER_RGB[p.tier];
+          a = 0.4;
+        } else if (p.gate === 0) {
+          rgb = IDLE_RGB;
+          a = p.x < copyRight ? 0.2 : 0.36;
+        } else {
+          rgb = TIER_RGB[p.tier];
+          a = 0.5 + 0.15 * p.gate;
+        }
+        let sx = (p.x - p.px) * 3;
+        let sy = (p.y - p.py) * 3;
+        const len = Math.hypot(sx, sy);
+        if (len > 16) {
+          sx *= 16 / len;
+          sy *= 16 / len;
+        }
+        ctx.strokeStyle = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a.toFixed(3)})`;
+        ctx.lineWidth = p.size;
+        ctx.beginPath();
+        ctx.moveTo(p.x - sx, p.y - sy);
+        ctx.lineTo(p.x + 0.01, p.y);
+        ctx.stroke();
+      }
+    }
+
+    function loop(now) {
+      const dt = clamp((now - last) / 16.67, 0.2, 3);
+      last = now;
+      for (const p of particles) update(p, dt, now);
+      draw();
+      raf = requestAnimationFrame(loop);
+    }
+    const start = () => {
+      if (raf || reduceMotion || !onScreen || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(loop);
+    };
+    const stop = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = 0;
+    };
+    const renderStill = () => {
+      for (let i = 0; i < 260; i += 1) particles.forEach((p) => update(p, 1, i * 16));
+      draw();
+    };
+
+    measure();
+    if (reduceMotion) renderStill();
+    else start();
+
+    let resizeTimer = 0;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        measure();
+        if (reduceMotion) renderStill();
+      }, 120);
+    });
+    if (document.fonts && document.fonts.ready) {
+      document.fonts.ready.then(() => {
+        measure();
+        if (reduceMotion) renderStill();
+      });
+    }
+    hero.addEventListener('pointermove', (e) => {
+      const r = hero.getBoundingClientRect();
+      mouse.x = e.clientX - r.left;
+      mouse.y = e.clientY - r.top;
+    });
+    hero.addEventListener('pointerleave', () => {
+      mouse.x = -1e4;
+      mouse.y = -1e4;
+    });
+    if ('IntersectionObserver' in window) {
+      new IntersectionObserver((entries) => {
+        onScreen = entries.some((entry) => entry.isIntersecting);
+        if (onScreen) start();
+        else stop();
+      }).observe(hero);
+    }
+    document.addEventListener('visibilitychange', () => (document.hidden ? stop() : start()));
+  }
+
+  initContact();
+  initNav();
+  initReveal();
+  initTabs();
+  initExamples();
+  initWaves();
+  initLadder();
+  initHero();
+})();

index.html

@@ -1,19 +1,900 @@
 <!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>IntelligenceLab · Verified training environments for frontier agents</title>
+  <meta name="description" content="Verified, difficulty-calibrated training environments for terminal, scientific, CAD, web, and visual-to-code agents. Every task ships with a reference solution and an executable verifier.">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="IntelligenceLab · Verified training environments for frontier agents">
+  <meta property="og:description" content="Long-horizon agent tasks that prove themselves: executed, verified, and calibrated before they reach you.">
+  <meta name="theme-color" content="#f6f7f4">
+  <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=Inter:wght@400;500;600;700;800&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 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</span>
+      </a>
+      <nav class="nav-links" aria-label="Primary">
+        <a href="#offerings">What we provide</a>
+        <a href="#examples">Examples</a>
+        <a href="#pipeline">How it works</a>
+        <a href="#trajectories">Trajectories</a>
+        <a href="#research">Research</a>
+      </nav>
+      <div class="nav-cta">
+        <a class="btn btn-dark btn-sm" href="#contact">Start a pilot</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="#offerings">What we provide</a>
+      <a href="#examples">Examples</a>
+      <a href="#pipeline">How it works</a>
+      <a href="#trajectories">Trajectories</a>
+      <a href="#research">Research</a>
+      <a class="btn btn-dark" href="#contact">Start a pilot</a>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="hero" id="top" aria-labelledby="hero-title">
+      <canvas class="hero-canvas" aria-hidden="true"></canvas>
+      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="container hero-inner">
+        <div class="hero-copy">
+          <p class="eyebrow"><span class="pulse-dot" aria-hidden="true"></span>Terminal · Coding · Multimodal</p>
+          <h1 id="hero-title">Agent training data that <mark>proves itself</mark>.</h1>
+          <p class="lede">We provide terminal, coding, and multimodal training data for agents. Every task ships with its own reference solution and executable verifier, and every trajectory is verified and rewritten into one consistent harness, calibrated to the difficulty your model needs next.</p>
+          <div class="hero-actions">
+            <a class="btn btn-dark" href="#contact">Start a pilot
+              <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 examples</a>
+          </div>
+          <ul class="hero-proof">
+            <li><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 10.5 3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Verified by execution</li>
+            <li><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 10.5 3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Calibrated to your checkpoint</li>
+            <li><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 10.5 3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Fresh every month</li>
+          </ul>
+        </div>
+      </div>
+      <ol class="tier-badges" aria-label="Difficulty tiers">
+        <li style="--tier:#14b88a"><span class="tier-num">T1</span>Warm-up</li>
+        <li style="--tier:#0da5a0"><span class="tier-num">T2</span>Core</li>
+        <li style="--tier:#258cd6"><span class="tier-num">T3</span>Hard</li>
+        <li style="--tier:#5865e2"><span class="tier-num">T4</span>Expert</li>
+        <li style="--tier:#7c5cdc"><span class="tier-num">T5</span>Frontier</li>
+      </ol>
+    </section>
+
+    <section class="marquee" aria-label="Software and formats our tasks run on">
+      <p class="marquee-title">Tasks run on the software practitioners actually use</p>
+      <div class="marquee-track">
+        <ul>
+          <li>CadQuery</li><li>OpenSCAD</li><li>FreeCAD</li><li>KiCad</li><li>Blender</li><li>OpenFOAM</li><li>MuJoCo</li><li>URDF</li><li>Tesseract</li><li>Coq</li><li>CMake</li><li>Git</li><li>Docker</li><li>Nuxt</li><li>Vue</li><li>Flask</li><li>SQLite</li><li>STEP</li>
+        </ul>
+        <ul aria-hidden="true">
+          <li>CadQuery</li><li>OpenSCAD</li><li>FreeCAD</li><li>KiCad</li><li>Blender</li><li>OpenFOAM</li><li>MuJoCo</li><li>URDF</li><li>Tesseract</li><li>Coq</li><li>CMake</li><li>Git</li><li>Docker</li><li>Nuxt</li><li>Vue</li><li>Flask</li><li>SQLite</li><li>STEP</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="section" id="offerings" aria-labelledby="offer-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">What we provide</p>
+          <h2 id="offer-title">Terminal, coding, and multimodal data.</h2>
+          <p class="sub">Terminal work is coding work: to finish a terminal task, the agent writes, runs, tests, and debugs real programs. The same verified environments extend to visual inputs, from engineering drawings to rendered pages.</p>
+        </div>
+        <div class="offer-grid">
+          <article class="offer-card reveal">
+            <div class="offer-top offer-terminal" aria-hidden="true">
+              <span><b>$</b> make -C services/ingest</span>
+              <span class="dim">  built ingest-worker</span>
+              <span><b>$</b> ./bin/migrate --apply v15.yaml</span>
+              <span><b>$</b> ./bin/replay --since 02:00</span>
+              <span class="ok">✓ end state verified</span>
+            </div>
+            <h3>Terminal</h3>
+            <p>Long-horizon command-line work across real tools, services, builds, and data: hundreds of commands toward one verified end state.</p>
+            <ul class="offer-list">
+              <li>Ops, data, build &amp; release workflows</li>
+              <li>Scientific &amp; engineering toolchains</li>
+              <li>RL environments with executable verifiers</li>
+            </ul>
+          </article>
+          <article class="offer-card reveal">
+            <div class="offer-top offer-code" aria-hidden="true">
+              <span><i class="c-k">def</i> reconstruct(scenario):</span>
+              <span>    duct = sweep(scenario[<i class="c-s">"inlet_size"</i>],</span>
+              <span>                 scenario[<i class="c-s">"outlet_size"</i>],</span>
+              <span>                 bend=scenario[<i class="c-s">"bend_angle"</i>])</span>
+              <span>    <i class="c-k">return</i> add_ribs(duct, scenario[<i class="c-s">"rib_count"</i>])</span>
+            </div>
+            <h3>Coding</h3>
+            <p>Every terminal task is a coding task. Agents write, test, and debug real programs, from rebuilding scientific software to shipping full-stack apps.</p>
+            <ul class="offer-list">
+              <li>Software reconstruction from real program behavior</li>
+              <li>Repository repair &amp; feature work</li>
+              <li>Full-stack apps verified in a browser</li>
+            </ul>
+          </article>
+          <article class="offer-card reveal">
+            <div class="offer-top offer-visual" aria-hidden="true">
+              <img src="assets/examples/stl-thumb.webp" alt="" width="740" height="394" loading="lazy">
+            </div>
+            <h3>Multimodal</h3>
+            <p>Visual inputs, code outputs: engineering drawings, renders, screenshots, meshes, and scientific images.</p>
+            <ul class="offer-list">
+              <li>CAD from engineering drawings</li>
+              <li>Web pages and apps from designs</li>
+              <li>Charts, SVG &amp; documents to code</li>
+            </ul>
+          </article>
+        </div>
+        <div class="offer-band reveal">
+          <span>Every task ships with</span>
+          <ul>
+            <li>Reference solution</li>
+            <li>Executable verifier</li>
+            <li>Difficulty tier</li>
+            <li>Harness-consistent trajectories</li>
+          </ul>
+        </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">Examples</p>
+          <h2 id="ex-title">Watch real software run. Rebuild its behavior.</h2>
+          <p class="sub">A sample of our software-reconstruction tasks. The agent sees public runs of real scientific and engineering software, writes a program that reproduces it, and is graded on hidden configurations it never saw. Every visual is rendered from the task's own files.</p>
+        </div>
+        <div class="ex-grid" id="ex-grid">
+<!--EXAMPLES_CARDS:START-->
+          <article class="ex-card reveal" data-index="0" data-kind="stl" tabindex="0" role="button" aria-label="Open example: 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>Regenerate a swept fan-duct mount STL whose inlet size, outlet size, bend angle, and rib count change the geometry.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">3D mesh</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="1" data-kind="foam" tabindex="0" role="button" aria-label="Open example: 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>Reconstruct a 2-D dam-break CFD workflow across water height, mesh, gravity, and simulation time.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">CFD mesh</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="drc" tabindex="0" role="button" aria-label="Open example: 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>Reconstruct LED-matrix driver board outputs (DRC report and project files) under row, column, driver, and routing interventions.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">PCB layout</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" data-index="3" data-kind="container" tabindex="0" role="button" aria-label="Open example: 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>Infer coupled container base-image, package-set, label, entrypoint, and SBOM-scope behavior.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</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>
+          <article class="ex-card reveal" data-index="4" data-kind="blender" tabindex="0" role="button" aria-label="Open example: 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>Reconstruct cloth-scene behavior under wind, pin-group, frame, and subdivision interventions.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">3D scene</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" data-index="5" data-kind="robot" tabindex="0" role="button" aria-label="Open example: 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>Infer robot state and trajectory behavior under actuator, collision, pose, joint-limit, and target interventions.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</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="6" data-kind="micro" tabindex="0" role="button" aria-label="Open example: 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>Reconstruct cell segmentation and measurement behavior across channel, illumination, threshold, object size, and measurement feature.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">Microscopy images</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 is-extra" data-index="7" data-kind="astro" tabindex="0" role="button" aria-label="Open example: 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>Reconstruct FITS/WCS cutout and photometry behavior under aperture, background, clipping, threshold, and coordinate-frame interventions.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">FITS images</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 is-extra" data-index="8" data-kind="ocr" tabindex="0" role="button" aria-label="Open example: 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>Reconstruct how DPI, font, language, metadata, and page range affect OCR behavior.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">Document images</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="9" data-kind="color" tabindex="0" role="button" aria-label="Open example: 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>Infer a color pipeline across color space, white point, tone curve, demosaicing, and compression quality.</p>
+              <ul class="ex-card-tracks"><li class="trk trk-terminal">Terminal</li><li class="trk trk-coding">Coding</li><li class="trk trk-multimodal">Multimodal</li><li class="trk trk-mod">Images</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>
+<!--EXAMPLES_CARDS:END-->
+        </div>
+        <div class="ex-more">
+          <button class="btn btn-ghost" id="ex-more" type="button" aria-expanded="false">Show more examples</button>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="why" aria-labelledby="why-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Why verified synthesis</p>
+          <h2 id="why-title">Scale without losing the proof.</h2>
+          <p class="sub">Hand-written environments are slow to produce. Prompted generation is fast, but a task can look perfect and be silently broken. We generate aggressively and then try to break every task, so only environments that survive the gates ship.</p>
+        </div>
+        <div class="grid-4">
+          <article class="value-card reveal">
+            <div class="icon-tile"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4.5 6v5.5c0 4.6 3.1 8.2 7.5 9.5 4.4-1.3 7.5-4.9 7.5-9.5V6L12 3Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m8.8 12.2 2.3 2.3 4.3-4.6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+            <h3>Verified by execution</h3>
+            <p>A task is accepted only if its reference solution passes in a fresh sandbox, a do-nothing agent fails, and every check is stated in the instruction.</p>
+          </article>
+          <article class="value-card reveal">
+            <div class="icon-tile"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h4v-4h4v-4h4V7h4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><circle cx="20" cy="7" r="1.6" fill="currentColor"/></svg></div>
+            <h3>Difficulty you can dial</h3>
+            <p>Tasks grow harder round by round. Every task carries a measured tier, so you train on a curriculum instead of a pile.</p>
+          </article>
+          <article class="value-card reveal">
+            <div class="icon-tile"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.6M20 4v4.5h-4.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+            <h3>Fresh every month</h3>
+            <p>New, never-published environments each cycle, synthesized for you and audited against public benchmark test sets before delivery.</p>
+          </article>
+          <article class="value-card reveal">
+            <div class="icon-tile"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h5c2 0 3 1 4.5 3S16 12 19 12M4 12h15M4 18h5c2 0 3-1 4.5-3S16 12 19 12" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><circle cx="19.5" cy="12" r="1.6" fill="currentColor"/></svg></div>
+            <h3>One consistent harness</h3>
+            <p>Passing runs from many harnesses are rewritten into the single harness your model trains and runs under, so it learns the skill, not the scaffolding.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="capabilities" aria-labelledby="cap-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Capabilities</p>
+          <h2 id="cap-title">Six task families. One standard of proof.</h2>
+          <p class="sub">Each family pairs what the model sees with what it must produce and how we check it. Pick one, or combine them into a single training mix.</p>
+        </div>
+
+        <div class="tabs reveal">
+          <div class="tab-list" role="tablist" aria-label="Task families">
+            <button class="tab" role="tab" id="tab-terminal" aria-controls="panel-terminal" aria-selected="true">
+              <span class="tab-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4.5" width="18" height="15" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="m7 10 3 2.5L7 15m5 0h5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+              <span>Terminal &amp; coding agents</span>
+            </button>
+            <button class="tab" role="tab" id="tab-science" aria-controls="panel-science" aria-selected="false" tabindex="-1">
+              <span class="tab-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 3.5h5M10.5 3.5v6L5 19a1.5 1.5 0 0 0 1.3 2.2h11.4A1.5 1.5 0 0 0 19 19l-5.5-9.5v-6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 15h9" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
+              <span>Scientific software reconstruction</span>
+            </button>
+            <button class="tab" role="tab" id="tab-cad" aria-controls="panel-cad" aria-selected="false" tabindex="-1">
+              <span class="tab-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m4 7.5 8 4.5 8-4.5M12 12v9" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></span>
+              <span>CAD from engineering drawings</span>
+            </button>
+            <button class="tab" role="tab" id="tab-web" aria-controls="panel-web" aria-selected="false" tabindex="-1">
+              <span class="tab-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M3 8.5h18M7 13h4m-4 3h7" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
+              <span>Web &amp; full-stack applications</span>
+            </button>
+            <button class="tab" role="tab" id="tab-visual" aria-controls="panel-visual" aria-selected="false" tabindex="-1">
+              <span class="tab-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10m5 10V5m5 15v-7m5 7V8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
+              <span>Visual-to-code</span>
+            </button>
+            <button class="tab" role="tab" id="tab-swe" aria-controls="panel-swe" aria-selected="false" tabindex="-1">
+              <span class="tab-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8.5 8-4 4 4 4m7-8 4 4-4 4M13.5 5l-3 14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+              <span>Multimodal software engineering</span>
+            </button>
+          </div>
+
+          <div class="tab-panels">
+            <div class="tab-panel is-active" role="tabpanel" id="panel-terminal" aria-labelledby="tab-terminal" tabindex="0">
+              <div class="panel-copy">
+                <h3>Terminal &amp; coding agents</h3>
+                <p>Multi-hour workflows where the agent explores a real environment, writes and runs programs, and checks its own work. Terminal tasks are coding tasks.</p>
+                <dl class="spec">
+                  <div><dt>Model sees</dt><dd>A live workspace, an instruction, and the tools a practitioner would reach for.</dd></div>
+                  <div><dt>Model produces</dt><dd>Working code and a verified end state after hundreds of commands: rebuilt programs, migrated services, repaired builds.</dd></div>
+                  <div><dt>We verify</dt><dd>Artifacts and system state, with checks that reject placeholders, hard-coded outputs, and skipped steps.</dd></div>
+                </dl>
+              </div>
+              <div class="panel-visual">
+                <div class="mock mock-terminal">
+                  <div class="mock-bar dark"><i></i><i></i><i></i><em>agent@sandbox:/app</em></div>
+<pre class="term"><code><span class="t-line" style="--i:0"><b>$</b> jq -c .axes_to_vary observations/manifest.json</span>
+<span class="t-line t-dim" style="--i:1">["inlet_size","outlet_size","bend_angle","rib_count"]</span>
+<span class="t-line" style="--i:2"><b>$</b> ls /tmp/obs/public_1/native</span>
+<span class="t-line t-dim" style="--i:3">metrics.json  product.stl</span>
+<span class="t-line" style="--i:4"><b>$</b> jq -c .parameters /tmp/obs/public_1/scenario.json</span>
+<span class="t-line t-dim" style="--i:5">{"bend_angle":238,"inlet_size":11.15,"rib_count":5}</span>
+<span class="t-line" style="--i:6"><b>$</b> python3 workspace/reconstruct.py &lt; hidden.json</span>
+<span class="t-line t-verify" style="--i:7">verifier ▸ hidden configurations vs. real OpenSCAD</span>
+<span class="t-line t-ok" style="--i:8">✓ geometry matches on every hidden scenario</span></code></pre>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-panel" role="tabpanel" id="panel-science" aria-labelledby="tab-science" tabindex="0" hidden>
+              <div class="panel-copy">
+                <h3>Scientific software reconstruction</h3>
+                <p>Real scientific and engineering software becomes the reference solution. The model sees how it behaves and must rebuild that behavior without its source.</p>
+                <dl class="spec">
+                  <div><dt>Model sees</dt><dd>Public runs of real software: parameters plus native outputs such as tables, meshes, waveforms, images, and sequences.</dd></div>
+                  <div><dt>Model produces</dt><dd>An editable program that reproduces the software's behavior across its inputs.</dd></div>
+                  <div><dt>We verify</dt><dd>On hidden configurations the model never saw, with domain-aware comparison, so replaying public outputs never passes.</dd></div>
+                </dl>
+                <ul class="chip-row" aria-label="Domains">
+                  <li>Physical &amp; engineering simulation</li><li>Life &amp; molecular science</li><li>Earth &amp; space</li><li>Spatial &amp; 3D</li><li>Data &amp; documents</li><li>Software &amp; formal systems</li>
+                </ul>
+              </div>
+              <div class="panel-visual">
+                <div class="mock mock-plot">
+                  <div class="mock-bar"><i></i><i></i><i></i><em>public runs vs hidden configuration</em></div>
+                  <svg viewBox="0 0 360 210" role="img" aria-label="Two public runs and a hidden configuration matched by the reconstructed program">
+                    <line x1="36" y1="186" x2="340" y2="186" class="axis"/>
+                    <line x1="36" y1="22" x2="36" y2="186" class="axis"/>
+                    <path class="wave wave-a" data-wave="58 0.9 6 0"/>
+                    <path class="wave wave-b" data-wave="44 0.7 8 0.4"/>
+                    <path class="wave wave-hidden" data-wave="66 0.5 10 0.9"/>
+                    <path class="wave wave-recon" data-wave="66 0.5 10 0.9"/>
+                    <g class="legend">
+                      <rect x="210" y="16" width="10" height="3" rx="1.5" class="lg-a"/><text x="226" y="20">public · gain 0.4</text>
+                      <rect x="210" y="30" width="10" height="3" rx="1.5" class="lg-b"/><text x="226" y="34">public · gain 0.8</text>
+                      <rect x="210" y="44" width="10" height="3" rx="1.5" class="lg-h"/><text x="226" y="48">hidden · gain 1.3</text>
+                    </g>
+                  </svg>
+                  <span class="mock-chip ok">✓ hidden configuration reproduced</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-panel" role="tabpanel" id="panel-cad" aria-labelledby="tab-cad" tabindex="0" hidden>
+              <div class="panel-copy">
+                <h3>CAD from engineering drawings</h3>
+                <p>Turn a dimensioned drawing or multi-view renders into parametric CAD code that builds the right solid.</p>
+                <dl class="spec">
+                  <div><dt>Model sees</dt><dd>An engineering drawing or multi-view renders, with as much or as little supplied dimensioning as the tier calls for.</dd></div>
+                  <div><dt>Model produces</dt><dd>A CadQuery, OpenSCAD, or FreeCAD program and the watertight solid it builds.</dd></div>
+                  <div><dt>We verify</dt><dd>Geometry, not code: a fresh rebuild is compared on bounds, volume, surface area, and probes inside every hole and profile.</dd></div>
+                </dl>
+              </div>
+              <div class="panel-visual">
+                <div class="mock mock-cad">
+                  <svg viewBox="0 0 360 230" role="img" aria-label="Engineering drawing of an L-bracket with dimensions and a section view">
+                    <defs>
+                      <pattern id="hatch" width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="7" class="hatch-line"/></pattern>
+                      <marker id="arr" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto-start-reverse" markerUnits="userSpaceOnUse"><path d="M0 0 8 4 0 8z" class="arrow"/></marker>
+                    </defs>
+                    <rect x="0.5" y="0.5" width="359" height="229" rx="10" class="paper"/>
+                    <path class="draw part" pathLength="1" d="M40 52H170V84H96V182H40Z"/>
+                    <circle class="draw part" pathLength="1" cx="68" cy="150" r="11"/>
+                    <circle class="draw part" pathLength="1" cx="140" cy="68" r="7"/>
+                    <path class="center" d="M52 150h32M68 134v32M128 68h24M140 56v24"/>
+                    <path class="dim" d="M40 48V30M170 48V30M36 52H18M36 182H18"/>
+                    <line class="dim" x1="40" y1="36" x2="170" y2="36" marker-start="url(#arr)" marker-end="url(#arr)"/>
+                    <line class="dim" x1="24" y1="52" x2="24" y2="182" marker-start="url(#arr)" marker-end="url(#arr)"/>
+                    <text x="105" y="30" class="dim-text" text-anchor="middle">130</text>
+                    <text x="16" y="120" class="dim-text" text-anchor="middle" transform="rotate(-90 16 120)">130</text>
+                    <path class="dim" d="M76 142 104 124H130"/>
+                    <text x="106" y="119" class="dim-text">Ø22 THRU</text>
+                    <rect x="214" y="52" width="38" height="130" class="cad-section"/>
+                    <path class="hidden-line" d="M214 139h38M214 161h38"/>
+                    <text x="233" y="200" class="label" text-anchor="middle">SECTION A–A</text>
+                    <g class="title-block">
+                      <rect x="270" y="150" width="78" height="66" rx="3"/>
+                      <path d="M270 172h78M270 194h78M309 194v22"/>
+                      <text x="309" y="165" text-anchor="middle">BRACKET</text>
+                      <text x="309" y="187" text-anchor="middle">mm · 1:2</text>
+                      <text x="289" y="209" text-anchor="middle">REV B</text>
+                      <text x="328" y="209" text-anchor="middle">A3</text>
+                    </g>
+                  </svg>
+                  <span class="mock-chip ok">✓ rebuilt solid matches geometry</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-panel" role="tabpanel" id="panel-web" aria-labelledby="tab-web" tabindex="0" hidden>
+              <div class="panel-copy">
+                <h3>Web &amp; full-stack applications</h3>
+                <p>From a design, a specification, or a legacy desktop app to a running web product with real persistence.</p>
+                <dl class="spec">
+                  <div><dt>Model sees</dt><dd>Requirements, design references, legacy applications, or an existing codebase.</dd></div>
+                  <div><dt>Model produces</dt><dd>Running frontends and full-stack services: routes, APIs, state, and storage.</dd></div>
+                  <div><dt>We verify</dt><dd>Headless-browser tests across routes and viewports, API contracts, restart persistence, and rendered-page comparison against the design.</dd></div>
+                </dl>
+              </div>
+              <div class="panel-visual">
+                <div class="mock mock-browser">
+                  <div class="mock-bar"><i></i><i></i><i></i><span class="url">localhost:8080/dispatch</span></div>
+                  <div class="browser-body">
+                    <div class="sk-head"><span class="sk-logo"></span><span class="sk-pill"></span><span class="sk-pill"></span><span class="sk-pill short"></span></div>
+                    <div class="sk-grid">
+                      <div class="sk-side"><span></span><span></span><span></span><span class="short"></span></div>
+                      <div class="sk-main">
+                        <div class="sk-row head"></div><div class="sk-row"></div><div class="sk-row"></div><div class="sk-row"></div><div class="sk-row short"></div>
+                      </div>
+                    </div>
+                    <ul class="checklist">
+                      <li>All routes render at mobile and desktop widths</li>
+                      <li>API contract and validation rules hold</li>
+                      <li>State survives a full restart</li>
+                      <li>Rendered page matches the design</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-panel" role="tabpanel" id="panel-visual" aria-labelledby="tab-visual" tabindex="0" hidden>
+              <div class="panel-copy">
+                <h3>Visual-to-code</h3>
+                <p>Charts, diagrams, vector graphics, and documents rebuilt as code that re-renders them, and keeps working when the data changes.</p>
+                <dl class="spec">
+                  <div><dt>Model sees</dt><dd>A chart, diagram, SVG, or document page, optionally with the underlying data.</dd></div>
+                  <div><dt>Model produces</dt><dd>Plotting code, SVG, or LaTeX that regenerates the image.</dd></div>
+                  <div><dt>We verify</dt><dd>Re-render and compare structure and pixels, then re-run on hidden data variations so that copying one image never passes.</dd></div>
+                </dl>
+              </div>
+              <div class="panel-visual">
+                <div class="mock mock-split">
+                  <div class="split-chart">
+                    <svg viewBox="0 0 200 150" role="img" aria-label="Bar chart with a trend line">
+                      <line x1="18" y1="132" x2="192" y2="132" class="axis"/>
+                      <rect x="28" y="88" width="18" height="44" rx="3" class="bar-a"/>
+                      <rect x="56" y="70" width="18" height="62" rx="3" class="bar-a"/>
+                      <rect x="84" y="78" width="18" height="54" rx="3" class="bar-a"/>
+                      <rect x="112" y="52" width="18" height="80" rx="3" class="bar-b"/>
+                      <rect x="140" y="40" width="18" height="92" rx="3" class="bar-b"/>
+                      <rect x="168" y="26" width="18" height="106" rx="3" class="bar-b"/>
+                      <path d="M37 80 65 64 93 70 121 44 149 32 177 18" class="trend"/>
+                    </svg>
+                  </div>
+<pre class="split-code"><code><span class="c-k">import</span> matplotlib.pyplot <span class="c-k">as</span> plt
+fig, ax = plt.subplots()
+ax.bar(q, revenue, color=c)
+ax.plot(q, trend, marker=<span class="c-s">"o"</span>)
+ax.set_ylim(<span class="c-n">0</span>, <span class="c-n">120</span>)
+fig.savefig(out, dpi=<span class="c-n">200</span>)</code></pre>
+                  <span class="mock-chip ok">✓ re-render match · ✓ hidden data variant</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="tab-panel" role="tabpanel" id="panel-swe" aria-labelledby="tab-swe" tabindex="0" hidden>
+              <div class="panel-copy">
+                <h3>Multimodal software engineering</h3>
+                <p>Fix what users can see. Visual bug reports inside real repositories, resolved with patches that hold up in a browser.</p>
+                <dl class="spec">
+                  <div><dt>Model sees</dt><dd>Bug reports with screenshots and screen recordings, plus the full repository.</dd></div>
+                  <div><dt>Model produces</dt><dd>A patch that fixes the visible behavior without breaking anything else.</dd></div>
+                  <div><dt>We verify</dt><dd>UI-level tests in a real browser, render diffs, and the project's regression suite.</dd></div>
+                </dl>
+              </div>
+              <div class="panel-visual">
+                <div class="mock mock-issue">
+                  <div class="issue-head"><span class="issue-dot"></span><strong>Menu clips under the hero on narrow screens</strong></div>
+                  <div class="issue-shot" aria-hidden="true"><span class="shot-nav"></span><span class="shot-menu"></span><span class="shot-hero"></span></div>
+<pre class="diff"><code><span class="d-h">@@ components/NavMenu.vue</span>
+<span class="d-del">-  .menu { overflow: hidden; }</span>
+<span class="d-add">+  .menu { overflow: visible; }</span>
+<span class="d-add">+  .menu { z-index: 40; }</span></code></pre>
+                  <span class="mock-chip ok">✓ UI tests pass · ✓ render diff clean</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-dark" id="pipeline" aria-labelledby="pipe-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">How it works</p>
+          <h2 id="pipe-title">Generate aggressively. Then try to break every task.</h2>
+          <p class="sub">Generation is the cheap part. The value is in the gates: a task reaches you only after it survives all of them.</p>
+        </div>
+        <ol class="pipeline reveal">
+          <li style="--d:0">
+            <span class="step-dot">1</span>
+            <h3>Seed</h3>
+            <p>Licensed or authored seed tasks and real software workflows. Never benchmark test sets.</p>
+          </li>
+          <li style="--d:1">
+            <span class="step-dot">2</span>
+            <h3>Extend</h3>
+            <p>Rewrite operators add tools, services, data, and failure modes. Solution, environment, verifier, and instruction change together.</p>
+          </li>
+          <li style="--d:2">
+            <span class="step-dot">3</span>
+            <h3>Verify</h3>
+            <p>Fresh-sandbox build. The reference must pass, a do-nothing agent must fail, and every verifier check must be stated in the instruction.</p>
+          </li>
+          <li style="--d:3">
+            <span class="step-dot">4</span>
+            <h3>Calibrate</h3>
+            <p>Measure pass rates with reference solvers or your checkpoint, and assign every task a difficulty tier.</p>
+          </li>
+          <li style="--d:4">
+            <span class="step-dot">5</span>
+            <h3>Deliver</h3>
+            <p>Environments, verified trajectories, and a calibration and integrity report for every batch.</p>
+          </li>
+        </ol>
+        <ul class="gate-row reveal" aria-label="Acceptance gates">
+          <li>Reference solution passes</li>
+          <li>No-op agent fails</li>
+          <li>Replay shortcuts fail</li>
+          <li>Instruction ↔ verifier consistency</li>
+          <li>Leakage &amp; overlap audit</li>
+          <li>Sampled human review</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="section" id="trajectories" aria-labelledby="traj-title">
+      <div class="container traj-grid">
+        <div class="traj-copy reveal">
+          <p class="kicker">Trajectory scaling</p>
+          <h2 id="traj-title">More passing trajectories. One consistent harness.</h2>
+          <p class="sub">Hard tasks get solved in different ways under different harnesses, and raw trajectories carry each harness's scaffolding with them. We pool successes across harnesses, then rewrite each one into the single harness your model trains and runs under, so it learns the skill, not the scaffolding.</p>
+          <ol class="traj-steps">
+            <li><strong>Discover.</strong> Several harnesses attack the same tasks and solve ones no single harness can.</li>
+            <li><strong>Plan.</strong> Each success becomes a runbook: end state, milestones, checks, and recovery steps, never the finished answer.</li>
+            <li><strong>Screen.</strong> A critic rejects runbooks that leak the verifier or the solution and asks for revisions.</li>
+            <li><strong>Re-execute.</strong> The task is solved again in a fresh sandbox under one consistent harness. Only passing, leak-free runs are kept.</li>
+          </ol>
+        </div>
+        <div class="traj-visual reveal">
+          <svg class="traj-diagram" viewBox="0 0 640 300" role="img" aria-label="Successes from three harnesses are distilled into runbooks, screened by a critic, and re-executed into many verified trajectories under one harness">
+            <defs>
+              <marker id="tarrow" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto" markerUnits="userSpaceOnUse"><path d="M0 0 8 4 0 8z" class="t-arrow"/></marker>
+            </defs>
+            <text x="0" y="22" class="t-stage">Discover</text>
+            <text x="232" y="22" class="t-stage">Rewrite</text>
+            <text x="560" y="22" class="t-stage">Train</text>
+            <g class="t-src">
+              <circle cx="138" cy="70" r="5" class="src-a"/><text x="126" y="74" text-anchor="end">General loop</text>
+              <circle cx="138" cy="150" r="5" class="src-b"/><text x="126" y="154" text-anchor="end">Stateful workflow</text>
+              <circle cx="138" cy="230" r="5" class="src-c"/><text x="126" y="234" text-anchor="end">Self-reflect &amp; retry</text>
+            </g>
+            <path class="t-lane lane-a" d="M144 70C186 70 198 150 230 150"/>
+            <path class="t-lane lane-b" d="M144 150H230"/>
+            <path class="t-lane lane-c" d="M144 230C186 230 198 150 230 150"/>
+            <g class="t-node"><rect x="232" y="126" width="88" height="48" rx="12"/><text x="276" y="147" text-anchor="middle">Runbook</text><text x="276" y="163" text-anchor="middle" class="t-sub">planner</text></g>
+            <g class="t-node"><rect x="340" y="126" width="88" height="48" rx="12"/><text x="384" y="147" text-anchor="middle">Critic</text><text x="384" y="163" text-anchor="middle" class="t-sub">leak screen</text></g>
+            <g class="t-node t-node-strong"><rect x="448" y="126" width="96" height="48" rx="12"/><text x="496" y="147" text-anchor="middle">Re-execute</text><text x="496" y="163" text-anchor="middle" class="t-sub">fresh sandbox</text></g>
+            <path class="t-link" d="M320 150H336" marker-end="url(#tarrow)"/>
+            <path class="t-link" d="M428 150H444" marker-end="url(#tarrow)"/>
+            <path class="t-revise" d="M384 124C384 92 276 92 276 122" marker-end="url(#tarrow)"/>
+            <text x="330" y="88" text-anchor="middle" class="t-sub">revise</text>
+            <path class="t-out" d="M544 150C576 150 584 86 616 86"/>
+            <path class="t-out" d="M544 150C576 150 584 118 616 118"/>
+            <path class="t-out" d="M544 150H616"/>
+            <path class="t-out" d="M544 150C576 150 584 182 616 182"/>
+            <path class="t-out" d="M544 150C576 150 584 214 616 214"/>
+            <g class="t-ok"><circle cx="622" cy="86" r="5"/><circle cx="622" cy="118" r="5"/><circle cx="622" cy="150" r="5"/><circle cx="622" cy="182" r="5"/><circle cx="622" cy="214" r="5"/></g>
+            <text x="582" y="252" text-anchor="middle" class="t-sub">verified runs,</text>
+            <text x="582" y="268" text-anchor="middle" class="t-sub">one harness</text>
+          </svg>
+          <dl class="traj-metrics">
+            <div><dt>+34%</dt><dd>more tasks solved by pooling harnesses than by the best single harness</dd></div>
+            <div><dt>5.5×</dt><dd>verified training trajectories per successful source run</dd></div>
+            <div><dt>57% → 74%</dt><dd>Terminal-Bench 2 pass@3 after training on rewritten trajectories</dd></div>
+            <div><dt>+20.8 pts</dt><dd>over fine-tuning directly on the raw successes (Terminal-Bench 2)</dd></div>
+          </dl>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="difficulty" aria-labelledby="diff-title">
+      <div class="container diff-grid">
+        <div class="diff-copy reveal">
+          <p class="kicker">Calibrated difficulty</p>
+          <h2 id="diff-title">A curriculum, not a pile.</h2>
+          <p class="sub">Each synthesis round makes tasks measurably harder: longer solutions, more tools, more checks. In our runs, a fixed strong solver went from solving 90% of first-round tasks to 2.5% by round fifteen, with no ceiling in sight.</p>
+          <p class="sub">We measure your checkpoint on every tier and ship the band where it succeeds sometimes, but not yet reliably. As your model improves, the band moves up with it.</p>
+          <div class="slider-card">
+            <label for="ladder-strength">Where is your model today?</label>
+            <input id="ladder-strength" type="range" min="-3" max="4" step="0.1" value="0" aria-describedby="ladder-readout">
+            <div class="slider-ends"><span>Weaker</span><span id="ladder-strength-label">Reference solver</span><span>Stronger</span></div>
+            <p class="readout" id="ladder-readout" aria-live="polite"></p>
+          </div>
+        </div>
+        <figure class="chart-card reveal">
+          <svg id="ladder-chart" role="img" aria-label="Success rate by synthesis round, with the learning zone between 10 and 50 percent highlighted"></svg>
+          <figcaption>
+            <span class="legend-item"><i class="lg-zone"></i>Learning zone (10–50% success)</span>
+            <span class="legend-item"><i class="lg-bar"></i>Your model (modeled)</span>
+            <span class="legend-item"><i class="lg-line"></i>Reference solver</span>
+            <span class="legend-item"><i class="lg-dot"></i>Measured reference results (pass@4)</span>
+            <span class="note">Illustrative: the curve interpolates measured reference-solver results. Moving the slider shows how the recommended band shifts.</span>
+          </figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <section class="section" id="deliverables" aria-labelledby="deliv-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Deliverables</p>
+          <h2 id="deliv-title">Everything you need to train on it tomorrow.</h2>
+          <p class="sub">Delivered in a reproducible, container-first format that drops into SFT and RL pipelines, with adapters for your stack on request.</p>
+        </div>
+        <div class="deliv-grid">
+          <article class="deliv-card reveal">
+            <h3>RL environments</h3>
+            <p>Self-contained Docker environments with instruction, executable verifier, reference solution, and metadata, in Harbor task format.</p>
+          </article>
+          <article class="deliv-card reveal">
+            <h3>Verified trajectories</h3>
+            <p>Agent runs kept only when they pass the hidden checks, rewritten into one consistent harness, and exported as chat-format JSONL for fine-tuning.</p>
+          </article>
+          <article class="deliv-card reveal">
+            <h3>Calibration report</h3>
+            <p>Tier and measured pass rate for every task, against reference solvers or your own checkpoint.</p>
+          </article>
+          <article class="deliv-card reveal">
+            <h3>Integrity report &amp; data card</h3>
+            <p>Overlap audit against public benchmark test sets, shortcut controls, and sampled human review, plus the domains, tools, licenses, and known limitations of every batch.</p>
+          </article>
+          <article class="deliv-card tree-card reveal" aria-label="Example environment bundle">
+<pre class="tree"><code><span class="tr-dir">task/</span>
+├── instruction.md      <span class="tr-c"># what the agent sees</span>
+├── task.toml           <span class="tr-c"># tier, tags, timeouts</span>
+├── environment/
+│   └── Dockerfile      <span class="tr-c"># fresh, pinned sandbox</span>
+├── solution/
+│   └── solve.sh        <span class="tr-c"># reference solution</span>
+└── tests/
+    └── test_state.py   <span class="tr-c"># executable verifier</span>
+<span class="tr-dir">trajectories.jsonl</span>      <span class="tr-c"># verified agent runs</span>
+<span class="tr-dir">report.json</span>             <span class="tr-c"># calibration + audit</span></code></pre>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="benchmarks" aria-labelledby="bench-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Alignment</p>
+          <h2 id="bench-title">Built for the skills frontier evaluations measure.</h2>
+          <p class="sub">We train skills, not test items. No benchmark test data is used, copied, or derived, and every batch ships with an overlap audit.</p>
+        </div>
+        <div class="bench-grid">
+          <div class="bench-group reveal">
+            <h3>Terminal &amp; long-horizon agents</h3>
+            <ul class="chip-row"><li>Terminal-Bench 2</li><li>Terminal-Bench 4</li><li>Terminal-Bench Hard</li><li>Long-Horizon Terminal-Bench</li></ul>
+          </div>
+          <div class="bench-group reveal">
+            <h3>Multimodal SWE &amp; web</h3>
+            <ul class="chip-row"><li>SWE-bench Multimodal</li><li>Vision2Web</li><li>Interaction2Code</li><li>Design2Code</li></ul>
+          </div>
+          <div class="bench-group reveal">
+            <h3>CAD &amp; visual-to-code</h3>
+            <ul class="chip-row"><li>BenchCAD</li><li>Chart2Code</li><li>Image2Struct</li><li>MMSVGBench</li></ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="research" aria-labelledby="research-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Research</p>
+          <h2 id="research-title">Proven in our research.</h2>
+          <p class="sub">Each method is measured across multiple seeds and against matched-budget baselines.</p>
+        </div>
+        <div class="research-grid">
+          <article class="paper-card reveal">
+            <p class="paper-tag">Scientific software</p>
+            <h3>Software-in-the-loop reconstruction</h3>
+            <p>Existing scientific software becomes both the reference solution and the source of hidden test cases, so verification scales with the software rather than with authoring effort.</p>
+            <dl class="metrics">
+              <div><dt>+5.6 pts</dt><dd>Terminal-Bench 2 after fine-tuning (47.9% → 53.6%, three seeds)</dd></div>
+              <div><dt>#1 of 5</dt><dd>training corpora at a matched token budget, on all four evaluations</dd></div>
+              <div><dt>98%</dt><dd>verifier agreement with blinded human review</dd></div>
+            </dl>
+          </article>
+          <article class="paper-card reveal">
+            <p class="paper-tag">Task difficulty</p>
+            <h3>Recursive verified synthesis</h3>
+            <p>Accepted tasks seed the next round. Each round extends the solution, verifier, and instruction together and re-validates the whole task in a fresh sandbox, with no human authoring in the loop.</p>
+            <dl class="metrics">
+              <div><dt>+10 pts</dt><dd>best fine-tuning gain across Terminal-Bench 2, Terminal-Bench Hard, and LHTB</dd></div>
+              <div><dt>+41%</dt><dd>relative gain on Terminal-Bench Hard with agentic PPO</dd></div>
+              <div><dt>36×</dt><dd>drop in fixed-solver success from round 1 to 15 (90% → 2.5%), no ceiling observed</dd></div>
+            </dl>
+          </article>
+          <article class="paper-card reveal">
+            <p class="paper-tag">Trajectory scaling</p>
+            <h3>Recursive self-rewrite</h3>
+            <p>Successes discovered under diverse harnesses are rewritten by the same base model into one general harness, with leakage screening and fresh-sandbox re-execution.</p>
+            <dl class="metrics">
+              <div><dt>74.2%</dt><dd>Terminal-Bench 2 pass@3, up from 57.0%</dd></div>
+              <div><dt>6×</dt><dd>Terminal-Bench 4 pass@3, from 1.5% to 9.1%</dd></div>
+              <div><dt>+20.8 pts</dt><dd>over direct fine-tuning on the same successes</dd></div>
+            </dl>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-tint" id="engage" aria-labelledby="engage-title">
+      <div class="container">
+        <div class="section-head reveal">
+          <p class="kicker">Working together</p>
+          <h2 id="engage-title">Start small. Scale every month.</h2>
+        </div>
+        <div class="engage-grid">
+          <article class="engage-card reveal">
+            <span class="engage-num">01</span>
+            <h3>Pilot</h3>
+            <p>A calibrated sample batch in your format, measured on your checkpoint, for the task families that matter most to you.</p>
+          </article>
+          <article class="engage-card reveal">
+            <span class="engage-num">02</span>
+            <h3>Monthly refresh</h3>
+            <p>Fresh, never-published environments every month at the tiers you choose. Difficulty moves up as your model improves.</p>
+          </article>
+          <article class="engage-card reveal">
+            <span class="engage-num">03</span>
+            <h3>Custom &amp; exclusive</h3>
+            <p>New domains, software stacks, and modalities built for your team alone, on your timeline.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta" id="contact" aria-labelledby="cta-title">
+      <div class="container cta-inner reveal">
+        <h2 id="cta-title">Tell us what your next checkpoint needs to learn.</h2>
+        <p>We'll come back with a pilot plan: task families, difficulty tiers, delivery format, and a calibration run on your model.</p>
+        <div class="hero-actions center">
+          <a class="btn btn-light" data-contact data-subject="Pilot inquiry" href="#contact">Email us
+            <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-outline-light" href="#capabilities">Explore capabilities</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="container footer-inner">
+      <a class="brand" href="#top" aria-label="IntelligenceLab home">
+        <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</span>
+      </a>
+      <nav class="footer-links" aria-label="Footer">
+        <a href="#examples">Examples</a>
+        <a href="#trajectories">Trajectories</a>
+        <a href="#research">Research</a>
+        <a data-contact data-subject="Hello" href="#contact">Contact</a>
+      </nav>
+      <p class="footer-note">© <span data-year>2026</span> IntelligenceLab. Benchmark names belong to their respective authors and are listed for skill alignment only.</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 example">←</button>
+          <button class="icon-btn" type="button" data-ex-next aria-label="Next example">→</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>
+        <div class="ex-facts">
+          <div><h4>Software</h4><ul id="exm-software"></ul></div>
+          <div><h4>Agent observes</h4><ul id="exm-artifacts"></ul></div>
+          <div><h4>Hidden interventions</h4><ul id="exm-axes"></ul></div>
+          <div><h4>Graded on</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 configurations of these parameters and must match the software's outputs, field by field.</p>
+        <a class="btn btn-dark" id="exm-cta" data-contact data-subject="Sample request" href="#contact">Request the full sample
+          <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": "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.", "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"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "3D mesh", "img": "assets/examples/stl-detail.webp", "alt": "Rendered fan-duct mesh from a public OpenSCAD run"}, {"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.", "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"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "CFD mesh", "img": "assets/examples/foam-detail.webp", "alt": "OpenFOAM dam-break mesh drawn from the public polyMesh"}, {"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.", "software": ["KiCad"], "artifacts": ["DRC report", "project file list"], "axes": ["rows", "cols", "driver", "routing"], "outputs": ["DRC report summary", "project file inventory"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "PCB layout", "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.", "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"], "tracks": ["Terminal", "Coding"], "modality": "", "img": "assets/examples/container-detail.webp", "alt": "Container image layers and attestation from a public run"}, {"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.", "software": ["Blender"], "artifacts": ["scene graph JSON"], "axes": ["wind strength", "pin group", "frame", "cloth subdiv"], "outputs": ["evaluated objects", "frame", "materials", "node groups", "object counts", "rotation"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "3D scene", "img": "assets/examples/blender-detail.webp", "alt": "Blender cloth scene rotation dial across public scenarios"}, {"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.", "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"], "tracks": ["Terminal", "Coding"], "modality": "", "img": "assets/examples/robot-detail.webp", "alt": "MuJoCo joint-position trajectories across public scenarios"}, {"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.", "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"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "Microscopy images", "img": "assets/examples/micro-detail.webp", "alt": "Microscopy label masks from public runs"}, {"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.", "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"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "FITS images", "img": "assets/examples/astro-detail.webp", "alt": "Astronomy FITS cutouts 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.", "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"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "Document images", "img": "assets/examples/ocr-detail.webp", "alt": "OCR page preview from a public run"}, {"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.", "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"], "tracks": ["Terminal", "Coding", "Multimodal"], "modality": "Images", "img": "assets/examples/color-detail.webp", "alt": "Color-pipeline previews from public runs"}]</script>
+  <script src="app.js" defer></script>
+  <script src="live.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,891 @@
+:root {
+  --bg: #f6f7f4;
+  --surface: #ffffff;
+  --tint: #eef3f0;
+  --tint-2: #f3f6f4;
+  --ink: #0b1220;
+  --ink-2: #2b3648;
+  --muted: #5f6b7d;
+  --line: #e2e7e3;
+  --accent: #10b981;
+  --accent-deep: #047857;
+  --accent-soft: rgba(16, 185, 129, 0.12);
+  --indigo: #6366f1;
+  --violet: #7c5cdc;
+  --dark: #0a0f1a;
+  --radius: 18px;
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px -12px rgba(15, 23, 42, 0.12);
+  --shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.32);
+  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-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 { 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(11, 18, 32, 0.6); }
+.btn-dark:hover { background: #1b2538; }
+.btn-ghost { background: rgba(255, 255, 255, 0.75); border-color: var(--line); color: var(--ink); }
+.btn-ghost:hover { border-color: #c9d2cc; background: #fff; }
+.btn-light { background: #fff; color: var(--ink); }
+.btn-light:hover { box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.6); }
+.btn-outline-light { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
+.btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.6); }
+
+/* Navigation */
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(246, 247, 244, 0.78);
+  -webkit-backdrop-filter: saturate(1.5) blur(14px);
+  backdrop-filter: saturate(1.5) 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(15, 23, 42, 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; }
+.brand-mark { width: 30px; height: 30px; flex: none; }
+.nav-links { display: flex; gap: 30px; 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;
+  display: flex;
+  align-items: center;
+  min-height: clamp(640px, 88vh, 840px);
+}
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -3;
+  background-image:
+    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
+  background-size: 56px 56px;
+  -webkit-mask-image: radial-gradient(75% 65% at 45% 45%, #000 35%, transparent 100%);
+  mask-image: radial-gradient(75% 65% at 45% 45%, #000 35%, transparent 100%);
+}
+.hero-glow {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background:
+    radial-gradient(38% 48% at 14% 28%, rgba(16, 185, 129, 0.17), transparent 70%),
+    radial-gradient(34% 44% at 84% 36%, rgba(99, 102, 241, 0.15), transparent 70%),
+    radial-gradient(30% 34% at 52% 96%, rgba(20, 184, 166, 0.12), transparent 70%);
+}
+.hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
+.hero-inner { position: relative; }
+.hero-copy { max-width: 610px; padding: 64px 0 80px; }
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 14px 7px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid var(--line);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--accent-deep);
+  box-shadow: var(--shadow-sm);
+}
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
+  animation: ping 2.2s infinite;
+}
+@keyframes ping {
+  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
+  70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+}
+
+.hero h1 {
+  margin: 22px 0 22px;
+  font-size: clamp(42px, 5.7vw, 72px);
+  line-height: 1.02;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+.hero h1 mark {
+  color: inherit;
+  background: linear-gradient(transparent 56%, rgba(16, 185, 129, 0.3) 56%, rgba(16, 185, 129, 0.3) 92%, transparent 92%);
+  padding: 0 0.06em;
+}
+.lede { font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 570px; }
+.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
+.hero-actions.center { justify-content: center; }
+.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--ink-2); }
+.hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
+.hero-proof svg { width: 18px; height: 18px; color: var(--accent); }
+
+.tier-badges {
+  position: absolute;
+  top: 50%;
+  right: max(24px, calc((100% - 1200px) / 2));
+  z-index: 2;
+  display: grid;
+  gap: clamp(20px, 4.4vh, 40px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  transform: translateY(-50%);
+}
+.tier-badges li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 150px;
+  padding: 8px 14px 8px 8px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 13.5px;
+  font-weight: 600;
+  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.3);
+  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
+}
+.tier-badges li.glow { transform: translateX(-4px); border-color: color-mix(in srgb, var(--tier) 45%, white); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--tier) 70%, transparent); }
+.tier-num {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 24px;
+  border-radius: 7px;
+  background: var(--tier);
+  color: #fff;
+  font: 700 11px/1 var(--mono);
+}
+
+/* Marquee */
+.marquee { padding: 26px 0 30px; border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.55); }
+.marquee-title { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
+.marquee-track {
+  display: flex;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
+}
+.marquee-track ul {
+  display: flex;
+  flex: none;
+  gap: 52px;
+  margin: 0;
+  padding: 0 52px 0 0;
+  list-style: none;
+  animation: marquee 46s linear infinite;
+}
+.marquee-track li { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #8c97a6; white-space: nowrap; }
+@keyframes marquee { to { transform: translateX(-100%); } }
+
+/* Sections */
+.section { padding: clamp(80px, 10vw, 128px) 0; }
+.section-tint { background: var(--tint); }
+.section-head { max-width: 760px; margin-bottom: 52px; }
+.kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; }
+.section h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; }
+.sub { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 680px; }
+
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+.value-card {
+  padding: 28px 26px;
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.3s var(--ease), box-shadow 0.3s;
+}
+.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
+.value-card h3 { margin: 20px 0 10px; font-size: 18px; letter-spacing: -0.02em; }
+.value-card p { font-size: 15px; color: var(--muted); }
+.icon-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-deep); }
+.icon-tile svg { width: 24px; height: 24px; }
+
+.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.chip-row li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--tint-2); font-size: 13px; font-weight: 500; color: var(--ink-2); }
+
+/* Capability tabs */
+.tabs { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
+.tab-list { display: flex; flex-direction: column; gap: 6px; }
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid transparent;
+  border-radius: 14px;
+  background: transparent;
+  color: var(--ink-2);
+  font: 600 15px/1.3 var(--font);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
+}
+.tab:hover { background: rgba(255, 255, 255, 0.6); }
+.tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
+.tab-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(15, 23, 42, 0.05); color: var(--muted); transition: background-color 0.2s, color 0.2s; }
+.tab-icon svg { width: 21px; height: 21px; }
+.tab[aria-selected="true"] .tab-icon { background: var(--accent-soft); color: var(--accent-deep); }
+
+.tab-panels { border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); padding: 34px; }
+.tab-panel { display: grid; grid-template-columns: 1fr 1.08fr; gap: 34px; align-items: center; }
+.tab-panel[hidden] { display: none; }
+.tab-panel.is-active { animation: panel-in 0.45s var(--ease); }
+@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.panel-copy h3 { font-size: 24px; letter-spacing: -0.025em; }
+.panel-copy > p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
+.panel-copy .chip-row { margin-top: 18px; }
+.spec { margin: 22px 0 0; }
+.spec div { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
+.spec dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); padding-top: 2px; }
+.spec dd { margin: 0; font-size: 15px; color: var(--ink-2); }
+
+/* Mockups */
+.mock { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lg); }
+.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #f7f9f8; }
+.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dfe4e1; }
+.mock-bar em { margin-left: 8px; font: 500 11.5px var(--mono); font-style: normal; color: var(--muted); }
+.mock-bar.dark { background: #0f172a; border-color: #1e293b; }
+.mock-bar.dark i { background: #334155; }
+.mock-bar.dark em { color: #94a3b8; }
+.mock-chip {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  padding: 7px 12px;
+  border-radius: 999px;
+  border: 1px solid #a7f3d0;
+  background: #ecfdf5;
+  color: var(--accent-deep);
+  font-size: 12px;
+  font-weight: 700;
+  box-shadow: 0 8px 18px -10px rgba(4, 120, 87, 0.5);
+}
+
+.mock-terminal { background: #0b1220; border-color: #1e293b; }
+.term { margin: 0; padding: 18px 20px 24px; min-height: 250px; font: 12.5px/1.8 var(--mono); color: #e2e8f0; }
+.term code { white-space: normal; }
+.term .t-line { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.js .term .t-line { opacity: 0; transform: translateY(4px); }
+.js .is-active .term .t-line { animation: line-in 0.45s var(--ease) forwards; animation-delay: calc(var(--i) * 0.32s + 0.15s); }
+@keyframes line-in { to { opacity: 1; transform: none; } }
+.term b { color: #34d399; font-weight: 600; }
+.t-dim { color: #8b9ab0; }
+.t-verify { color: #a5b4fc; margin-top: 8px; }
+.t-ok { color: #34d399; font-weight: 600; }
+
+.mock-plot svg { padding: 6px 8px 40px; }
+.mock-plot .axis, .mock-split .axis { stroke: #cfd6d2; stroke-width: 1; }
+.wave { fill: none; stroke-width: 2; stroke-linejoin: round; }
+.wave-a { stroke: #14b8a6; opacity: 0.85; }
+.wave-b { stroke: #6366f1; opacity: 0.7; }
+.wave-hidden { stroke: #7c5cdc; stroke-dasharray: 5 5; opacity: 0.85; }
+.wave-recon { stroke: #10b981; stroke-width: 3; opacity: 0.95; }
+.js .wave-recon { stroke-dasharray: 1; stroke-dashoffset: 1; }
+.js .is-active .wave-recon { animation: draw 1.8s 0.5s var(--ease) forwards; }
+.legend text { font: 500 9.5px var(--font); fill: var(--muted); }
+.lg-a { fill: #14b8a6; }
+.lg-b { fill: #6366f1; }
+.lg-h { fill: #7c5cdc; }
+@keyframes draw { to { stroke-dashoffset: 0; } }
+
+.mock-cad { background: #fbfcfd; }
+.mock-cad svg { padding: 10px 10px 48px; }
+.mock-cad .paper { fill: #fbfcfd; stroke: none; }
+.mock-cad .part { fill: rgba(16, 185, 129, 0.07); stroke: #0b1220; stroke-width: 1.8; stroke-linejoin: round; }
+.js .mock-cad .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
+.js .is-active .mock-cad .draw { animation: draw 1.5s var(--ease) forwards; }
+.mock-cad .center { stroke: #94a3b8; stroke-width: 0.8; stroke-dasharray: 6 3 1 3; fill: none; }
+.mock-cad .dim { stroke: #64748b; stroke-width: 0.9; fill: none; }
+.mock-cad .arrow { fill: #64748b; }
+.mock-cad .dim-text { font: 600 10px var(--mono); fill: #334155; }
+.mock-cad .cad-section { fill: url(#hatch); stroke: #0b1220; stroke-width: 1.6; }
+.mock-cad .hatch-line { stroke: #a3afbf; stroke-width: 1; }
+.mock-cad .hidden-line { stroke: #0b1220; stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
+.mock-cad .label { font: 700 8.5px var(--font); letter-spacing: 0.1em; fill: #64748b; }
+.mock-cad .title-block rect, .mock-cad .title-block path { fill: none; stroke: #9aa6b5; stroke-width: 1; }
+.mock-cad .title-block text { font: 600 8.5px var(--mono); fill: #334155; }
+
+.mock-browser .url { margin-left: 10px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 11.5px var(--mono); color: var(--ink-2); }
+.browser-body { position: relative; min-height: 292px; padding: 16px; background: linear-gradient(#fff, #f8faf9); }
+.sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
+.sk-logo { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #10b981, #6366f1); }
+.sk-pill { width: 64px; height: 10px; border-radius: 6px; background: #e3e8e5; }
+.sk-pill.short { width: 40px; margin-left: auto; background: #0b1220; height: 22px; border-radius: 999px; }
+.sk-grid { display: grid; grid-template-columns: 92px 1fr; gap: 14px; }
+.sk-side { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 12px; background: #f1f4f2; }
+.sk-side span { height: 9px; border-radius: 5px; background: #d9e0dc; }
+.sk-side span.short { width: 60%; }
+.sk-main { display: grid; gap: 9px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
+.sk-row { height: 22px; border-radius: 7px; background: #f1f4f2; }
+.sk-row.head { background: #e6f7f0; }
+.sk-row.short { width: 70%; }
+.checklist {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  display: grid;
+  gap: 7px;
+  max-width: 280px;
+  margin: 0;
+  padding: 14px 16px;
+  list-style: none;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: var(--shadow-lg);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--ink-2);
+}
+.checklist li { display: flex; gap: 8px; align-items: baseline; }
+.checklist li::before { content: "✓"; flex: none; color: var(--accent); font-weight: 800; }
+.js .checklist li { opacity: 0; transform: translateX(6px); }
+.js .is-active .checklist li { animation: line-in 0.4s var(--ease) forwards; }
+.js .is-active .checklist li:nth-child(1) { animation-delay: 0.35s; }
+.js .is-active .checklist li:nth-child(2) { animation-delay: 0.65s; }
+.js .is-active .checklist li:nth-child(3) { animation-delay: 0.95s; }
+.js .is-active .checklist li:nth-child(4) { animation-delay: 1.25s; }
+
+.mock-split { display: grid; grid-template-columns: 1fr; }
+.split-chart { display: grid; place-items: center; padding: 18px 28px 10px; background: #fff; }
+.split-chart svg { width: 100%; max-height: 150px; }
+.bar-a { fill: #a7f3d0; }
+.bar-b { fill: #10b981; }
+.trend { fill: none; stroke: #6366f1; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
+.split-code { margin: 0; padding: 16px 20px 56px; background: #0b1220; color: #e2e8f0; font: 12px/1.75 var(--mono); white-space: pre-wrap; overflow: hidden; }
+.c-k { color: #c4b5fd; }
+.c-n { color: #fcd34d; }
+.c-s { color: #6ee7b7; }
+
+.mock-issue { padding-bottom: 54px; background: #fff; }
+.issue-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
+.issue-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #f26b5b; box-shadow: 0 0 0 4px rgba(242, 107, 91, 0.15); }
+.issue-shot { position: relative; height: 120px; margin: 14px 16px; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #f7f9f8; }
+.shot-nav { position: absolute; inset: 0 0 auto 0; height: 22px; background: #fff; border-bottom: 1px solid var(--line); }
+.shot-menu { position: absolute; top: 14px; left: 28%; width: 34%; height: 40px; border-radius: 6px; background: #fff; border: 1px solid #f5b4ab; box-shadow: 0 6px 14px -8px rgba(242, 107, 91, 0.6); }
+.shot-hero { position: absolute; top: 38px; left: 0; right: 0; bottom: 0; background: linear-gradient(120deg, #d1fae5, #e0e7ff); }
+.diff { margin: 0 16px; padding: 14px 16px; border-radius: 10px; background: #0b1220; color: #cbd5e1; font: 11.5px/1.75 var(--mono); }
+.diff code { white-space: normal; }
+.diff span { display: block; white-space: pre-wrap; }
+.d-h { color: #8b9ab0; }
+.d-del { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
+.d-add { color: #86efac; background: rgba(34, 197, 94, 0.12); }
+
+/* Pipeline (dark) */
+.section-dark {
+  color: #e5e7eb;
+  background:
+    radial-gradient(55% 70% at 85% 0%, rgba(99, 102, 241, 0.22), transparent 62%),
+    radial-gradient(50% 70% at 0% 100%, rgba(16, 185, 129, 0.18), transparent 62%),
+    var(--dark);
+}
+.section-dark h2, .section-dark h3 { color: #fff; }
+.section-dark .kicker { color: #6ee7b7; }
+.section-dark .sub { color: #a7b0bf; }
+.pipeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
+.pipeline::before, .pipeline::after {
+  content: "";
+  position: absolute;
+  top: 22px;
+  left: 22px;
+  right: calc(20% - 22px);
+  height: 2px;
+  border-radius: 2px;
+}
+.pipeline::before { background: rgba(255, 255, 255, 0.1); }
+.pipeline::after {
+  background: linear-gradient(90deg, #10b981, #6366f1);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 1.8s var(--ease) 0.25s;
+}
+.pipeline.is-visible::after { transform: scaleX(1); }
+.pipeline li { position: relative; }
+.step-dot {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: #111827;
+  color: #fff;
+  font: 700 15px/1 var(--mono);
+  transition: background 0.5s, box-shadow 0.5s, border-color 0.5s;
+  transition-delay: calc(var(--d) * 0.32s + 0.35s);
+}
+.pipeline.is-visible .step-dot { border-color: transparent; background: linear-gradient(135deg, #10b981, #6366f1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.12); }
+.pipeline h3 { margin: 22px 0 8px; font-size: 19px; letter-spacing: -0.02em; }
+.pipeline p { font-size: 14.5px; color: #a7b0bf; }
+.gate-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 56px 0 0; padding: 26px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.1); }
+.gate-row li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); font-size: 13.5px; font-weight: 500; color: #d7dce4; }
+.gate-row li::before { content: "✓"; color: #34d399; font-weight: 800; }
+
+/* Difficulty */
+.diff-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; }
+.diff-copy .sub + .sub { margin-top: 14px; }
+.slider-card { margin-top: 30px; padding: 22px 22px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
+.slider-card label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 15px; }
+.slider-card input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
+.slider-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
+#ladder-strength-label { font-weight: 700; color: var(--ink); }
+.readout { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
+.readout strong { color: var(--accent-deep); }
+
+.chart-card { margin: 0; padding: 22px 22px 18px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
+.chart-card svg { width: 100%; height: auto; }
+.chart-card figcaption { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
+.legend-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
+.lg-zone { width: 16px; height: 10px; border-radius: 2px; background: rgba(16, 185, 129, 0.16); border: 1px dashed rgba(4, 120, 87, 0.5); }
+.lg-bar { width: 12px; height: 10px; border-radius: 2px; background: var(--accent); }
+.lg-line { width: 18px; border-top: 2px dashed var(--indigo); }
+.lg-dot { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--indigo); background: #fff; }
+.chart-card .note { width: 100%; color: var(--muted); font-size: 12px; }
+#ladder-chart .zone { fill: rgba(16, 185, 129, 0.09); }
+#ladder-chart .zone-edge { stroke: rgba(4, 120, 87, 0.35); stroke-dasharray: 3 4; }
+#ladder-chart .zone-label { font: 700 11px var(--font); fill: var(--accent-deep); }
+#ladder-chart .grid { stroke: #e8ece9; }
+#ladder-chart .tick { font: 500 11px var(--font); fill: #7b8794; }
+#ladder-chart .axis-label { font: 600 11.5px var(--font); fill: var(--muted); }
+#ladder-chart .bar { fill: #d6dde3; transition: fill 0.3s; }
+#ladder-chart .bar.in-zone { fill: var(--accent); }
+#ladder-chart .ref-line { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-dasharray: 5 4; }
+#ladder-chart .anchor { fill: #fff; stroke: var(--indigo); stroke-width: 2.5; }
+#ladder-chart .anchor-label { font: 700 11px var(--font); fill: #4338ca; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
+
+/* Deliverables */
+.deliv-grid { display: grid; grid-template-columns: 1fr 1fr 1.12fr; gap: 20px; }
+.deliv-card { padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
+.deliv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
+.deliv-card h3 { position: relative; padding-top: 18px; font-size: 18px; letter-spacing: -0.02em; }
+.deliv-card h3::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--indigo)); }
+.deliv-card p { margin-top: 10px; font-size: 15px; color: var(--muted); }
+.tree-card { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; padding: 0; overflow: hidden; border-color: #1e293b; background: #0b1220; }
+.tree-card:hover { transform: none; }
+.tree { margin: 0; padding: 24px 24px; overflow-x: auto; font: 12.5px/1.85 var(--mono); color: #cbd5e1; }
+.tr-dir { color: #6ee7b7; font-weight: 600; }
+.tr-c { color: #64748b; }
+
+/* Benchmarks */
+.bench-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.bench-group { padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
+.bench-group h3 { margin-bottom: 16px; font-size: 16.5px; letter-spacing: -0.015em; }
+.bench-group .chip-row li { background: #fff; font-weight: 600; }
+
+/* Research */
+.research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
+.paper-card { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
+.paper-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.paper-card h3 { margin: 10px 0 12px; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
+.paper-card > p:not(.paper-tag) { color: var(--muted); font-size: 15px; }
+.metrics { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 22px 0 24px; }
+.metrics div { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--tint); }
+.metrics dt { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-deep); line-height: 1.15; white-space: nowrap; }
+.metrics dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
+/* Engagement */
+.engage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.engage-card { position: relative; overflow: hidden; padding: 30px 28px; 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; }
+.engage-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 185, 129, 0.16), transparent 70%); transition: transform 0.5s var(--ease); }
+.engage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
+.engage-card:hover::after { transform: scale(1.3); }
+.engage-num { font: 700 13px var(--mono); color: var(--accent-deep); }
+.engage-card h3 { margin: 14px 0 10px; font-size: 22px; letter-spacing: -0.025em; }
+.engage-card p { color: var(--muted); font-size: 15.5px; }
+
+/* CTA + footer */
+.cta {
+  padding: clamp(84px, 10vw, 124px) 0;
+  text-align: center;
+  color: #fff;
+  background:
+    radial-gradient(60% 110% at 50% 0%, rgba(16, 185, 129, 0.3), transparent 62%),
+    radial-gradient(45% 90% at 100% 100%, rgba(99, 102, 241, 0.32), transparent 62%),
+    var(--dark);
+}
+.cta h2 { max-width: 820px; margin-inline: auto; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; }
+.cta p { max-width: 640px; margin: 18px auto 0; font-size: 17.5px; color: #b7c0cd; }
+.footer { padding: 30px 0 34px; background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.08); color: #9aa4b2; }
+.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
+.footer .brand { color: #fff; }
+.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; }
+
+/* Offerings */
+.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
+.offer-card { display: flex; flex-direction: column; overflow: hidden; 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; }
+.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
+.offer-card h3 { margin: 22px 26px 8px; font-size: 24px; letter-spacing: -0.025em; }
+.offer-card > p { margin: 0 26px; font-size: 15.5px; color: var(--muted); }
+.offer-top { display: grid; align-content: center; height: 176px; border-bottom: 1px solid var(--line); }
+.offer-terminal, .offer-code { gap: 2px; padding: 18px 22px; background: #0b1220; border-color: #1e293b; color: #dbe3ee; font: 11.5px/1.7 var(--mono); white-space: pre; overflow: hidden; }
+.offer-terminal b { color: #34d399; }
+.offer-terminal .dim { color: #8b9ab0; }
+.offer-terminal .ok { color: #34d399; font-weight: 600; }
+.offer-code i { font-style: normal; }
+.offer-visual { background: linear-gradient(180deg, #f5f3ff, #fff); }
+.offer-visual img { width: 100%; height: 176px; object-fit: cover; }
+.offer-list { display: grid; gap: 9px; margin: 18px 26px 26px; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
+.offer-list li { display: flex; gap: 10px; align-items: baseline; }
+.offer-list li::before { content: "✓"; flex: none; color: var(--accent); font-weight: 800; }
+.offer-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 28px; padding: 18px 22px; border-radius: 18px; border: 1px dashed #c9d6cf; background: rgba(255, 255, 255, 0.6); }
+.offer-band > span { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
+.offer-band ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.offer-band li { padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; }
+
+/* Examples */
+.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 { aspect-ratio: 740 / 394; overflow: hidden; border-bottom: 1px solid var(--line); background: #f7f8fb; }
+.ex-thumb > img { width: 100%; height: 100%; object-fit: cover; }
+.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-terminal { background: #0b1220; color: #fff; }
+.trk-coding { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
+.trk-multimodal { background: var(--accent-soft); color: var(--accent-deep); }
+.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; background: var(--tint-2); border: 1px solid var(--line); 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(11, 18, 32, 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(8, 12, 22, 0.55); -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, #10b981) 80%, #0b1220); }
+.ex-domain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dc, #10b981); }
+.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; gap: 8px; flex: none; }
+.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 { background: var(--tint-2); border-color: #c9d2cc; }
+.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-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(--accent); font-size: 15px; color: var(--muted); }
+body.modal-open { overflow: hidden; }
+
+/* Live example previews */
+.ex-thumb { position: relative; }
+.ex-thumb > img { transition: opacity 0.5s ease, transform 0.6s var(--ease); }
+.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, #10b981) 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, #10b981); box-shadow: 0 0 14px 2px var(--dc, #10b981); 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%; } }
+
+/* Trajectory scaling */
+.traj-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
+.traj-steps { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: step; }
+.traj-steps li { position: relative; padding-left: 46px; font-size: 15.5px; color: var(--ink-2); counter-increment: step; }
+.traj-steps li::before {
+  content: counter(step);
+  position: absolute;
+  left: 0;
+  top: -2px;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--indigo));
+  color: #fff;
+  font: 700 13px/1 var(--mono);
+}
+.traj-steps strong { color: var(--ink); }
+.traj-visual { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
+.traj-diagram { width: 100%; height: auto; }
+.traj-diagram text { font: 600 11.5px var(--font); fill: var(--ink-2); }
+.traj-diagram .t-stage { font: 700 10.5px var(--font); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--accent-deep); }
+.traj-diagram .t-sub { font: 500 10px var(--mono); fill: var(--muted); }
+.traj-diagram .src-a { fill: #14b8a6; }
+.traj-diagram .src-b { fill: #6366f1; }
+.traj-diagram .src-c { fill: #7c5cdc; }
+.traj-diagram .t-lane { fill: none; stroke-width: 2.5; stroke-dasharray: 5 6; animation: flow 1.6s linear infinite; }
+.traj-diagram .lane-a { stroke: #14b8a6; }
+.traj-diagram .lane-b { stroke: #6366f1; }
+.traj-diagram .lane-c { stroke: #7c5cdc; }
+.traj-diagram .t-node rect { fill: #fff; stroke: #cfd8d3; stroke-width: 1.4; }
+.traj-diagram .t-node-strong rect { fill: #ecfdf5; stroke: var(--accent); }
+.traj-diagram .t-link { fill: none; stroke: #94a3b8; stroke-width: 1.6; }
+.traj-diagram .t-revise { fill: none; stroke: #f26b5b; stroke-width: 1.4; stroke-dasharray: 3 4; }
+.traj-diagram .t-arrow { fill: #94a3b8; }
+.traj-diagram .t-out { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 5; animation: flow 1.2s linear infinite; }
+.traj-diagram .t-ok circle { fill: var(--accent); }
+@keyframes flow { to { stroke-dashoffset: -22; } }
+.traj-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0 0; }
+.traj-metrics div { padding: 14px 16px; border-radius: 16px; background: var(--tint); }
+.traj-metrics dt { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-deep); white-space: nowrap; }
+.traj-metrics dd { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
+/* 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; }
+.grid-4 .reveal:nth-child(2), .deliv-grid .reveal:nth-child(2), .engage-grid .reveal:nth-child(2), .bench-grid .reveal:nth-child(2), .research-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
+.grid-4 .reveal:nth-child(3), .deliv-grid .reveal:nth-child(3), .engage-grid .reveal:nth-child(3), .bench-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
+.grid-4 .reveal:nth-child(4), .deliv-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
+.deliv-grid .reveal:nth-child(5) { transition-delay: 0.32s; }
+.deliv-grid .reveal:nth-child(6) { transition-delay: 0.4s; }
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .nav-links { display: none; }
+  .nav-toggle { display: inline-flex; }
+  .nav-cta .btn { display: none; }
+  .tier-badges { display: none; }
+  .hero-canvas { opacity: 0.6; }
+  .grid-4 { grid-template-columns: repeat(2, 1fr); }
+  .tabs { grid-template-columns: minmax(0, 1fr); }
+  .tab-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
+  .tab-list::-webkit-scrollbar { display: none; }
+  .tab { width: auto; white-space: nowrap; }
+  .tab-panel { grid-template-columns: minmax(0, 1fr); }
+  .pipeline { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
+  .pipeline::before, .pipeline::after { display: none; }
+  .diff-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
+  .deliv-grid { grid-template-columns: repeat(2, 1fr); }
+  .tree-card { grid-column: 1 / -1; grid-row: auto; }
+  .bench-grid, .research-grid, .engage-grid { grid-template-columns: minmax(0, 1fr); }
+  .offer-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
+  .ex-grid { grid-template-columns: repeat(2, 1fr); }
+  .ex-facts { grid-template-columns: repeat(2, 1fr); }
+  .traj-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
+}
+
+@media (max-width: 640px) {
+  .container { width: min(1200px, 100% - 36px); }
+  .hero { min-height: auto; }
+  .hero-copy { padding: 48px 0 64px; }
+  .grid-4, .deliv-grid, .pipeline { grid-template-columns: 1fr; }
+  .tab-panels { padding: 20px; border-radius: 20px; }
+  .spec div { grid-template-columns: 1fr; gap: 4px; }
+  .metrics { grid-template-columns: 1fr; }
+  .tree { padding: 18px; font-size: 10.5px; }
+  .ex-grid, .ex-facts, .traj-metrics { grid-template-columns: 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; }
+  .metrics div { grid-template-columns: 88px 1fr; }
+  .traj-visual { padding: 16px; }
+  .checklist { position: static; margin-top: 14px; max-width: none; }
+  .paper-card { padding: 24px; }
+}
+
+@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; }
+  .marquee-track ul { animation: none; }
+}