From f54c56d53263aa9736c238d4f845961650f6c681 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 6 Mar 2026 05:54:43 +0000 Subject: [PATCH 1/5] Create Continuum benchmark landing page Co-authored-by: ilikevibecoding --- README.md | 49 +- index.html | 2325 +++++++++++----------------------------------------- script.js | 334 ++++++++ styles.css | 1246 ++++++++++++++++++++++++++++ 4 files changed, 2091 insertions(+), 1863 deletions(-) create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md index 7cd7415..b6e790d 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,27 @@ -# Bombsite Breach +# Continuum -Bombsite Breach is a self-contained browser tactical shooter inspired by the CS:GO retake loop. -The whole prototype lives in `index.html` with no dependencies or build step. +Continuum is a polished, dependency-free static website concept for a **continuous learning benchmark**. +It presents a fictional benchmark brand, methodology, task suite, and illustrative leaderboard in a +single-page experience designed for research launches, benchmark announcements, or demo microsites. ## What is included -- Top-down tactical shooter gameplay -- Bombsite A retake scenario with a live bomb timer -- Enemy bots with patrol, sightlines, and combat behavior -- Weapon switching between USP-S, M4A1-S, and AWP -- Reloading, armor, round transitions, score tracking, and HUD updates -- Defuse mechanic with a hold-to-complete progress bar +- A premium dark-mode landing page with a strong hero section +- Benchmark positioning focused on retention, adaptation, transfer, and robustness +- Task-suite tabs with domain-specific benchmark descriptions +- An illustrative leaderboard rendered from lightweight client-side data +- FAQ interactions, animated counters, scroll reveals, and section-aware nav highlighting +- Fully static hosting with no framework, no bundler, and no runtime dependencies -## How to run +## File structure + +- `index.html` — semantic page structure and content +- `styles.css` — design system, layout, responsiveness, and visual effects +- `script.js` — lightweight interactions and data-driven rendering -Open `index.html` in a desktop browser. +## How to run -If you want to serve it locally instead of opening the file directly: +Open `index.html` directly in a browser, or serve the directory locally: ```bash python3 -m http.server 8000 @@ -24,19 +29,13 @@ python3 -m http.server 8000 Then visit `http://localhost:8000`. -## Controls +## Customization notes -- `WASD` - move -- `Shift` - slow walk for tighter spread -- `Mouse` - aim -- `Left Click` - fire -- `R` - reload -- `1` - USP-S -- `2` - M4A1-S -- `3` - AWP -- `E` - hold to defuse when near the bomb -- `Enter` or `Space` - start the match from the intro screen +- Update the benchmark name, copy, and CTA language in `index.html` +- Replace the illustrative task-suite and leaderboard data in `script.js` +- Adjust colors, spacing, and visual style tokens in `styles.css` -## Objective +## Notes -You play as the counter-terrorist on a solo retake. Eliminate defenders if needed, but the round is only won once the bomb is defused before the timer expires. \ No newline at end of file +The benchmark content and scores are intentionally fictional, but the site structure is designed to be a +practical starting point for a real benchmark launch page. diff --git a/index.html b/index.html index 5ef4407..226d1fe 100644 --- a/index.html +++ b/index.html @@ -3,1871 +3,520 @@ - Bombsite Breach - + Continuum — A benchmark for continuous learning agents + + + + + + + + - - -
-
-
- Objective -
Retake site A
-
Move through cover, clear defenders, and hold E on the bomb.
+ + +
+ + + + + + + +
+
+
+
+ Preview benchmark · Version 0.9 +

+ A benchmark for agents that + keep learning + after the world changes. +

+

+ Continuum measures what static leaderboards miss: whether a model can adapt to + new tasks, retain what it learned yesterday, and stay robust through repeated + distribution shifts without collapsing into catastrophic forgetting. +

+ +
+ Explore the benchmark + View methodology +
+ +
+
+ Domains + 0 + language, vision, memory, tools, planning, control +
+
+ Task variants + 0+ + staged, curriculum-driven, and non-stationary +
+
+ Shift cycles + 0 + re-evaluation after every perturbation wave +
+
+
-
- Round State -
00:00
-
- 0 - - - 0 +
+
+
+
+ Composite benchmark index +

Frontier systems should improve without forgetting.

+
+ Live preview +
+ +
+
+
+ Mean score + 84.6 + / 100 +
+
+ +
+
+ Retention + 92% +
+
+
+ Adaptation latency + 4.8 episodes +
+
+
+ Forward transfer + +17 pts +
+
+
+
+ +
+
+ Curriculum shift map + Increasing pressure +
+ +
+ pretrain + drift + tool swap + memory stress + recovery +
+ + +
+
+
-
Round 1
-
-
- Intel -
-
- Enemies - 0 -
-
- Bomb - Armed +
+ Designed for continual evaluation across +
+ Retention + Rapid adaptation + Transfer + Robustness + Versioned shifts
-
- Loadout - M4A1-S +
+
+ +
+
+
+ Why static evaluation fails +

Most leaderboards reward frozen competence, not durable learning.

+

+ Real agents do not live in one snapshot. They receive new tools, face changing + environments, and must preserve earlier skills while improving on unfamiliar ones. + Continuum turns that reality into a measurable benchmark. +

-
- Ammo - 30 / 90 + +
+
+ 01 +

Distribution shift is staged on purpose

+

+ Each curriculum wave changes inputs, reward structure, interface assumptions, + or memory pressure so benchmark scores reflect adaptation under drift. +

+
+
+ 02 +

Retention is measured after every improvement

+

+ Agents are repeatedly sent back to earlier tasks. If new gains erase prior + capability, Continuum penalizes them immediately. +

+
+
+ 03 +

Transfer matters as much as raw score

+

+ We care about whether learning one task makes the next one easier, not only + whether a system can brute-force each stage in isolation. +

+
+
+ 04 +

Benchmark versions are explicit and comparable

+

+ Shift packs are versioned so labs can report progress over time without losing + comparability or quietly overfitting to an outdated suite. +

+
-
-
+ + +
+
+
+ Benchmark anatomy +

One score, four dimensions, many ways to fail gracefully.

+

+ Continuum aggregates complementary signals so a model cannot top the chart by + excelling at one dimension while silently forgetting everything else. +

+ +
+
+
+ Retention score + 0% +
+

Re-tested performance on previously solved tasks after later training waves.

+
+
+
+ Adaptation episodes + 0 +
+

Median episodes required to recover 90% of peak performance after a shift.

+
+
+
+ Forward transfer + +0 +
+

Improvement on unseen downstream tasks attributable to prior curriculum stages.

+
+
+
+ Robustness variance + 0% +
+

Performance volatility under interface changes, hidden resets, and sparse feedback.

+
+
+
-
-
- Player Status -
-
- Health - 100 +
+
+
+ Evaluation surface +

Balanced systems form a wider frontier.

+
+ Weighted composite +
+ + + +
+
+ + Continuum frontier model +
+
+ + Static benchmark specialist +
+
+ +
    +
  • Retention and transfer are rewarded together.
    • +
  • Latency penalties prevent "eventual" recovery from dominating.
    • +
  • Shift robustness keeps brittle systems from hiding behind mean averages.
    • +
+
+
+
+ +
+
+
+ Task suite +

A curriculum built to expose forgetting, not flatter it.

+

+ Each domain introduces a different failure mode. The benchmark rotates through + domain-specific shifts and then returns to older checkpoints to test what survived. +

-
- Armor - 100 + +
+
+ + + + +
+ +
-
- Position - Spawn +
+
+ +
+
+
+ Leaderboard snapshot +

Scores that reward durable improvement, not one-off wins.

+

+ Leaderboard entries below are illustrative, but the scoring logic is real: + retention, adaptation speed, transfer, and robustness combine into a single + weighted benchmark index. +

-
- Hint - Hold angles + +
+
+ Scoring weights + 35% retention · 25% adaptation · 25% transfer · 15% robustness +
+
+ Submission cadence + Versioned quarterly with frozen replay packs +
-
-
-
- Weapons -
-
-
1 - USP-S
-
12 / 48
+
+
+
+ +
+
+
+ Methodology +

Evaluate, perturb, revisit, measure what actually sticks.

+

+ Continuum is intentionally cyclic. Systems do not simply advance through tasks; they + repeatedly return to older skills under new assumptions so retention becomes visible. +

-
-
2 - M4A1-S
-
30 / 90
+ +
+
+ 01 +

Establish the capability floor

+

Agents complete a balanced seed curriculum across six domains and expose their initial frontier.

+
+
+ 02 +

Inject a controlled shift

+

Interfaces, reward sparsity, sensory noise, or available tools change without altering the underlying objective.

+
+
+ 03 +

Measure recovery and transfer

+

We track how quickly the system climbs back, whether prior experience helps, and where it wastes samples.

+
+
+ 04 +

Re-test old skills under pressure

+

Previously solved tasks return with latency budgets and hidden recalls to quantify forgetting explicitly.

+
-
-
3 - AWP
-
5 / 20
+ +
+
+ Versioning policy +

Every benchmark release ships with frozen replay packs and drift notes.

+

+ Submissions remain comparable inside each release train, while newer versions add + fresh shift packs to keep the benchmark from becoming stale or gameable. +

+
-
-
- -
- - -
- -
- -
-
- Counter-Strike inspired browser prototype -

Bombsite Breach

-

- A compact, no-dependency CS-style clone built in one file. You play the lone - counter-terrorist on a retake: clear site A, outduel the defenders, and defuse the bomb - before the round timer hits zero. -

+ + +
+
+
+ Frequently asked questions +

Built for researchers, model builders, and benchmark skeptics.

+

+ Continuum is designed to be interpretable. The questions below cover why it exists, + how it stays honest, and what a strong result actually means. +

+
-
-
-

Move and peek

-

WASD to move. Hold Shift to slow-walk and tighten your spread when slicing corners.

-
-
-

Aim and shoot

-

Mouse to aim. Left click to fire. Press R to reload and manage magazines between fights.

+
+
+ +
+

+ Static benchmarks score a frozen snapshot. Continuum repeatedly changes the + environment and re-tests earlier skills so learning dynamics, retention, and + transfer become part of the score. +

+
+
+
+ +
+

+ Public specs define the structure of shifts, not every concrete instance. + Frozen replay packs are versioned, and hidden holdout perturbations are used + to evaluate whether policies generalize beyond public examples. +

+
+
+
+ +
+

+ No single benchmark can do that. A high Continuum score means the system is + unusually good at learning under repeated change without forgetting, which is + a useful but still partial signal. +

+
+
+
+ +
+

+ Yes. The site is fully static and dependency-free. Swap the placeholder + benchmark data in the script file, update copy, and it is ready to serve as a + polished launch page for a real evaluation suite. +

+
+
+
-
-

Swap weapons

-

Press 1 for USP-S, 2 for M4A1-S, and 3 for the AWP depending on the angle you want.

+
+ +
+
+
+
+ Ready for launch +

Build a leaderboard that rewards learning, not memorization.

+

+ Use Continuum as the visual and conceptual starting point for a benchmark site + that feels more like a research product than a static landing page. +

+
+
+ Back to top + Read the FAQ +
+
-
-

Win the round

-

Eliminate defenders if you must, but the bomb stays live. Reach it and hold E to complete the defuse.

+
+ + +
- + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e305c41 --- /dev/null +++ b/script.js @@ -0,0 +1,334 @@ +const suiteData = { + language: { + eyebrow: "Language adaptation", + title: "Instruction following that survives goal drift", + description: + "Language tasks begin with clean instructions and gradually introduce ambiguity, style drift, compressed context windows, and contradictory retrieval cues. Strong agents adapt while preserving earlier instruction hierarchies and formatting behavior.", + pills: ["retrieval drift", "context compression", "multi-step repair", "memory recall probes"], + notes: [ + { + title: "Representative tasks", + body: "Summarization under changing rubric weights, retrieval-conditioned writing, preference shifts, and long-horizon instruction repair." + }, + { + title: "Failure mode exposed", + body: "Models that improve on the latest prompt style but quietly forget earlier formatting and retrieval conventions." + }, + { + title: "Primary metric", + body: "Retention-weighted success after language policy changes and delayed recall checkpoints." + } + ] + }, + tools: { + eyebrow: "Tool use adaptation", + title: "Policies that keep working after the interface changes", + description: + "Tool-use tracks swap parameter schemas, response latency, observability limits, and error semantics. The best systems recover quickly and preserve prior operational competence even when the same objective requires a different interaction pattern.", + pills: ["API schema swap", "latency spikes", "hidden retries", "degraded observability"], + notes: [ + { + title: "Representative tasks", + body: "Search-and-cite workflows, calculator chains, data cleaning pipelines, and chained browsing actions under revised tool contracts." + }, + { + title: "Failure mode exposed", + body: "Agents that memorize one happy-path API surface and fail as soon as argument order, tool names, or retry semantics move." + }, + { + title: "Primary metric", + body: "Median episodes to recover task completion with penalties for irreversible tool misuse." + } + ] + }, + vision: { + eyebrow: "Vision adaptation", + title: "Perception that remains stable under sensory drift", + description: + "Vision tasks introduce lighting shifts, crop noise, symbol remapping, and object co-occurrence changes. Continuum checks whether perception improves on new conditions without erasing earlier recognition behavior.", + pills: ["lighting shift", "camera jitter", "symbol remap", "rare object replay"], + notes: [ + { + title: "Representative tasks", + body: "Scene classification, chart reading, OCR repair, and object grounding under repeated perturbation waves." + }, + { + title: "Failure mode exposed", + body: "Specialists that tune to the latest visual distribution but lose robustness on previously solved sensory conditions." + }, + { + title: "Primary metric", + body: "Cross-shift accuracy area under the retention curve, weighted by replay difficulty." + } + ] + }, + agents: { + eyebrow: "Agentic control", + title: "Long-horizon control with memory, planning, and recovery", + description: + "Agentic control sequences test whether a system can maintain plans when constraints change mid-episode. Memory budgets shrink, subgoals reorder, and partial observability increases while older route patterns still matter.", + pills: ["memory pressure", "goal reorder", "sparse reward", "hidden resets"], + notes: [ + { + title: "Representative tasks", + body: "Web navigation, workflow automation, embodied grid planning, and multi-stage repair tasks under interrupted state." + }, + { + title: "Failure mode exposed", + body: "Agents that relearn every perturbation from scratch instead of carrying over useful structure from previous control policies." + }, + { + title: "Primary metric", + body: "Composite score blending adaptation latency, final success, and recall on previously mastered control routines." + } + ] + } +}; + +const leaderboardData = [ + { + rank: "#1", + name: "Northstar-XL", + tagline: "Balanced frontier model with strong replay retention", + score: "84.6", + metrics: [ + { label: "Retention", value: "92%", score: "92%" }, + { label: "Adaptation", value: "88", score: "88%" }, + { label: "Transfer", value: "81", score: "81%" }, + { label: "Robustness", value: "76", score: "76%" } + ] + }, + { + rank: "#2", + name: "Helix-Agent", + tagline: "Fast recovery under tool drift, moderate memory stability", + score: "79.3", + metrics: [ + { label: "Retention", value: "84%", score: "84%" }, + { label: "Adaptation", value: "91", score: "91%" }, + { label: "Transfer", value: "73", score: "73%" }, + { label: "Robustness", value: "68", score: "68%" } + ] + }, + { + rank: "#3", + name: "StaticMax-Pro", + tagline: "Excellent on frozen tasks, weaker under repeated shifts", + score: "67.9", + metrics: [ + { label: "Retention", value: "69%", score: "69%" }, + { label: "Adaptation", value: "62", score: "62%" }, + { label: "Transfer", value: "58", score: "58%" }, + { label: "Robustness", value: "66", score: "66%" } + ] + } +]; + +function renderSuitePanel(tabKey) { + const panel = document.getElementById("suitePanel"); + const tab = suiteData[tabKey]; + + if (!panel || !tab) { + return; + } + + panel.innerHTML = ` +
+
+ ${tab.eyebrow} +

${tab.title}

+

${tab.description}

+
+ ${tab.pills.map((pill) => `${pill}`).join("")} +
+
+
+ ${tab.notes + .map( + (note) => ` +
+ ${note.title} + ${note.body} +
+ ` + ) + .join("")} +
+
+ `; +} + +function renderLeaderboard() { + const grid = document.getElementById("leaderboardGrid"); + + if (!grid) { + return; + } + + grid.innerHTML = leaderboardData + .map( + (entry) => ` +
+ ${entry.rank} +

${entry.name}

+

${entry.tagline}

+
+ ${entry.score} + composite score +
+
+ ${entry.metrics + .map( + (metric) => ` +
+
+ ${metric.label} + ${metric.value} +
+
+
+
+
+ ` + ) + .join("")} +
+
+ ` + ) + .join(""); +} + +function initCounters() { + const counters = document.querySelectorAll("[data-count]"); + const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; + + counters.forEach((counter) => { + const target = Number(counter.dataset.count); + const decimals = String(target).includes(".") ? 1 : 0; + + if (reducedMotion) { + counter.textContent = target.toFixed(decimals); + return; + } + + let current = 0; + const duration = 1100; + const start = performance.now(); + + const tick = (timestamp) => { + const progress = Math.min(1, (timestamp - start) / duration); + const eased = 1 - Math.pow(1 - progress, 3); + current = target * eased; + counter.textContent = current.toFixed(decimals).replace(/\.0$/, ""); + + if (progress < 1) { + requestAnimationFrame(tick); + } + }; + + requestAnimationFrame(tick); + }); +} + +function initRevealAnimations() { + const items = document.querySelectorAll(".reveal"); + + if (!("IntersectionObserver" in window)) { + items.forEach((item) => item.classList.add("is-visible")); + return; + } + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("is-visible"); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.18 } + ); + + items.forEach((item) => observer.observe(item)); +} + +function initTabs() { + const buttons = document.querySelectorAll(".tab-button"); + + if (!buttons.length) { + return; + } + + buttons.forEach((button) => { + button.addEventListener("click", () => { + buttons.forEach((item) => { + item.classList.remove("active"); + item.setAttribute("aria-selected", "false"); + }); + + button.classList.add("active"); + button.setAttribute("aria-selected", "true"); + renderSuitePanel(button.dataset.tab); + }); + }); + + renderSuitePanel("language"); +} + +function initFaq() { + document.querySelectorAll(".faq-trigger").forEach((trigger) => { + trigger.addEventListener("click", () => { + const item = trigger.closest(".faq-item"); + const expanded = trigger.getAttribute("aria-expanded") === "true"; + + item.classList.toggle("open", !expanded); + trigger.setAttribute("aria-expanded", String(!expanded)); + }); + }); +} + +function initScrollSpy() { + const links = Array.from(document.querySelectorAll(".nav-links a")); + const sections = links + .map((link) => { + const id = link.getAttribute("href"); + return id ? document.querySelector(id) : null; + }) + .filter(Boolean); + + if (!sections.length || !("IntersectionObserver" in window)) { + return; + } + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + return; + } + + links.forEach((link) => { + const isActive = link.getAttribute("href") === `#${entry.target.id}`; + link.classList.toggle("active", isActive); + }); + }); + }, + { + rootMargin: "-35% 0px -45% 0px", + threshold: 0.05 + } + ); + + sections.forEach((section) => observer.observe(section)); +} + +document.addEventListener("DOMContentLoaded", () => { + renderLeaderboard(); + initTabs(); + initCounters(); + initRevealAnimations(); + initFaq(); + initScrollSpy(); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..fa0dd5a --- /dev/null +++ b/styles.css @@ -0,0 +1,1246 @@ +:root { + color-scheme: dark; + --bg: #07111e; + --bg-elevated: rgba(10, 18, 32, 0.72); + --bg-soft: rgba(14, 24, 42, 0.84); + --border: rgba(167, 191, 255, 0.16); + --border-strong: rgba(167, 191, 255, 0.28); + --text: #edf4ff; + --muted: #8fa3c4; + --muted-strong: #b1c2df; + --accent: #7ce7ff; + --accent-2: #8f7dff; + --accent-3: #62f5c0; + --accent-warm: #ffd272; + --shadow: 0 18px 60px rgba(0, 0, 0, 0.35); + --radius-xl: 30px; + --radius-lg: 24px; + --radius-md: 18px; + --radius-sm: 14px; + --max-width: 1180px; + --header-height: 92px; + --transition: 180ms ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + min-width: 320px; + font-family: "Inter", "Segoe UI", Roboto, sans-serif; + background: + radial-gradient(circle at 15% 20%, rgba(124, 231, 255, 0.1), transparent 26%), + radial-gradient(circle at 85% 12%, rgba(143, 125, 255, 0.14), transparent 30%), + radial-gradient(circle at 50% 110%, rgba(98, 245, 192, 0.1), transparent 28%), + linear-gradient(180deg, #08101c 0%, #040814 100%); + color: var(--text); + line-height: 1.55; +} + +img, +svg { + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +input, +textarea, +select { + font: inherit; +} + +button { + color: inherit; +} + +:focus-visible { + outline: 2px solid rgba(124, 231, 255, 0.8); + outline-offset: 4px; +} + +.skip-link { + position: absolute; + left: 12px; + top: -48px; + z-index: 20; + padding: 10px 14px; + border-radius: 999px; + background: #ffffff; + color: #05111f; + font-weight: 700; + transition: top var(--transition); +} + +.skip-link:focus { + top: 12px; +} + +.page-shell { + position: relative; + overflow: clip; +} + +.page-noise, +.aurora, +.grid-glow { + position: fixed; + inset: 0; + pointer-events: none; +} + +.page-noise { + opacity: 0.06; + background-image: + linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); + background-size: 120px 120px; + mask-image: radial-gradient(circle at center, black 45%, transparent 100%); +} + +.grid-glow { + background: + radial-gradient(circle at center, rgba(126, 152, 255, 0.12), transparent 42%); +} + +.aurora { + filter: blur(80px); + opacity: 0.5; +} + +.aurora-one { + background: radial-gradient(circle at center, rgba(124, 231, 255, 0.3), transparent 60%); + transform: translate(-18%, -12%); + animation: floatAurora 18s ease-in-out infinite alternate; +} + +.aurora-two { + background: radial-gradient(circle at center, rgba(143, 125, 255, 0.22), transparent 58%); + transform: translate(24%, 6%); + animation: floatAurora 24s ease-in-out infinite alternate-reverse; +} + +@keyframes floatAurora { + from { + transform: translate(-18%, -12%) scale(1); + } + to { + transform: translate(8%, 10%) scale(1.2); + } +} + +.container { + width: min(calc(100% - 40px), var(--max-width)); + margin: 0 auto; +} + +.section { + position: relative; + padding: 88px 0; +} + +.site-header { + position: sticky; + top: 0; + z-index: 12; + padding: 18px 0; + background: linear-gradient(180deg, rgba(4, 9, 18, 0.82), rgba(4, 9, 18, 0.3), transparent); + backdrop-filter: blur(14px); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; +} + +.brand { + display: inline-flex; + align-items: center; + gap: 12px; +} + +.brand-mark { + display: inline-grid; + place-items: center; + width: 42px; + height: 42px; + border-radius: 14px; + background: linear-gradient(135deg, rgba(124, 231, 255, 0.35), rgba(143, 125, 255, 0.38)); + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); + font-weight: 800; + letter-spacing: 0.03em; +} + +.brand-copy { + display: flex; + flex-direction: column; + gap: 2px; + line-height: 1.1; +} + +.brand-copy strong { + font-size: 0.98rem; +} + +.brand-copy span { + font-size: 0.76rem; + color: var(--muted); + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.nav-links { + display: inline-flex; + align-items: center; + gap: 22px; + color: var(--muted-strong); +} + +.nav-links a { + position: relative; + font-size: 0.96rem; +} + +.nav-links a::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 2px; + transform: scaleX(0); + transform-origin: left; + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + transition: transform var(--transition); +} + +.nav-links a:hover::after, +.nav-links a.active::after { + transform: scaleX(1); +} + +.nav-button { + white-space: nowrap; +} + +.hero-section { + padding-top: 48px; +} + +.hero-grid { + display: grid; + grid-template-columns: 1.07fr 0.93fr; + gap: 30px; + align-items: center; +} + +.eyebrow-pill { + display: inline-flex; + align-items: center; + gap: 8px; + margin-bottom: 18px; + padding: 9px 14px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.08); + color: var(--muted-strong); + font-size: 0.78rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.eyebrow-soft { + background: rgba(124, 231, 255, 0.08); +} + +.hero-copy h1, +.section-heading h2, +.cta-panel h2 { + margin: 0; + font-weight: 800; + letter-spacing: -0.04em; + line-height: 0.98; +} + +.hero-copy h1 { + max-width: 12ch; + font-size: clamp(3.2rem, 8vw, 6.2rem); +} + +.gradient-text { + background: linear-gradient(90deg, var(--accent), #d4dcff 45%, var(--accent-3)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.hero-body, +.section-heading p, +.cta-panel p, +.feature-card p, +.metric-card p, +.policy-card p, +.faq-content p, +.process-card p { + color: var(--muted-strong); +} + +.hero-body { + max-width: 62ch; + margin: 22px 0 0; + font-size: 1.08rem; +} + +.hero-actions, +.cta-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-top: 30px; +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 50px; + padding: 0 18px; + border-radius: 999px; + border: 1px solid transparent; + font-weight: 700; + transition: + transform var(--transition), + border-color var(--transition), + background var(--transition), + box-shadow var(--transition); +} + +.button:hover { + transform: translateY(-2px); +} + +.button-primary { + background: linear-gradient(135deg, rgba(124, 231, 255, 0.95), rgba(143, 125, 255, 0.96)); + color: #03111d; + box-shadow: 0 16px 40px rgba(124, 231, 255, 0.22); +} + +.button-secondary, +.button-ghost { + background: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.1); + color: var(--text); +} + +.button-ghost { + min-height: 44px; +} + +.glass-panel { + position: relative; + overflow: hidden; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)), + var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow); + backdrop-filter: blur(18px); +} + +.glass-panel::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), transparent 30%, transparent 70%, rgba(124, 231, 255, 0.08)); + opacity: 0.45; + pointer-events: none; +} + +.hero-microstats { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 32px; +} + +.microstat { + padding: 18px; +} + +.microstat-label, +.panel-kicker, +.summary-chip span, +.metric-copy span, +.process-step, +.feature-index { + display: inline-block; + color: var(--muted); + font-size: 0.76rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.microstat-value { + display: block; + margin-top: 12px; + font-size: 2.1rem; + line-height: 1; +} + +.microstat-note { + display: block; + margin-top: 12px; + color: var(--muted); + font-size: 0.92rem; +} + +.signal-board { + padding: 26px; +} + +.signal-board-top, +.radar-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; +} + +.signal-board-top h2, +.radar-head h3, +.policy-card h3, +.feature-card h3, +.process-card h3, +.faq-trigger span:first-child { + margin: 10px 0 0; + font-size: clamp(1.25rem, 2.5vw, 1.8rem); + letter-spacing: -0.03em; +} + +.status-pill { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-radius: 999px; + background: rgba(98, 245, 192, 0.12); + border: 1px solid rgba(98, 245, 192, 0.22); + color: #9ef9d6; + font-size: 0.78rem; + font-weight: 700; + white-space: nowrap; +} + +.status-pill-soft { + background: rgba(143, 125, 255, 0.12); + border-color: rgba(143, 125, 255, 0.24); + color: #cac2ff; +} + +.signal-ring-wrap { + display: grid; + grid-template-columns: 220px 1fr; + gap: 22px; + align-items: center; + margin-top: 28px; +} + +.signal-ring { + position: relative; + display: grid; + place-items: center; + width: 220px; + height: 220px; + margin: 0 auto; + border-radius: 50%; + background: + radial-gradient(circle at center, rgba(7, 17, 30, 0.98) 48%, transparent 49%), + conic-gradient(from 210deg, rgba(124, 231, 255, 1), rgba(143, 125, 255, 1), rgba(98, 245, 192, 1), rgba(124, 231, 255, 1)); + box-shadow: + inset 0 0 38px rgba(0, 0, 0, 0.5), + 0 0 48px rgba(124, 231, 255, 0.18); +} + +.signal-ring::before, +.signal-ring::after { + content: ""; + position: absolute; + border-radius: 50%; +} + +.signal-ring::before { + inset: 18px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.signal-ring::after { + inset: -14px; + border: 1px solid rgba(124, 231, 255, 0.16); +} + +.signal-ring-core { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + text-align: center; +} + +.signal-ring-core span, +.signal-ring-core small { + color: var(--muted); +} + +.signal-ring-core strong { + font-size: 3.6rem; + line-height: 0.95; +} + +.signal-metrics { + display: grid; + gap: 16px; +} + +.signal-metric strong { + display: block; + margin: 6px 0 10px; + font-size: 1.15rem; +} + +.metric-bar { + width: 100%; + height: 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + overflow: hidden; +} + +.metric-bar span { + display: block; + width: var(--fill, 50%); + height: 100%; + border-radius: inherit; + background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); +} + +.shift-map { + margin-top: 26px; + padding: 18px; + border-radius: var(--radius-md); + background: rgba(255, 255, 255, 0.035); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.shift-map-head, +.shift-track { + display: flex; + justify-content: space-between; + gap: 14px; +} + +.shift-map-head { + color: var(--muted-strong); + font-weight: 600; +} + +.shift-track { + margin-top: 14px; + color: var(--muted); + font-size: 0.84rem; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.sparkline { + display: grid; + grid-template-columns: repeat(10, minmax(0, 1fr)); + align-items: end; + gap: 8px; + height: 100px; + margin-top: 18px; +} + +.sparkline span { + display: block; + height: var(--height); + min-height: 22px; + border-radius: 999px 999px 10px 10px; + background: linear-gradient(180deg, rgba(124, 231, 255, 0.95), rgba(143, 125, 255, 0.3)); + box-shadow: 0 12px 28px rgba(124, 231, 255, 0.12); +} + +.trust-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 16px; + margin-top: 34px; +} + +.trust-label { + color: var(--muted); + font-size: 0.9rem; +} + +.trust-items { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.trust-items span { + padding: 10px 14px; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.04); + color: var(--muted-strong); +} + +.section-heading { + max-width: 700px; +} + +.section-heading h2 { + font-size: clamp(2.2rem, 5vw, 3.8rem); + margin-top: 0; +} + +.section-heading p { + margin: 18px 0 0; + font-size: 1.04rem; +} + +.card-grid, +.process-grid { + display: grid; + gap: 18px; + margin-top: 34px; +} + +.card-grid-four { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.feature-card, +.process-card, +.metric-card, +.policy-card, +.summary-chip, +.faq-item, +.cta-panel { + padding: 22px; +} + +.feature-card h3, +.process-card h3, +.policy-card h3 { + margin-bottom: 12px; +} + +.benchmark-grid { + display: grid; + grid-template-columns: 0.92fr 1.08fr; + gap: 24px; + align-items: start; +} + +.metric-stack { + display: grid; + gap: 14px; + margin-top: 30px; +} + +.metric-card { + display: grid; + gap: 10px; +} + +.metric-copy { + display: flex; + justify-content: space-between; + gap: 14px; + align-items: baseline; +} + +.metric-copy strong { + font-size: 2rem; + letter-spacing: -0.04em; +} + +.radar-card { + padding: 24px; +} + +.radar-display { + position: relative; + display: grid; + place-items: center; + height: 360px; + margin-top: 24px; +} + +.radar-grid, +.radar-shape, +.radar-center { + position: absolute; +} + +.radar-grid { + inset: 50%; + width: 280px; + height: 280px; + transform: translate(-50%, -50%) rotate(45deg); +} + +.radar-grid span { + position: absolute; + inset: 0; + border: 1px solid rgba(255, 255, 255, 0.08); + transform: scale(calc(1 - (var(--i, 0) * 0.18))); +} + +.radar-grid span:nth-child(1) { --i: 0; } +.radar-grid span:nth-child(2) { --i: 1; } +.radar-grid span:nth-child(3) { --i: 2; } +.radar-grid span:nth-child(4) { --i: 3; } + +.radar-shape { + inset: 50%; + width: 280px; + height: 280px; + transform: translate(-50%, -50%); + clip-path: polygon(50% 0%, 84% 32%, 72% 86%, 20% 90%, 8% 36%); +} + +.radar-shape-primary { + background: linear-gradient(180deg, rgba(124, 231, 255, 0.36), rgba(98, 245, 192, 0.16)); + border: 1px solid rgba(124, 231, 255, 0.3); + transform: translate(-50%, -50%) scale(0.92) rotate(6deg); +} + +.radar-shape-secondary { + background: linear-gradient(180deg, rgba(255, 210, 114, 0.24), rgba(143, 125, 255, 0.08)); + border: 1px solid rgba(255, 210, 114, 0.22); + transform: translate(-50%, -50%) scale(0.71) rotate(-10deg); +} + +.radar-center { + inset: 50%; + width: 18px; + height: 18px; + transform: translate(-50%, -50%); + border-radius: 50%; + background: var(--text); + box-shadow: 0 0 24px rgba(255, 255, 255, 0.7); +} + +.legend-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + color: var(--muted-strong); +} + +.legend-grid > div { + display: flex; + align-items: center; + gap: 10px; +} + +.legend-dot { + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; +} + +.legend-primary { + background: var(--accent); +} + +.legend-secondary { + background: var(--accent-warm); +} + +.benchmark-notes { + margin: 22px 0 0; + padding-left: 18px; + color: var(--muted-strong); +} + +.benchmark-notes li + li { + margin-top: 10px; +} + +.suite-shell { + margin-top: 34px; +} + +.tab-list { + display: inline-flex; + flex-wrap: wrap; + gap: 12px; +} + +.tab-button { + min-height: 48px; + padding: 0 18px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + cursor: pointer; + transition: + transform var(--transition), + border-color var(--transition), + background var(--transition); +} + +.tab-button:hover, +.tab-button.active { + transform: translateY(-2px); + background: rgba(124, 231, 255, 0.1); + border-color: rgba(124, 231, 255, 0.26); +} + +.tab-panel { + margin-top: 18px; + padding: 28px; +} + +.tab-panel-grid { + display: grid; + grid-template-columns: 1.15fr 0.85fr; + gap: 24px; +} + +.tab-panel-copy h3 { + margin: 8px 0 14px; + font-size: 2rem; + letter-spacing: -0.03em; +} + +.tab-panel-copy p { + margin: 0; + color: var(--muted-strong); +} + +.pill-row { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 18px; +} + +.pill-row span { + padding: 9px 12px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.05); + color: var(--muted-strong); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.suite-sidebar { + display: grid; + gap: 14px; +} + +.suite-note { + padding: 16px 18px; + border-radius: var(--radius-md); + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.suite-note strong { + display: block; + margin-bottom: 8px; +} + +.leaderboard-summary { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin-top: 30px; +} + +.summary-chip strong { + display: block; + margin-top: 8px; + font-size: 1.02rem; +} + +.leaderboard-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; + margin-top: 24px; +} + +.leaderboard-card { + padding: 22px; +} + +.leaderboard-rank { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 46px; + height: 30px; + padding: 0 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.06); + color: var(--muted-strong); + font-size: 0.82rem; + font-weight: 700; +} + +.leaderboard-card h3 { + margin: 16px 0 8px; + font-size: 1.5rem; + letter-spacing: -0.03em; +} + +.leaderboard-card p { + margin: 0; + color: var(--muted-strong); +} + +.leaderboard-score { + display: flex; + align-items: baseline; + gap: 10px; + margin: 20px 0 16px; +} + +.leaderboard-score strong { + font-size: 3.4rem; + line-height: 0.95; + letter-spacing: -0.05em; +} + +.leaderboard-score span { + color: var(--muted); +} + +.score-bars { + display: grid; + gap: 12px; +} + +.score-bar { + display: grid; + gap: 6px; +} + +.score-bar-head { + display: flex; + justify-content: space-between; + gap: 10px; + color: var(--muted-strong); + font-size: 0.92rem; +} + +.score-bar-track { + width: 100%; + height: 10px; + border-radius: 999px; + overflow: hidden; + background: rgba(255, 255, 255, 0.06); +} + +.score-bar-fill { + height: 100%; + width: var(--score, 50%); + border-radius: inherit; + background: linear-gradient(90deg, var(--accent), var(--accent-2)); +} + +.process-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.method-footer { + margin-top: 22px; +} + +.policy-card { + max-width: 840px; +} + +.faq-grid { + display: grid; + grid-template-columns: 0.94fr 1.06fr; + gap: 24px; +} + +.faq-list { + display: grid; + gap: 14px; +} + +.faq-trigger { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + width: 100%; + padding: 0; + border: 0; + background: none; + text-align: left; + cursor: pointer; +} + +.faq-icon { + display: inline-grid; + place-items: center; + width: 34px; + height: 34px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.06); + flex: 0 0 auto; + transition: transform var(--transition), background var(--transition); +} + +.faq-content { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 220ms ease; +} + +.faq-content p { + overflow: hidden; + margin: 0; + padding-top: 0; +} + +.faq-item.open .faq-content { + grid-template-rows: 1fr; +} + +.faq-item.open .faq-content p { + padding-top: 16px; +} + +.faq-item.open .faq-icon { + transform: rotate(45deg); + background: rgba(124, 231, 255, 0.14); +} + +.cta-panel { + display: flex; + justify-content: space-between; + gap: 22px; + align-items: center; + padding: 30px; +} + +.site-footer { + padding: 0 0 40px; +} + +.footer-grid { + display: grid; + grid-template-columns: 1fr auto 1.1fr; + gap: 20px; + align-items: center; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.footer-brand .brand-mark { + width: 38px; + height: 38px; +} + +.footer-links { + display: flex; + flex-wrap: wrap; + gap: 16px; + color: var(--muted-strong); +} + +.footer-note { + margin: 0; + color: var(--muted); +} + +.reveal { + opacity: 0; + transform: translateY(22px); + transition: + opacity 500ms ease, + transform 500ms ease; +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +@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; + scroll-behavior: auto !important; + } + + .reveal { + opacity: 1; + transform: none; + } +} + +@media (max-width: 1100px) { + .hero-grid, + .benchmark-grid, + .faq-grid, + .tab-panel-grid, + .footer-grid { + grid-template-columns: 1fr; + } + + .leaderboard-grid, + .process-grid, + .card-grid-four { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .leaderboard-summary { + grid-template-columns: 1fr; + } +} + +@media (max-width: 860px) { + .site-header { + position: static; + } + + .nav { + flex-wrap: wrap; + } + + .nav-links { + order: 3; + width: 100%; + justify-content: space-between; + gap: 14px; + overflow-x: auto; + padding-bottom: 4px; + } + + .hero-copy h1 { + max-width: 14ch; + } + + .hero-microstats, + .leaderboard-grid, + .process-grid, + .card-grid-four { + grid-template-columns: 1fr; + } + + .signal-ring-wrap { + grid-template-columns: 1fr; + } + + .signal-ring { + width: 190px; + height: 190px; + } + + .cta-panel { + flex-direction: column; + align-items: flex-start; + } +} + +@media (max-width: 640px) { + .container { + width: min(calc(100% - 28px), var(--max-width)); + } + + .section { + padding: 68px 0; + } + + .hero-section { + padding-top: 24px; + } + + .hero-copy h1 { + font-size: clamp(2.7rem, 12vw, 4.3rem); + } + + .signal-board, + .tab-panel, + .leaderboard-card, + .feature-card, + .process-card, + .metric-card, + .faq-item, + .cta-panel, + .summary-chip, + .policy-card { + padding: 18px; + border-radius: 20px; + } + + .signal-board-top, + .radar-head, + .trust-row { + flex-direction: column; + } + + .trust-items { + gap: 10px; + } + + .tab-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .tab-button { + width: 100%; + } + + .radar-display { + height: 280px; + } + + .radar-grid, + .radar-shape { + width: 220px; + height: 220px; + } + + .leaderboard-score strong { + font-size: 2.8rem; + } +} From 380d2804c6c5892c00d0714b3a2699e7e064d55e Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 6 Mar 2026 06:06:16 +0000 Subject: [PATCH 2/5] Fix reveal fallback and anchor-safe layout Co-authored-by: ilikevibecoding --- script.js | 17 +++++++++++++++++ styles.css | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index e305c41..704932f 100644 --- a/script.js +++ b/script.js @@ -234,6 +234,17 @@ function initCounters() { function initRevealAnimations() { const items = document.querySelectorAll(".reveal"); + const revealInViewport = () => { + items.forEach((item) => { + const rect = item.getBoundingClientRect(); + const isNearViewport = rect.top < window.innerHeight * 0.92 && rect.bottom > 0; + + if (isNearViewport) { + item.classList.add("is-visible"); + } + }); + }; + if (!("IntersectionObserver" in window)) { items.forEach((item) => item.classList.add("is-visible")); return; @@ -252,6 +263,12 @@ function initRevealAnimations() { ); items.forEach((item) => observer.observe(item)); + revealInViewport(); + window.addEventListener("hashchange", revealInViewport); + + setTimeout(() => { + revealInViewport(); + }, 250); } function initTabs() { diff --git a/styles.css b/styles.css index fa0dd5a..37db1be 100644 --- a/styles.css +++ b/styles.css @@ -90,7 +90,7 @@ button { .page-shell { position: relative; - overflow: clip; + overflow-x: clip; } .page-noise, From 2576ca85aa38ffd983c0a309e83156f539cd22b2 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 6 Mar 2026 06:21:42 +0000 Subject: [PATCH 3/5] Redesign benchmark site as Relay Co-authored-by: ilikevibecoding --- README.md | 49 +-- code | 398 ------------------- index.html | 765 ++++++++++++++++-------------------- script.js | 233 ++++++----- styles.css | 1092 ++++++++++++++++++++-------------------------------- 5 files changed, 881 insertions(+), 1656 deletions(-) delete mode 100644 code diff --git a/README.md b/README.md index b6e790d..78765c2 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,44 @@ -# Continuum +# Relay -Continuum is a polished, dependency-free static website concept for a **continuous learning benchmark**. -It presents a fictional benchmark brand, methodology, task suite, and illustrative leaderboard in a -single-page experience designed for research launches, benchmark announcements, or demo microsites. +Relay is a polished, dependency-free static website concept for a **continuous learning benchmark**. +It is designed as a research-style launch page for a benchmark that measures how well agents retain, +recover, transfer, and remain robust as tasks and environments shift over time. -## What is included +## What changed -- A premium dark-mode landing page with a strong hero section -- Benchmark positioning focused on retention, adaptation, transfer, and robustness -- Task-suite tabs with domain-specific benchmark descriptions -- An illustrative leaderboard rendered from lightweight client-side data -- FAQ interactions, animated counters, scroll reveals, and section-aware nav highlighting -- Fully static hosting with no framework, no bundler, and no runtime dependencies +This repo now ships a complete static benchmark website rather than a game or prototype UI. +The current site includes: + +- a new benchmark brand and homepage +- a hero section with benchmark summary metrics +- a benchmark loop section explaining the evaluation cycle +- interactive evaluation-track tabs +- a rendered scoreboard with illustrative submissions +- an FAQ and launch-ready CTA/footer ## File structure -- `index.html` — semantic page structure and content -- `styles.css` — design system, layout, responsiveness, and visual effects -- `script.js` — lightweight interactions and data-driven rendering +- `index.html` — semantic page structure and site copy +- `styles.css` — layout, visual system, and responsive behavior +- `script.js` — lightweight interactions and data-driven content -## How to run +## Run locally -Open `index.html` directly in a browser, or serve the directory locally: +Open `index.html` directly in a browser, or serve the repo locally: ```bash python3 -m http.server 8000 ``` -Then visit `http://localhost:8000`. +Then open `http://localhost:8000`. -## Customization notes +## Customization -- Update the benchmark name, copy, and CTA language in `index.html` -- Replace the illustrative task-suite and leaderboard data in `script.js` -- Adjust colors, spacing, and visual style tokens in `styles.css` +- Update copy and section structure in `index.html` +- Change colors, spacing, and component styling in `styles.css` +- Replace track and scoreboard data in `script.js` ## Notes -The benchmark content and scores are intentionally fictional, but the site structure is designed to be a -practical starting point for a real benchmark launch page. +The benchmark copy and scores are illustrative, but the site is intentionally structured so it can be +adapted into a real benchmark launch page with minimal effort. diff --git a/code b/code deleted file mode 100644 index f6b01e3..0000000 --- a/code +++ /dev/null @@ -1,398 +0,0 @@ - - - - - - - Countdown to Superintelligence - - - -
- -
-

The Intelligence Age

-

Countdown to Superintelligence

- -
-
- 0 - Days -
-
- 0 - Hours -
-
- 0 - Minutes -
-
- 0 - Seconds -
-
- -
-
-
- -
-
-
3000
-
Total Days
-
-
-
0
-
Days Elapsed
-
-
-
0%
-
Progress
-
-
- -

- It is possible that we will have superintelligence in a few thousand days (!); it may take longer, but I'm confident we'll get there. -

-

— Sam Altman, "The Intelligence Age" (September 23, 2024)

-
- - - - diff --git a/index.html b/index.html index 226d1fe..cc44d58 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,15 @@ - Continuum — A benchmark for continuous learning agents + Relay — Benchmarking continuous learning in motion - + @@ -25,497 +25,378 @@ -
- - - - - - - -
-
-
-
- Preview benchmark · Version 0.9 -

- A benchmark for agents that - keep learning - after the world changes. -

-

- Continuum measures what static leaderboards miss: whether a model can adapt to - new tasks, retain what it learned yesterday, and stay robust through repeated - distribution shifts without collapsing into catastrophic forgetting. -

+ -
- Explore the benchmark - View methodology -
+ + +
+
+
+
+ Research preview · release train 2026-A +

Train agents that keep their footing while the task keeps moving.

+

+ Relay measures whether a system can adapt to new rules, preserve old skills, and + recover quickly when interfaces, incentives, or sensory conditions shift underneath it. +

+ +
+ View benchmark loop + Explore evaluation tracks +
-
-
- Domains - 0 - language, vision, memory, tools, planning, control -
-
- Task variants - 0+ - staged, curriculum-driven, and non-stationary -
-
- Shift cycles - 0 - re-evaluation after every perturbation wave -
-
+
+
+ Shift packs + 0 +

Versioned curriculum changes spanning reward drift, tool rewiring, and hidden resets.

+
+
+ Replay checks + 0 +

Forced returns to previous tasks so retention is measured instead of assumed.

+
+
+ Evaluation domains + 0 +

Language, tools, perception, planning, and multi-stage agentic control.

+
+
-
-
-
-
- Composite benchmark index -

Frontier systems should improve without forgetting.

-
- Live preview +
+
+
+
+ Current frontier profile +

High-scoring systems learn fast without dropping old routines.

+ Live schema +
-
-
-
- Mean score - 84.6 - / 100 -
+
+
+
+ Relay index + 88.2 + / 100
+
-
-
+
+
+
Retention - 92% -
+ 94%
-
- Adaptation latency - 4.8 episodes -
+
+
+
+
+ Recovery rate + 3.6 rounds
-
+
+
+
+
Forward transfer - +17 pts -
+ +19 pts
+
- -
-
- Curriculum shift map - Increasing pressure -
- -
- pretrain - drift - tool swap - memory stress - recovery -
- - -
-
-
-
- -
- Designed for continual evaluation across -
- Retention - Rapid adaptation - Transfer - Robustness - Versioned shifts -
-
-
- -
-
-
- Why static evaluation fails -

Most leaderboards reward frozen competence, not durable learning.

-

- Real agents do not live in one snapshot. They receive new tools, face changing - environments, and must preserve earlier skills while improving on unfamiliar ones. - Continuum turns that reality into a measurable benchmark. -

-
- -
-
- 01 -

Distribution shift is staged on purpose

-

- Each curriculum wave changes inputs, reward structure, interface assumptions, - or memory pressure so benchmark scores reflect adaptation under drift. -

-
-
- 02 -

Retention is measured after every improvement

-

- Agents are repeatedly sent back to earlier tasks. If new gains erase prior - capability, Continuum penalizes them immediately. -

-
-
- 03 -

Transfer matters as much as raw score

-

- We care about whether learning one task makes the next one easier, not only - whether a system can brute-force each stage in isolation. -

-
-
- 04 -

Benchmark versions are explicit and comparable

-

- Shift packs are versioned so labs can report progress over time without losing - comparability or quietly overfitting to an outdated suite. -

-
-
-
-
- -
-
-
- Benchmark anatomy -

One score, four dimensions, many ways to fail gracefully.

-

- Continuum aggregates complementary signals so a model cannot top the chart by - excelling at one dimension while silently forgetting everything else. -

- -
-
-
- Retention score - 0% -
-

Re-tested performance on previously solved tasks after later training waves.

-
-
-
- Adaptation episodes - 0 -
-

Median episodes required to recover 90% of peak performance after a shift.

-
-
-
- Forward transfer - +0 -
-

Improvement on unseen downstream tasks attributable to prior curriculum stages.

-
-
-
- Robustness variance - 0% -
-

Performance volatility under interface changes, hidden resets, and sparse feedback.

-
-
-
-
+
- Evaluation surface -

Balanced systems form a wider frontier.

+ Interface drift + stable
- Weighted composite -
- - - -
- - Continuum frontier model + Memory replay + scheduled
- - Static benchmark specialist + Holdout shifts + locked
- -
    -
  • Retention and transfer are rewarded together.
    • -
  • Latency penalties prevent "eventual" recovery from dominating.
    • -
  • Shift robustness keeps brittle systems from hiding behind mean averages.
    • -
-
- -
-
-
- Task suite -

A curriculum built to expose forgetting, not flatter it.

-

- Each domain introduces a different failure mode. The benchmark rotates through - domain-specific shifts and then returns to older checkpoints to test what survived. -

-
+
+
+ +
+
+
+ Why Relay exists +

Most benchmarks score a frozen snapshot. Relay scores what survives change.

+

+ Instead of asking whether a model is good once, Relay asks whether it stays good after + the environment changes repeatedly, then returns to older tasks to see what broke. +

+
-
-
- - - - -
+
+
+ 01 +

Recovery is measured, not narrated

+

Each shift wave logs how quickly a system regains competence after a previously unseen perturbation.

+
+
+ 02 +

Old tasks always come back

+

Replay checkpoints force systems to prove they still remember earlier routines under time and memory pressure.

+
+
+ 03 +

Transfer gets rewarded explicitly

+

Policies that make the next task easier score better than ones that relearn everything from scratch.

+
+
+
+
+ +
+
+
+ Benchmark loop +

Four passes through the same system, each one less forgiving.

+

+ Relay uses a recurring loop so model updates can be compared on the same structure: + establish the floor, inject drift, test recovery, and revisit what was supposedly learned. +

+
-
-
+
+
+ 1 +

Seed

+

Agents solve a balanced baseline curriculum across all benchmark domains.

+
+
+ 2 +

Shift

+

Reward functions, tool schemas, prompts, or observability constraints are altered.

+
+
+ 3 +

Recover

+

We track recovery speed, sample efficiency, and whether earlier habits accelerate the climb back.

+
+
+ 4 +

Replay

+

Old tasks reappear under pressure to surface forgetting that average scores hide.

+
-
-
-
-
- Leaderboard snapshot -

Scores that reward durable improvement, not one-off wins.

-

- Leaderboard entries below are illustrative, but the scoring logic is real: - retention, adaptation speed, transfer, and robustness combine into a single - weighted benchmark index. -

+
+
+
+ Scoring geometry +

Every submission is judged on four interacting axes.

+
+ weighted composite
-
-
- Scoring weights - 35% retention · 25% adaptation · 25% transfer · 15% robustness +
+
+
+ +
+
+
+ Evaluation tracks +

Each track introduces a different way for a learning system to break.

+

+ Relay's tracks are designed as families of perturbations. Switching between them should + feel like moving through the same benchmark, not visiting unrelated demos. +

-
-
-
-
- Methodology -

Evaluate, perturb, revisit, measure what actually sticks.

-

- Continuum is intentionally cyclic. Systems do not simply advance through tasks; they - repeatedly return to older skills under new assumptions so retention becomes visible. -

+
+
+ + + +
-
-
- 01 -

Establish the capability floor

-

Agents complete a balanced seed curriculum across six domains and expose their initial frontier.

-
-
- 02 -

Inject a controlled shift

-

Interfaces, reward sparsity, sensory noise, or available tools change without altering the underlying objective.

-
-
- 03 -

Measure recovery and transfer

-

We track how quickly the system climbs back, whether prior experience helps, and where it wastes samples.

-
-
- 04 -

Re-test old skills under pressure

-

Previously solved tasks return with latency budgets and hidden recalls to quantify forgetting explicitly.

-
-
- -
-
- Versioning policy -

Every benchmark release ships with frozen replay packs and drift notes.

-

- Submissions remain comparable inside each release train, while newer versions add - fresh shift packs to keep the benchmark from becoming stale or gameable. -

-
-
+
+
+
+
+ +
+
+
+ Scoreboard +

Submissions are ranked by what they preserve, not just what they discover.

+

+ The board below is illustrative, but the reporting shape mirrors a real benchmark launch: + headline score, sub-metrics, and a quick read on where each system bends first. +

-
-
-
-
- Frequently asked questions -

Built for researchers, model builders, and benchmark skeptics.

-

- Continuum is designed to be interpretable. The questions below cover why it exists, - how it stays honest, and what a strong result actually means. -

+
+
+ Weighting + 35% retention · 25% recovery · 25% transfer · 15% robustness
- -
-
- -
-

- Static benchmarks score a frozen snapshot. Continuum repeatedly changes the - environment and re-tests earlier skills so learning dynamics, retention, and - transfer become part of the score. -

-
-
-
- -
-

- Public specs define the structure of shifts, not every concrete instance. - Frozen replay packs are versioned, and hidden holdout perturbations are used - to evaluate whether policies generalize beyond public examples. -

-
-
-
- -
-

- No single benchmark can do that. A high Continuum score means the system is - unusually good at learning under repeated change without forgetting, which is - a useful but still partial signal. -

-
-
-
- -
-

- Yes. The site is fully static and dependency-free. Swap the placeholder - benchmark data in the script file, update copy, and it is ready to serve as a - polished launch page for a real evaluation suite. -

-
-
+
+ Submission policy + Quarterly versions with frozen replay packs and hidden holdout perturbations.
-
-
-
-
-
- Ready for launch -

Build a leaderboard that rewards learning, not memorization.

+
+
+
+ +
+
+
+ FAQ +

Practical answers for researchers, evaluators, and launch teams.

+

+ Relay is designed to read like a benchmark site someone could actually ship: concise, + opinionated, and clear about what the numbers do and do not mean. +

+
+ +
+
+ +

- Use Continuum as the visual and conceptual starting point for a benchmark site - that feels more like a research product than a static landing page. + Relay makes change part of the test. Systems are perturbed, asked to recover, + and then pushed back through earlier tasks to expose forgetting and brittle adaptation.

-
- Back to top - Read the FAQ +
+
+ +
+

+ The content and scores here are illustrative, but the structure is intended as a + realistic launch-ready website for a real continuous-learning benchmark. +

+
+
+
+ +
+

+ Yes. Replace the copy in `index.html`, update the track and scoreboard data in + `script.js`, and tweak tokens in `styles.css` to match your benchmark brand. +

-
-
- - -
+
+ +
+
+
+
+ Launch-ready concept +

Give your benchmark a homepage that feels like a research product.

+

+ Relay is designed to be unmistakably a benchmark website: no game UI, no playful + prototype chrome, just a clean static experience built for a serious technical launch. +

+
+
+ Back to top + Review tracks +
+
+
+
+
+ + diff --git a/script.js b/script.js index 704932f..6c1ddf6 100644 --- a/script.js +++ b/script.js @@ -1,154 +1,154 @@ -const suiteData = { +const trackData = { language: { - eyebrow: "Language adaptation", - title: "Instruction following that survives goal drift", + kicker: "Language drift track", + title: "Prompt formats mutate while objectives stay constant.", description: - "Language tasks begin with clean instructions and gradually introduce ambiguity, style drift, compressed context windows, and contradictory retrieval cues. Strong agents adapt while preserving earlier instruction hierarchies and formatting behavior.", - pills: ["retrieval drift", "context compression", "multi-step repair", "memory recall probes"], + "Relay's language track shifts tone, retrieval structure, formatting contracts, and context availability. Strong systems preserve prior instruction-following habits while learning new prompt conventions quickly.", + pills: ["retrieval reordering", "format drift", "compressed context", "delayed replay"], notes: [ { title: "Representative tasks", - body: "Summarization under changing rubric weights, retrieval-conditioned writing, preference shifts, and long-horizon instruction repair." + body: "Long-form synthesis, grounded summarization, instruction repair, and rubric changes under memory limits." }, { - title: "Failure mode exposed", - body: "Models that improve on the latest prompt style but quietly forget earlier formatting and retrieval conventions." + title: "What it exposes", + body: "Models that get better at the newest prompt style but quietly forget earlier output contracts." }, { - title: "Primary metric", - body: "Retention-weighted success after language policy changes and delayed recall checkpoints." + title: "Primary signal", + body: "Retention-weighted task success after repeated prompt schema changes." } ] }, tools: { - eyebrow: "Tool use adaptation", - title: "Policies that keep working after the interface changes", + kicker: "Tool adaptation track", + title: "Tools keep the same purpose, but not the same shape.", description: - "Tool-use tracks swap parameter schemas, response latency, observability limits, and error semantics. The best systems recover quickly and preserve prior operational competence even when the same objective requires a different interaction pattern.", - pills: ["API schema swap", "latency spikes", "hidden retries", "degraded observability"], + "API contracts, latency, error semantics, and output fields shift over time. Relay measures whether an agent can repair its tool policy without losing older workflows that used the original interface.", + pills: ["schema swaps", "latency drift", "degraded observability", "retry penalties"], notes: [ { title: "Representative tasks", - body: "Search-and-cite workflows, calculator chains, data cleaning pipelines, and chained browsing actions under revised tool contracts." + body: "Search-and-cite chains, data cleanup flows, spreadsheet edits, and retrieval pipelines under revised tool contracts." }, { - title: "Failure mode exposed", - body: "Agents that memorize one happy-path API surface and fail as soon as argument order, tool names, or retry semantics move." + title: "What it exposes", + body: "Agents that memorize one happy path and collapse when arguments, retries, or output structure move." }, { - title: "Primary metric", - body: "Median episodes to recover task completion with penalties for irreversible tool misuse." + title: "Primary signal", + body: "Median recovery rounds plus irreversible tool-misuse penalties." } ] }, - vision: { - eyebrow: "Vision adaptation", - title: "Perception that remains stable under sensory drift", + perception: { + kicker: "Perception track", + title: "Visual conditions drift before the semantics do.", description: - "Vision tasks introduce lighting shifts, crop noise, symbol remapping, and object co-occurrence changes. Continuum checks whether perception improves on new conditions without erasing earlier recognition behavior.", - pills: ["lighting shift", "camera jitter", "symbol remap", "rare object replay"], + "Perception tasks add lighting changes, symbol remaps, crop jitter, and background clutter. Systems must absorb new sensory conditions while preserving earlier recognition behavior.", + pills: ["lighting shifts", "symbol remaps", "rare object replay", "sensor noise"], notes: [ { title: "Representative tasks", - body: "Scene classification, chart reading, OCR repair, and object grounding under repeated perturbation waves." + body: "Chart reading, OCR repair, scene labeling, and visual grounding under repeated perturbation waves." }, { - title: "Failure mode exposed", - body: "Specialists that tune to the latest visual distribution but lose robustness on previously solved sensory conditions." + title: "What it exposes", + body: "Policies that overfit to the latest visual domain and lose performance on older but still relevant scenes." }, { - title: "Primary metric", - body: "Cross-shift accuracy area under the retention curve, weighted by replay difficulty." + title: "Primary signal", + body: "Area under the cross-shift retention curve across replay checkpoints." } ] }, - agents: { - eyebrow: "Agentic control", - title: "Long-horizon control with memory, planning, and recovery", + control: { + kicker: "Long-horizon control track", + title: "Plans are interrupted, reordered, and forced to recover.", description: - "Agentic control sequences test whether a system can maintain plans when constraints change mid-episode. Memory budgets shrink, subgoals reorder, and partial observability increases while older route patterns still matter.", - pills: ["memory pressure", "goal reorder", "sparse reward", "hidden resets"], + "The control track evaluates web automation, multi-stage workflows, and planning loops where goals reorder mid-run and memory budgets shrink. Learning has to survive interruption.", + pills: ["goal reordering", "sparse rewards", "hidden resets", "state truncation"], notes: [ { title: "Representative tasks", - body: "Web navigation, workflow automation, embodied grid planning, and multi-stage repair tasks under interrupted state." + body: "Web navigation, workflow recovery, sequential tool orchestration, and stateful planning with interrupted episodes." }, { - title: "Failure mode exposed", - body: "Agents that relearn every perturbation from scratch instead of carrying over useful structure from previous control policies." + title: "What it exposes", + body: "Agents that relearn every perturbation from scratch and forget previously stable routines." }, { - title: "Primary metric", - body: "Composite score blending adaptation latency, final success, and recall on previously mastered control routines." + title: "Primary signal", + body: "Composite of recovery speed, final success rate, and replay recall under constrained memory." } ] } }; -const leaderboardData = [ +const scoreboardData = [ { rank: "#1", - name: "Northstar-XL", - tagline: "Balanced frontier model with strong replay retention", - score: "84.6", + name: "Relay-One XL", + tagline: "Fast recovery with unusually strong replay retention", + score: "88.2", metrics: [ - { label: "Retention", value: "92%", score: "92%" }, - { label: "Adaptation", value: "88", score: "88%" }, - { label: "Transfer", value: "81", score: "81%" }, - { label: "Robustness", value: "76", score: "76%" } + { label: "Retention", value: "94%" }, + { label: "Recovery", value: "86%" }, + { label: "Transfer", value: "84%" }, + { label: "Robustness", value: "77%" } ] }, { rank: "#2", - name: "Helix-Agent", - tagline: "Fast recovery under tool drift, moderate memory stability", - score: "79.3", + name: "Signal Weave", + tagline: "Excellent under tool drift, slightly weaker on delayed replay", + score: "82.7", metrics: [ - { label: "Retention", value: "84%", score: "84%" }, - { label: "Adaptation", value: "91", score: "91%" }, - { label: "Transfer", value: "73", score: "73%" }, - { label: "Robustness", value: "68", score: "68%" } + { label: "Retention", value: "87%" }, + { label: "Recovery", value: "90%" }, + { label: "Transfer", value: "79%" }, + { label: "Robustness", value: "72%" } ] }, { rank: "#3", - name: "StaticMax-Pro", - tagline: "Excellent on frozen tasks, weaker under repeated shifts", - score: "67.9", + name: "Archive-3", + tagline: "Stable memory profile, slower to regain competence after major shifts", + score: "76.9", metrics: [ - { label: "Retention", value: "69%", score: "69%" }, - { label: "Adaptation", value: "62", score: "62%" }, - { label: "Transfer", value: "58", score: "58%" }, - { label: "Robustness", value: "66", score: "66%" } + { label: "Retention", value: "90%" }, + { label: "Recovery", value: "68%" }, + { label: "Transfer", value: "70%" }, + { label: "Robustness", value: "69%" } ] } ]; -function renderSuitePanel(tabKey) { - const panel = document.getElementById("suitePanel"); - const tab = suiteData[tabKey]; +function renderTrackPanel(key) { + const panel = document.getElementById("trackPanel"); + const track = trackData[key]; - if (!panel || !tab) { + if (!panel || !track) { return; } panel.innerHTML = ` -
-
- ${tab.eyebrow} -

${tab.title}

-

${tab.description}

-
- ${tab.pills.map((pill) => `${pill}`).join("")} +
+
+ ${track.kicker} +

${track.title}

+

${track.description}

+
+ ${track.pills.map((pill) => `${pill}`).join("")}
-
- ${tab.notes +
+ ${track.notes .map( (note) => ` -
+
${note.title} - ${note.body} +

${note.body}

` ) @@ -158,36 +158,34 @@ function renderSuitePanel(tabKey) { `; } -function renderLeaderboard() { - const grid = document.getElementById("leaderboardGrid"); +function renderScoreboard() { + const grid = document.getElementById("scoreboardGrid"); if (!grid) { return; } - grid.innerHTML = leaderboardData + grid.innerHTML = scoreboardData .map( (entry) => ` -
- ${entry.rank} +
+ ${entry.rank}

${entry.name}

${entry.tagline}

-
+
${entry.score} - composite score + Relay index
-
+
${entry.metrics .map( (metric) => ` -
-
- ${metric.label} - ${metric.value} -
-
-
+
+ ${metric.label} +
+
+ ${metric.value}
` ) @@ -205,41 +203,38 @@ function initCounters() { counters.forEach((counter) => { const target = Number(counter.dataset.count); - const decimals = String(target).includes(".") ? 1 : 0; if (reducedMotion) { - counter.textContent = target.toFixed(decimals); + counter.textContent = String(target); return; } - let current = 0; const duration = 1100; const start = performance.now(); - const tick = (timestamp) => { + const update = (timestamp) => { const progress = Math.min(1, (timestamp - start) / duration); const eased = 1 - Math.pow(1 - progress, 3); - current = target * eased; - counter.textContent = current.toFixed(decimals).replace(/\.0$/, ""); + counter.textContent = String(Math.round(target * eased)); if (progress < 1) { - requestAnimationFrame(tick); + requestAnimationFrame(update); } }; - requestAnimationFrame(tick); + requestAnimationFrame(update); }); } function initRevealAnimations() { const items = document.querySelectorAll(".reveal"); - const revealInViewport = () => { + const revealVisibleItems = () => { items.forEach((item) => { const rect = item.getBoundingClientRect(); - const isNearViewport = rect.top < window.innerHeight * 0.92 && rect.bottom > 0; + const inRange = rect.top < window.innerHeight * 0.92 && rect.bottom > 0; - if (isNearViewport) { + if (inRange) { item.classList.add("is-visible"); } }); @@ -259,20 +254,20 @@ function initRevealAnimations() { } }); }, - { threshold: 0.18 } + { threshold: 0.16 } ); items.forEach((item) => observer.observe(item)); - revealInViewport(); - window.addEventListener("hashchange", revealInViewport); + revealVisibleItems(); + window.addEventListener("hashchange", revealVisibleItems); setTimeout(() => { - revealInViewport(); + revealVisibleItems(); }, 250); } -function initTabs() { - const buttons = document.querySelectorAll(".tab-button"); +function initTrackTabs() { + const buttons = document.querySelectorAll(".track-tab"); if (!buttons.length) { return; @@ -287,21 +282,21 @@ function initTabs() { button.classList.add("active"); button.setAttribute("aria-selected", "true"); - renderSuitePanel(button.dataset.tab); + renderTrackPanel(button.dataset.track); }); }); - renderSuitePanel("language"); + renderTrackPanel("language"); } function initFaq() { document.querySelectorAll(".faq-trigger").forEach((trigger) => { trigger.addEventListener("click", () => { - const item = trigger.closest(".faq-item"); + const card = trigger.closest(".faq-card"); const expanded = trigger.getAttribute("aria-expanded") === "true"; - item.classList.toggle("open", !expanded); trigger.setAttribute("aria-expanded", String(!expanded)); + card.classList.toggle("open", !expanded); }); }); } @@ -310,8 +305,8 @@ function initScrollSpy() { const links = Array.from(document.querySelectorAll(".nav-links a")); const sections = links .map((link) => { - const id = link.getAttribute("href"); - return id ? document.querySelector(id) : null; + const href = link.getAttribute("href"); + return href ? document.querySelector(href) : null; }) .filter(Boolean); @@ -327,13 +322,13 @@ function initScrollSpy() { } links.forEach((link) => { - const isActive = link.getAttribute("href") === `#${entry.target.id}`; - link.classList.toggle("active", isActive); + const active = link.getAttribute("href") === `#${entry.target.id}`; + link.classList.toggle("active", active); }); }); }, { - rootMargin: "-35% 0px -45% 0px", + rootMargin: "-35% 0px -50% 0px", threshold: 0.05 } ); @@ -342,8 +337,8 @@ function initScrollSpy() { } document.addEventListener("DOMContentLoaded", () => { - renderLeaderboard(); - initTabs(); + renderScoreboard(); + initTrackTabs(); initCounters(); initRevealAnimations(); initFaq(); diff --git a/styles.css b/styles.css index 37db1be..3440bc7 100644 --- a/styles.css +++ b/styles.css @@ -1,25 +1,24 @@ :root { color-scheme: dark; - --bg: #07111e; - --bg-elevated: rgba(10, 18, 32, 0.72); - --bg-soft: rgba(14, 24, 42, 0.84); - --border: rgba(167, 191, 255, 0.16); - --border-strong: rgba(167, 191, 255, 0.28); - --text: #edf4ff; - --muted: #8fa3c4; - --muted-strong: #b1c2df; - --accent: #7ce7ff; - --accent-2: #8f7dff; - --accent-3: #62f5c0; - --accent-warm: #ffd272; - --shadow: 0 18px 60px rgba(0, 0, 0, 0.35); - --radius-xl: 30px; + --bg: #08111f; + --bg-2: #0c1730; + --surface: rgba(11, 19, 34, 0.76); + --surface-strong: rgba(16, 27, 49, 0.92); + --surface-soft: rgba(255, 255, 255, 0.06); + --border: rgba(180, 201, 255, 0.15); + --border-strong: rgba(180, 201, 255, 0.28); + --text: #eef4ff; + --muted: #98abd0; + --muted-strong: #c8d4ef; + --accent: #7dd3ff; + --accent-2: #ff8a65; + --accent-3: #7ef0c8; + --radius-xl: 32px; --radius-lg: 24px; --radius-md: 18px; - --radius-sm: 14px; - --max-width: 1180px; - --header-height: 92px; + --shadow: 0 24px 70px rgba(0, 0, 0, 0.35); --transition: 180ms ease; + --max-width: 1180px; } *, @@ -36,18 +35,11 @@ body { margin: 0; min-width: 320px; font-family: "Inter", "Segoe UI", Roboto, sans-serif; - background: - radial-gradient(circle at 15% 20%, rgba(124, 231, 255, 0.1), transparent 26%), - radial-gradient(circle at 85% 12%, rgba(143, 125, 255, 0.14), transparent 30%), - radial-gradient(circle at 50% 110%, rgba(98, 245, 192, 0.1), transparent 28%), - linear-gradient(180deg, #08101c 0%, #040814 100%); color: var(--text); - line-height: 1.55; -} - -img, -svg { - max-width: 100%; + background: + radial-gradient(circle at top left, rgba(125, 211, 255, 0.1), transparent 30%), + radial-gradient(circle at top right, rgba(255, 138, 101, 0.08), transparent 24%), + linear-gradient(180deg, #081120 0%, #0c1630 55%, #08111f 100%); } a { @@ -62,12 +54,8 @@ select { font: inherit; } -button { - color: inherit; -} - :focus-visible { - outline: 2px solid rgba(124, 231, 255, 0.8); + outline: 2px solid rgba(125, 211, 255, 0.9); outline-offset: 4px; } @@ -78,8 +66,8 @@ button { z-index: 20; padding: 10px 14px; border-radius: 999px; - background: #ffffff; - color: #05111f; + background: white; + color: #04101d; font-weight: 700; transition: top var(--transition); } @@ -88,57 +76,41 @@ button { top: 12px; } -.page-shell { - position: relative; - overflow-x: clip; -} - -.page-noise, -.aurora, -.grid-glow { +.page-bg { position: fixed; inset: 0; pointer-events: none; + overflow: hidden; } -.page-noise { - opacity: 0.06; - background-image: - linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); - background-size: 120px 120px; - mask-image: radial-gradient(circle at center, black 45%, transparent 100%); -} - -.grid-glow { - background: - radial-gradient(circle at center, rgba(126, 152, 255, 0.12), transparent 42%); +.glow, +.grid-overlay { + position: absolute; + inset: 0; } -.aurora { - filter: blur(80px); - opacity: 0.5; +.glow { + filter: blur(90px); + opacity: 0.45; } -.aurora-one { - background: radial-gradient(circle at center, rgba(124, 231, 255, 0.3), transparent 60%); - transform: translate(-18%, -12%); - animation: floatAurora 18s ease-in-out infinite alternate; +.glow-a { + background: radial-gradient(circle at center, rgba(125, 211, 255, 0.35), transparent 55%); + transform: translate(-24%, -16%); } -.aurora-two { - background: radial-gradient(circle at center, rgba(143, 125, 255, 0.22), transparent 58%); - transform: translate(24%, 6%); - animation: floatAurora 24s ease-in-out infinite alternate-reverse; +.glow-b { + background: radial-gradient(circle at center, rgba(255, 138, 101, 0.28), transparent 50%); + transform: translate(32%, 8%); } -@keyframes floatAurora { - from { - transform: translate(-18%, -12%) scale(1); - } - to { - transform: translate(8%, 10%) scale(1.2); - } +.grid-overlay { + opacity: 0.08; + background-image: + linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px); + background-size: 88px 88px; + mask-image: radial-gradient(circle at center, black 40%, transparent 100%); } .container { @@ -154,17 +126,18 @@ button { .site-header { position: sticky; top: 0; - z-index: 12; + z-index: 10; padding: 18px 0; - background: linear-gradient(180deg, rgba(4, 9, 18, 0.82), rgba(4, 9, 18, 0.3), transparent); - backdrop-filter: blur(14px); + background: linear-gradient(180deg, rgba(7, 14, 26, 0.92), rgba(7, 14, 26, 0.52), transparent); + backdrop-filter: blur(16px); } -.nav { +.nav-shell, +.footer-shell { display: flex; align-items: center; justify-content: space-between; - gap: 24px; + gap: 20px; } .brand { @@ -176,44 +149,41 @@ button { .brand-mark { display: inline-grid; place-items: center; - width: 42px; - height: 42px; + width: 40px; + height: 40px; border-radius: 14px; - background: linear-gradient(135deg, rgba(124, 231, 255, 0.35), rgba(143, 125, 255, 0.38)); - border: 1px solid rgba(255, 255, 255, 0.15); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); + background: linear-gradient(135deg, rgba(125, 211, 255, 0.32), rgba(255, 138, 101, 0.3)); + border: 1px solid rgba(255, 255, 255, 0.14); font-weight: 800; - letter-spacing: 0.03em; } .brand-copy { display: flex; flex-direction: column; gap: 2px; - line-height: 1.1; } .brand-copy strong { - font-size: 0.98rem; + font-size: 1rem; } .brand-copy span { font-size: 0.76rem; - color: var(--muted); - letter-spacing: 0.06em; + letter-spacing: 0.08em; text-transform: uppercase; + color: var(--muted); } -.nav-links { - display: inline-flex; - align-items: center; - gap: 22px; +.nav-links, +.footer-links { + display: flex; + flex-wrap: wrap; + gap: 18px; color: var(--muted-strong); } .nav-links a { position: relative; - font-size: 0.96rem; } .nav-links a::after { @@ -234,269 +204,258 @@ button { transform: scaleX(1); } -.nav-button { - white-space: nowrap; +.button { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 48px; + padding: 0 18px; + border-radius: 999px; + border: 1px solid transparent; + font-weight: 700; + transition: + transform var(--transition), + border-color var(--transition), + background var(--transition), + box-shadow var(--transition); } -.hero-section { - padding-top: 48px; +.button:hover { + transform: translateY(-2px); } -.hero-grid { - display: grid; - grid-template-columns: 1.07fr 0.93fr; - gap: 30px; - align-items: center; +.button-primary { + background: linear-gradient(135deg, var(--accent), #a8ecff 30%, var(--accent-2)); + color: #05111d; + box-shadow: 0 18px 44px rgba(125, 211, 255, 0.18); } -.eyebrow-pill { - display: inline-flex; - align-items: center; - gap: 8px; - margin-bottom: 18px; - padding: 9px 14px; - border-radius: 999px; +.button-secondary, +.button-ghost { background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.08); - color: var(--muted-strong); - font-size: 0.78rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; + border-color: rgba(255, 255, 255, 0.12); } -.eyebrow-soft { - background: rgba(124, 231, 255, 0.08); +.hero { + padding-top: 48px; +} + +.hero-grid, +.loop-grid, +.faq-grid { + display: grid; + grid-template-columns: 1.05fr 0.95fr; + gap: 24px; + align-items: start; } .hero-copy h1, -.section-heading h2, -.cta-panel h2 { +.section-head h2, +.cta-card h2 { margin: 0; - font-weight: 800; - letter-spacing: -0.04em; line-height: 0.98; + letter-spacing: -0.045em; + font-weight: 800; } .hero-copy h1 { - max-width: 12ch; - font-size: clamp(3.2rem, 8vw, 6.2rem); + max-width: 10.5ch; + font-size: clamp(3.4rem, 8vw, 6.4rem); } -.gradient-text { - background: linear-gradient(90deg, var(--accent), #d4dcff 45%, var(--accent-3)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; +.hero-copy h1 span { + color: var(--accent); } -.hero-body, -.section-heading p, -.cta-panel p, +.lede, +.section-head p, .feature-card p, -.metric-card p, -.policy-card p, -.faq-content p, -.process-card p { +.loop-card p, +.matrix-notes, +.track-copy p, +.track-meta p, +.faq-answer p, +.cta-card p, +.stat-card p, +.footer-copy { color: var(--muted-strong); } -.hero-body { - max-width: 62ch; - margin: 22px 0 0; - font-size: 1.08rem; +.lede { + max-width: 60ch; + margin-top: 20px; + font-size: 1.06rem; } -.hero-actions, -.cta-actions { - display: flex; - flex-wrap: wrap; - gap: 14px; - margin-top: 30px; -} - -.button { +.pill, +.eyebrow, +.stat-label, +.feature-index, +.axis-label, +.track-kicker { display: inline-flex; align-items: center; - justify-content: center; - min-height: 50px; - padding: 0 18px; - border-radius: 999px; - border: 1px solid transparent; + gap: 8px; + font-size: 0.76rem; font-weight: 700; - transition: - transform var(--transition), - border-color var(--transition), - background var(--transition), - box-shadow var(--transition); + letter-spacing: 0.1em; + text-transform: uppercase; } -.button:hover { - transform: translateY(-2px); +.pill { + width: fit-content; + margin-bottom: 18px; + padding: 9px 14px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.08); + color: var(--muted-strong); } -.button-primary { - background: linear-gradient(135deg, rgba(124, 231, 255, 0.95), rgba(143, 125, 255, 0.96)); - color: #03111d; - box-shadow: 0 16px 40px rgba(124, 231, 255, 0.22); +.pill-soft { + background: rgba(125, 211, 255, 0.08); } -.button-secondary, -.button-ghost { - background: rgba(255, 255, 255, 0.05); - border-color: rgba(255, 255, 255, 0.1); - color: var(--text); +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-top: 30px; } -.button-ghost { - min-height: 44px; +.hero-stats, +.feature-grid, +.loop-cards, +.scoreboard-grid { + display: grid; + gap: 16px; +} + +.hero-stats { + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 30px; } -.glass-panel { +.stat-card, +.feature-card, +.loop-card, +.track-panel, +.score-card, +.matrix-card, +.scoreboard-card, +.faq-card, +.cta-card, +.scoreboard-note { position: relative; overflow: hidden; background: - linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)), - var(--bg-elevated); + linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)), + var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); backdrop-filter: blur(18px); } -.glass-panel::before { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(140deg, rgba(255, 255, 255, 0.1), transparent 30%, transparent 70%, rgba(124, 231, 255, 0.08)); - opacity: 0.45; - pointer-events: none; -} - -.hero-microstats { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; - margin-top: 32px; -} - -.microstat { - padding: 18px; -} - -.microstat-label, -.panel-kicker, -.summary-chip span, -.metric-copy span, -.process-step, -.feature-index { - display: inline-block; - color: var(--muted); - font-size: 0.76rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; -} - -.microstat-value { - display: block; - margin-top: 12px; - font-size: 2.1rem; - line-height: 1; +.stat-card, +.feature-card, +.loop-card, +.scoreboard-card { + padding: 22px; } -.microstat-note { +.stat-card strong { display: block; - margin-top: 12px; - color: var(--muted); - font-size: 0.92rem; + margin-top: 10px; + font-size: 2.2rem; } -.signal-board { - padding: 26px; +.score-card, +.matrix-card, +.track-panel, +.cta-card, +.scoreboard-note, +.faq-card { + padding: 24px; } -.signal-board-top, -.radar-head { +.score-header, +.matrix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } -.signal-board-top h2, -.radar-head h3, -.policy-card h3, -.feature-card h3, -.process-card h3, -.faq-trigger span:first-child { +.score-header h2, +.matrix-head h3, +.track-copy h3, +.cta-card h2 { margin: 10px 0 0; - font-size: clamp(1.25rem, 2.5vw, 1.8rem); + font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.03em; } -.status-pill { +.status-dot, +.matrix-badge { display: inline-flex; align-items: center; - gap: 8px; - padding: 8px 12px; + min-height: 34px; + padding: 0 12px; border-radius: 999px; - background: rgba(98, 245, 192, 0.12); - border: 1px solid rgba(98, 245, 192, 0.22); - color: #9ef9d6; + background: rgba(126, 240, 200, 0.12); + border: 1px solid rgba(126, 240, 200, 0.22); + color: #aef7dd; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } -.status-pill-soft { - background: rgba(143, 125, 255, 0.12); - border-color: rgba(143, 125, 255, 0.24); - color: #cac2ff; +.matrix-badge { + background: rgba(125, 211, 255, 0.1); + border-color: rgba(125, 211, 255, 0.2); + color: #bfe9ff; } -.signal-ring-wrap { +.score-hero { display: grid; - grid-template-columns: 220px 1fr; - gap: 22px; + grid-template-columns: 210px 1fr; + gap: 24px; align-items: center; margin-top: 28px; } -.signal-ring { +.score-orbit { position: relative; display: grid; place-items: center; - width: 220px; - height: 220px; - margin: 0 auto; + width: 210px; + height: 210px; border-radius: 50%; background: - radial-gradient(circle at center, rgba(7, 17, 30, 0.98) 48%, transparent 49%), - conic-gradient(from 210deg, rgba(124, 231, 255, 1), rgba(143, 125, 255, 1), rgba(98, 245, 192, 1), rgba(124, 231, 255, 1)); - box-shadow: - inset 0 0 38px rgba(0, 0, 0, 0.5), - 0 0 48px rgba(124, 231, 255, 0.18); + radial-gradient(circle at center, rgba(8, 17, 31, 0.95) 47%, transparent 48%), + conic-gradient(from 220deg, var(--accent), #bceeff, var(--accent-2), var(--accent-3), var(--accent)); + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45); } -.signal-ring::before, -.signal-ring::after { +.score-orbit::before, +.score-orbit::after { content: ""; position: absolute; border-radius: 50%; } -.signal-ring::before { +.score-orbit::before { inset: 18px; border: 1px solid rgba(255, 255, 255, 0.08); } -.signal-ring::after { - inset: -14px; - border: 1px solid rgba(124, 231, 255, 0.16); +.score-orbit::after { + inset: -10px; + border: 1px solid rgba(125, 211, 255, 0.18); } -.signal-ring-core { +.score-orbit-core { display: flex; flex-direction: column; align-items: center; @@ -504,491 +463,308 @@ button { text-align: center; } -.signal-ring-core span, -.signal-ring-core small { - color: var(--muted); +.score-orbit-core strong { + font-size: 3.5rem; + line-height: 1; } -.signal-ring-core strong { - font-size: 3.6rem; - line-height: 0.95; +.score-orbit-core span, +.score-orbit-core small { + color: var(--muted); } -.signal-metrics { +.score-metrics { display: grid; gap: 16px; } -.signal-metric strong { - display: block; - margin: 6px 0 10px; - font-size: 1.15rem; +.score-metric-head, +.progress, +.drift-strip, +.track-rail, +.track-stats, +.score-meta, +.score-meta-row { + display: flex; +} + +.score-metric-head, +.score-meta-row { + justify-content: space-between; + gap: 10px; +} + +.score-metric-head strong { + font-size: 1rem; } -.metric-bar { +.progress, +.axis-bar, +.score-mini-bar { width: 100%; height: 10px; border-radius: 999px; - background: rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.07); overflow: hidden; } -.metric-bar span { +.progress span, +.axis-bar span, +.score-mini-bar span { display: block; - width: var(--fill, 50%); + width: var(--value, 50%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); } -.shift-map { - margin-top: 26px; - padding: 18px; - border-radius: var(--radius-md); - background: rgba(255, 255, 255, 0.035); - border: 1px solid rgba(255, 255, 255, 0.08); -} - -.shift-map-head, -.shift-track { - display: flex; +.drift-strip { justify-content: space-between; gap: 14px; + margin-top: 26px; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.08); } -.shift-map-head { - color: var(--muted-strong); - font-weight: 600; +.drift-strip div { + display: grid; + gap: 6px; } -.shift-track { - margin-top: 14px; +.drift-strip span { color: var(--muted); - font-size: 0.84rem; + font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } -.sparkline { - display: grid; - grid-template-columns: repeat(10, minmax(0, 1fr)); - align-items: end; - gap: 8px; - height: 100px; - margin-top: 18px; -} - -.sparkline span { - display: block; - height: var(--height); - min-height: 22px; - border-radius: 999px 999px 10px 10px; - background: linear-gradient(180deg, rgba(124, 231, 255, 0.95), rgba(143, 125, 255, 0.3)); - box-shadow: 0 12px 28px rgba(124, 231, 255, 0.12); -} - -.trust-row { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 16px; - margin-top: 34px; -} - -.trust-label { - color: var(--muted); - font-size: 0.9rem; -} - -.trust-items { - display: flex; - flex-wrap: wrap; - gap: 12px; -} - -.trust-items span { - padding: 10px 14px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.04); - color: var(--muted-strong); +.drift-strip strong { + font-size: 0.96rem; } -.section-heading { +.section-head { max-width: 700px; } -.section-heading h2 { - font-size: clamp(2.2rem, 5vw, 3.8rem); - margin-top: 0; -} - -.section-heading p { - margin: 18px 0 0; - font-size: 1.04rem; -} - -.card-grid, -.process-grid { - display: grid; - gap: 18px; - margin-top: 34px; +.section-head h2 { + font-size: clamp(2.4rem, 5vw, 4rem); } -.card-grid-four { - grid-template-columns: repeat(4, minmax(0, 1fr)); +.section-head p { + margin-top: 18px; } -.feature-card, -.process-card, -.metric-card, -.policy-card, -.summary-chip, -.faq-item, -.cta-panel { - padding: 22px; +.feature-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 28px; } .feature-card h3, -.process-card h3, -.policy-card h3 { - margin-bottom: 12px; -} - -.benchmark-grid { - display: grid; - grid-template-columns: 0.92fr 1.08fr; - gap: 24px; - align-items: start; -} - -.metric-stack { - display: grid; - gap: 14px; - margin-top: 30px; -} - -.metric-card { - display: grid; - gap: 10px; +.loop-card h3, +.scoreboard-card h3 { + margin: 12px 0 10px; + font-size: 1.35rem; + letter-spacing: -0.03em; } -.metric-copy { - display: flex; - justify-content: space-between; - gap: 14px; - align-items: baseline; +.loop-cards { + grid-template-columns: repeat(2, minmax(0, 1fr)); } -.metric-copy strong { - font-size: 2rem; - letter-spacing: -0.04em; +.loop-card span { + display: inline-grid; + place-items: center; + width: 38px; + height: 38px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.08); + font-weight: 800; } -.radar-card { - padding: 24px; +.matrix-card { + margin-top: 24px; } -.radar-display { - position: relative; +.axis-grid { display: grid; - place-items: center; - height: 360px; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; + align-items: end; margin-top: 24px; } -.radar-grid, -.radar-shape, -.radar-center { - position: absolute; -} - -.radar-grid { - inset: 50%; - width: 280px; - height: 280px; - transform: translate(-50%, -50%) rotate(45deg); -} - -.radar-grid span { - position: absolute; - inset: 0; - border: 1px solid rgba(255, 255, 255, 0.08); - transform: scale(calc(1 - (var(--i, 0) * 0.18))); -} - -.radar-grid span:nth-child(1) { --i: 0; } -.radar-grid span:nth-child(2) { --i: 1; } -.radar-grid span:nth-child(3) { --i: 2; } -.radar-grid span:nth-child(4) { --i: 3; } - -.radar-shape { - inset: 50%; - width: 280px; - height: 280px; - transform: translate(-50%, -50%); - clip-path: polygon(50% 0%, 84% 32%, 72% 86%, 20% 90%, 8% 36%); -} - -.radar-shape-primary { - background: linear-gradient(180deg, rgba(124, 231, 255, 0.36), rgba(98, 245, 192, 0.16)); - border: 1px solid rgba(124, 231, 255, 0.3); - transform: translate(-50%, -50%) scale(0.92) rotate(6deg); -} - -.radar-shape-secondary { - background: linear-gradient(180deg, rgba(255, 210, 114, 0.24), rgba(143, 125, 255, 0.08)); - border: 1px solid rgba(255, 210, 114, 0.22); - transform: translate(-50%, -50%) scale(0.71) rotate(-10deg); -} - -.radar-center { - inset: 50%; - width: 18px; - height: 18px; - transform: translate(-50%, -50%); - border-radius: 50%; - background: var(--text); - box-shadow: 0 0 24px rgba(255, 255, 255, 0.7); -} - -.legend-grid { +.axis-column { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; - color: var(--muted-strong); -} - -.legend-grid > div { - display: flex; - align-items: center; gap: 10px; } -.legend-dot { - display: inline-block; - width: 12px; - height: 12px; - border-radius: 50%; -} - -.legend-primary { - background: var(--accent); +.axis-bar { + height: 140px; + display: flex; + align-items: end; } -.legend-secondary { - background: var(--accent-warm); +.axis-bar span { + width: 100%; } -.benchmark-notes { - margin: 22px 0 0; +.matrix-notes { + margin: 20px 0 0; padding-left: 18px; - color: var(--muted-strong); } -.benchmark-notes li + li { - margin-top: 10px; +.matrix-notes li + li { + margin-top: 8px; } -.suite-shell { - margin-top: 34px; +.track-shell { + margin-top: 28px; } -.tab-list { +.track-tabs { display: inline-flex; flex-wrap: wrap; gap: 12px; } -.tab-button { +.track-tab { min-height: 48px; padding: 0 18px; border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); + color: var(--text); cursor: pointer; transition: transform var(--transition), - border-color var(--transition), - background var(--transition); + background var(--transition), + border-color var(--transition); } -.tab-button:hover, -.tab-button.active { +.track-tab:hover, +.track-tab.active { transform: translateY(-2px); - background: rgba(124, 231, 255, 0.1); - border-color: rgba(124, 231, 255, 0.26); + background: rgba(125, 211, 255, 0.12); + border-color: rgba(125, 211, 255, 0.26); } -.tab-panel { - margin-top: 18px; - padding: 28px; +.track-panel { + margin-top: 16px; } -.tab-panel-grid { +.track-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; - gap: 24px; -} - -.tab-panel-copy h3 { - margin: 8px 0 14px; - font-size: 2rem; - letter-spacing: -0.03em; + gap: 22px; } -.tab-panel-copy p { - margin: 0; - color: var(--muted-strong); +.track-copy h3 { + margin-top: 8px; } -.pill-row { +.track-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } -.pill-row span { +.track-pills span, +.track-meta { + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.track-pills span { padding: 9px 12px; border-radius: 999px; - background: rgba(255, 255, 255, 0.05); color: var(--muted-strong); - border: 1px solid rgba(255, 255, 255, 0.08); } -.suite-sidebar { - display: grid; +.track-rail { + flex-direction: column; gap: 14px; } -.suite-note { +.track-meta { padding: 16px 18px; border-radius: var(--radius-md); - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); } -.suite-note strong { +.track-meta strong { display: block; margin-bottom: 8px; } -.leaderboard-summary { +.scoreboard-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; - margin-top: 30px; + margin-top: 28px; } -.summary-chip strong { +.scoreboard-note strong { display: block; margin-top: 8px; - font-size: 1.02rem; + font-size: 1rem; } -.leaderboard-grid { - display: grid; +.scoreboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; - margin-top: 24px; -} - -.leaderboard-card { - padding: 22px; + margin-top: 18px; } -.leaderboard-rank { +.score-tag { display: inline-flex; align-items: center; - justify-content: center; - min-width: 46px; - height: 30px; + min-height: 30px; padding: 0 10px; border-radius: 999px; - background: rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.07); color: var(--muted-strong); - font-size: 0.82rem; + font-size: 0.8rem; font-weight: 700; } -.leaderboard-card h3 { - margin: 16px 0 8px; - font-size: 1.5rem; - letter-spacing: -0.03em; -} - -.leaderboard-card p { - margin: 0; - color: var(--muted-strong); -} - -.leaderboard-score { +.score-number { display: flex; align-items: baseline; - gap: 10px; - margin: 20px 0 16px; + gap: 8px; + margin: 18px 0 14px; } -.leaderboard-score strong { - font-size: 3.4rem; - line-height: 0.95; +.score-number strong { + font-size: 3.2rem; + line-height: 1; letter-spacing: -0.05em; } -.leaderboard-score span { +.score-number span { color: var(--muted); } -.score-bars { - display: grid; +.score-meta { + flex-direction: column; gap: 12px; } -.score-bar { - display: grid; - gap: 6px; +.score-meta-row { + align-items: center; + gap: 14px; } -.score-bar-head { - display: flex; - justify-content: space-between; - gap: 10px; +.score-meta-row span { + flex: 0 0 108px; color: var(--muted-strong); font-size: 0.92rem; } -.score-bar-track { - width: 100%; - height: 10px; - border-radius: 999px; - overflow: hidden; - background: rgba(255, 255, 255, 0.06); -} - -.score-bar-fill { - height: 100%; - width: var(--score, 50%); - border-radius: inherit; - background: linear-gradient(90deg, var(--accent), var(--accent-2)); -} - -.process-grid { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} - -.method-footer { - margin-top: 22px; -} - -.policy-card { - max-width: 840px; +.score-mini-bar { + flex: 1; } .faq-grid { - display: grid; - grid-template-columns: 0.94fr 1.06fr; - gap: 24px; + align-items: start; } .faq-list { @@ -1005,10 +781,16 @@ button { padding: 0; border: 0; background: none; + color: var(--text); text-align: left; cursor: pointer; } +.faq-trigger span:first-child { + font-size: 1.15rem; + font-weight: 700; +} + .faq-icon { display: inline-grid; place-items: center; @@ -1016,71 +798,54 @@ button { height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); - flex: 0 0 auto; transition: transform var(--transition), background var(--transition); } -.faq-content { +.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms ease; } -.faq-content p { +.faq-answer p { overflow: hidden; margin: 0; padding-top: 0; } -.faq-item.open .faq-content { +.faq-card.open .faq-answer { grid-template-rows: 1fr; } -.faq-item.open .faq-content p { +.faq-card.open .faq-answer p { padding-top: 16px; } -.faq-item.open .faq-icon { +.faq-card.open .faq-icon { transform: rotate(45deg); - background: rgba(124, 231, 255, 0.14); + background: rgba(125, 211, 255, 0.12); } -.cta-panel { +.cta-card { display: flex; justify-content: space-between; - gap: 22px; align-items: center; - padding: 30px; + gap: 20px; } .site-footer { padding: 0 0 40px; } -.footer-grid { - display: grid; - grid-template-columns: 1fr auto 1.1fr; - gap: 20px; - align-items: center; +.footer-shell { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } -.footer-brand .brand-mark { - width: 38px; - height: 38px; -} - -.footer-links { - display: flex; - flex-wrap: wrap; - gap: 16px; - color: var(--muted-strong); -} - -.footer-note { +.footer-copy { + max-width: 34ch; margin: 0; - color: var(--muted); + text-align: right; } .reveal { @@ -1118,20 +883,18 @@ button { @media (max-width: 1100px) { .hero-grid, - .benchmark-grid, + .loop-grid, .faq-grid, - .tab-panel-grid, - .footer-grid { + .track-layout { grid-template-columns: 1fr; } - .leaderboard-grid, - .process-grid, - .card-grid-four { + .feature-grid, + .scoreboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .leaderboard-summary { + .scoreboard-note { grid-template-columns: 1fr; } } @@ -1141,42 +904,38 @@ button { position: static; } - .nav { - flex-wrap: wrap; + .nav-shell, + .footer-shell, + .cta-card { + flex-direction: column; + align-items: flex-start; } .nav-links { - order: 3; width: 100%; justify-content: space-between; - gap: 14px; - overflow-x: auto; - padding-bottom: 4px; + gap: 12px; } - .hero-copy h1 { - max-width: 14ch; - } - - .hero-microstats, - .leaderboard-grid, - .process-grid, - .card-grid-four { + .hero-stats, + .feature-grid, + .loop-cards, + .scoreboard-grid { grid-template-columns: 1fr; } - .signal-ring-wrap { + .score-hero { grid-template-columns: 1fr; } - .signal-ring { + .score-orbit { width: 190px; height: 190px; + margin: 0 auto; } - .cta-panel { - flex-direction: column; - align-items: flex-start; + .footer-copy { + text-align: left; } } @@ -1186,61 +945,46 @@ button { } .section { - padding: 68px 0; + padding: 72px 0; } - .hero-section { - padding-top: 24px; + .hero { + padding-top: 28px; } .hero-copy h1 { - font-size: clamp(2.7rem, 12vw, 4.3rem); + font-size: clamp(2.9rem, 13vw, 4.6rem); } - .signal-board, - .tab-panel, - .leaderboard-card, - .feature-card, - .process-card, - .metric-card, - .faq-item, - .cta-panel, - .summary-chip, - .policy-card { - padding: 18px; - border-radius: 20px; - } - - .signal-board-top, - .radar-head, - .trust-row { - flex-direction: column; - } - - .trust-items { - gap: 10px; + .section-head h2, + .cta-card h2 { + font-size: clamp(2.2rem, 10vw, 3rem); } - .tab-list { + .track-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } - .tab-button { + .track-tab { width: 100%; } - .radar-display { - height: 280px; - } - - .radar-grid, - .radar-shape { - width: 220px; - height: 220px; + .axis-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); } - .leaderboard-score strong { - font-size: 2.8rem; + .score-card, + .matrix-card, + .track-panel, + .scoreboard-note, + .scoreboard-card, + .faq-card, + .cta-card, + .stat-card, + .feature-card, + .loop-card { + padding: 18px; + border-radius: 20px; } } From 911a0688ff1771b7ee1f65d66776f759912ca6ff Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 6 Mar 2026 06:24:26 +0000 Subject: [PATCH 4/5] Stabilize Relay metrics and mobile actions Co-authored-by: ilikevibecoding --- index.html | 6 +++--- script.js | 22 +--------------------- styles.css | 9 +++++++++ 3 files changed, 13 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index cc44d58..168b84f 100644 --- a/index.html +++ b/index.html @@ -71,17 +71,17 @@

Train agents that keep their footing while the task keeps movin
Shift packs - 0 + 12

Versioned curriculum changes spanning reward drift, tool rewiring, and hidden resets.

Replay checks - 0 + 96

Forced returns to previous tasks so retention is measured instead of assumed.

Evaluation domains - 0 + 5

Language, tools, perception, planning, and multi-stage agentic control.

diff --git a/script.js b/script.js index 6c1ddf6..cccfe61 100644 --- a/script.js +++ b/script.js @@ -199,30 +199,10 @@ function renderScoreboard() { function initCounters() { const counters = document.querySelectorAll("[data-count]"); - const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; counters.forEach((counter) => { const target = Number(counter.dataset.count); - - if (reducedMotion) { - counter.textContent = String(target); - return; - } - - const duration = 1100; - const start = performance.now(); - - const update = (timestamp) => { - const progress = Math.min(1, (timestamp - start) / duration); - const eased = 1 - Math.pow(1 - progress, 3); - counter.textContent = String(Math.round(target * eased)); - - if (progress < 1) { - requestAnimationFrame(update); - } - }; - - requestAnimationFrame(update); + counter.textContent = String(target); }); } diff --git a/styles.css b/styles.css index 3440bc7..8bddceb 100644 --- a/styles.css +++ b/styles.css @@ -961,6 +961,15 @@ select { font-size: clamp(2.2rem, 10vw, 3rem); } + .hero-actions { + flex-direction: column; + align-items: stretch; + } + + .hero-actions .button { + width: 100%; + } + .track-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); From f3cd2bb70c75040da241d46c5000c28f1e8ad971 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 6 Mar 2026 06:26:50 +0000 Subject: [PATCH 5/5] Prevent mobile overflow in Relay layout Co-authored-by: ilikevibecoding --- styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/styles.css b/styles.css index 8bddceb..720d1f6 100644 --- a/styles.css +++ b/styles.css @@ -36,6 +36,7 @@ body { min-width: 320px; font-family: "Inter", "Segoe UI", Roboto, sans-serif; color: var(--text); + overflow-x: hidden; background: radial-gradient(circle at top left, rgba(125, 211, 255, 0.1), transparent 30%), radial-gradient(circle at top right, rgba(255, 138, 101, 0.08), transparent 24%), @@ -249,6 +250,16 @@ select { align-items: start; } +.hero-grid > *, +.loop-grid > *, +.faq-grid > *, +.track-layout > *, +.nav-shell > *, +.footer-shell > *, +.cta-card > * { + min-width: 0; +} + .hero-copy h1, .section-head h2, .cta-card h2 {