(() => { '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.dataset.nav || entry.target.id); if (active) active.classList.add('is-active'); }); }, { rootMargin: '-45% 0px -50% 0px' }); $$('main > section[id]').forEach((section) => observer.observe(section)); } function initReveal() { const items = $$('.reveal'); if (reduceMotion || !('IntersectionObserver' in window)) { items.forEach((el) => el.classList.add('is-visible')); return; } const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }); }, { rootMargin: '0px 0px -8% 0px', threshold: 0.12 }); items.forEach((el) => observer.observe(el)); } function 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: ${span}, where this model succeeds 10–50% of the time.`; } else if (target[ROUNDS - 1] > HIGH) { readout.innerHTML = 'This model has outgrown the ladder: we synthesize further rounds.'; } else { readout.innerHTML = 'Start with warm-up tiers 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(); })();