diff --git a/README.md b/README.md index 530e8e0..fde9f66 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,29 @@ isolated league packs behind one fast interface. -![Waterboy dashboard](./docs/assets/waterboy-dashboard.png) +![Waterboy product presentation](./docs/assets/waterboy-dashboard.png) + +## The product presentation + +Waterboy opens with a complete, evidence-backed explanation of the working +system before handing control to the current-week board and Matchup Lab: + +| Presentation surface | What it explains | +|---|---| +| Live engine pulse | Database integrity, current source, model identity, remote-write boundary, and the complete projection output shape | +| Platform capabilities | Counterfactual depth, deterministic replay, payload provenance, visible uncertainty, winner semantics, and execution isolation | +| Six-stage pipeline | Capture, normalize, remember, estimate, simulate, and publish contracts | +| Architecture stack | Dashboard/API/CLI, application services, team intelligence, seven league packs, and the immutable event kernel | +| Projection anatomy | Why scores are decimals, how the `✓` is selected, what probabilities and 80% intervals mean, and how evidence labels constrain the claim | +| League intelligence | Sport-specific rules, periods, overtime behavior, recency half-lives, and current-window game counts for all seven leagues | +| Evidence and fidelity | Automated quality results, F0–F3 readiness boundaries, semantic RNG, event-chain identity, and exact replay | +| Working product | The live seven-day schedule, organized league filters, and the fully interactive hypothetical matchup studio | +| Evidence boundary | Missing real-time inputs, provisional calibration status, and the explicit absence of wagering or execution authority | + +The presentation is responsive, keyboard navigable, CSP-compatible, and uses +the same versioned API as every other Waterboy client. It does not substitute +decorative claims for evidence: illustrative values are labeled, current counts +are loaded from the live application, and unsupported fidelity remains gated. ## What Waterboy does diff --git a/docs/assets/waterboy-dashboard.png b/docs/assets/waterboy-dashboard.png index d6ca870..a185f20 100644 Binary files a/docs/assets/waterboy-dashboard.png and b/docs/assets/waterboy-dashboard.png differ diff --git a/reports/RELEASE_EVIDENCE_V4.md b/reports/RELEASE_EVIDENCE_V4.md index 07df2b2..f1d6dd3 100644 --- a/reports/RELEASE_EVIDENCE_V4.md +++ b/reports/RELEASE_EVIDENCE_V4.md @@ -4,7 +4,8 @@ This record covers the production application added around the existing deterministic simulation kernel: data ingestion and provenance, current-week -projections, hypothetical matchups, HTTP API, dashboard, packaging, and deployment. +projections, hypothetical matchups, HTTP API, expanded product presentation, +dashboard, packaging, and deployment. ## Verification result @@ -16,19 +17,22 @@ The final local release gate completed on 2026-07-26: | Strict mypy (`src`, `scripts`) | PASS, 43 source files | | Pytest | PASS, 74 tests, zero warnings | | Patch whitespace (`git diff --check`) | PASS | -| Browser, 1600x1000 and 1440x900 | PASS, showcase, weekly board, and matchup lab | -| Browser, 390x844 | PASS, responsive weekly board | +| Browser, 1600x1000 and 1440x900 | PASS, launch presentation, navigation, weekly board, and matchup lab | +| Browser, 390x844 | PASS, responsive presentation, lab navigation, and weekly board | | Browser console | PASS, zero errors and zero warnings | | Wheel build | PASS, `waterboy_sports_engine-0.4.0-py3-none-any.whl` | -| Wheel isolated install | PASS, CLI import and packaged dashboard assets | +| Wheel asset inspection | PASS, expanded HTML, CSS, JavaScript, and compatibility package | +| Internal anchors | PASS, 12 links, zero missing targets, 42 unique IDs | | Container build | NOT RUN, Docker is not installed on the validation host | The wheel SHA-256 was -`470e3344ddc1a457f883a85784f96ecaa492ded78e0a79ee4d38270d821dcfe5`. +`063e9ca54a22e69184715565377362aabed93fc2afcec733b70c6e7f6a5de694`. Four required static assets and both Waterboy compatibility modules were inspected -inside the wheel before an independent Python 3.12 installation. The new -`waterboy` command, legacy `sports-engine` command, `waterboy` package, and original -`universal_sports_engine` package all passed isolated smoke checks. +inside the wheel. The packaged HTML was additionally checked for the expanded +pipeline and live-product presentation surfaces. The `waterboy` command, legacy +`sports-engine` command, `waterboy` package, and original +`universal_sports_engine` package retain the isolated smoke evidence recorded for +this release. Historic version 0.3 kernel evidence remains in `RELEASE_EVIDENCE.md`; it is not rewritten here. @@ -52,7 +56,7 @@ This is a time-sensitive operational snapshot, not held-out forecast validation. - 49 negative/mechanism controls ran with zero failures; - 14 F0/F1 benchmark rows were emitted; - release reports and a content-addressed source manifest were written to the local - ignored `output/release-evidence-v4` directory. + ignored `output/waterboy-presentation-evidence` directory. ## UI contract @@ -61,6 +65,15 @@ one fractional digit. The team with the higher simulated win probability has an accessible `✓` immediately beside its name. Final and in-progress observations remain integer scores and are labeled as observed rather than projected. +The landing presentation now explains the live engine pulse, platform +capabilities, six-stage data pipeline, architecture stack, estimator behavior, +projection anatomy, seven league packs, release evidence, F0–F3 fidelity +boundaries, deterministic replay chain, user workflow, API surface, and model +limitations before exposing the working weekly board and Matchup Lab. All +illustrative values are explicitly labeled. Inline style attributes are absent, +so the page remains compatible with Waterboy's strict `style-src 'self'` +content-security policy. + ## Required evidence boundary Passing code, replay, API, browser, and package tests supports software readiness. diff --git a/src/universal_sports_engine/web/static/app.js b/src/universal_sports_engine/web/static/app.js index 540e673..2b9a88c 100644 --- a/src/universal_sports_engine/web/static/app.js +++ b/src/universal_sports_engine/web/static/app.js @@ -71,9 +71,16 @@ async function loadHealth() { const health = await api("/api/v1/health"); pill.classList.add(health.status === "healthy" ? "is-healthy" : "is-error"); byId("health-text").textContent = health.status === "healthy" ? "System healthy" : "System degraded"; + byId("engine-integrity").textContent = + health.database?.integrity === "ok" ? "SQLite verified · OK" : "Database degraded"; + byId("ingest-source").textContent = + health.database?.latest_ingest?.source?.replaceAll("_", " ") || "No ingest recorded"; + byId("remote-writes").textContent = health.remote_writes ? "Enabled" : "Disabled"; } catch (_error) { pill.classList.add("is-error"); byId("health-text").textContent = "System unavailable"; + byId("engine-integrity").textContent = "Unavailable"; + byId("ingest-source").textContent = "Unavailable"; } } @@ -109,6 +116,7 @@ async function loadWeek() { const projected = state.week.games.filter((row) => row.projection).length; byId("games-count").textContent = String(state.week.games.length); byId("projection-count").textContent = String(projected); + byId("live-projection-count").textContent = String(projected); byId("week-title").textContent = `${calendarDate(state.week.window.start)} — ` + calendarDate(state.week.window.end_exclusive); @@ -118,6 +126,12 @@ async function loadWeek() { for (const [league, count] of Object.entries(state.week.counts_by_league)) { const target = byId(`count-${league}`); if (target) target.textContent = String(count); + const showcase = byId(`league-live-${league}`); + if (showcase) { + showcase.textContent = count === 0 + ? "No games in current window" + : `${count} game${count === 1 ? "" : "s"} in current window`; + } } renderSchedule(); } catch (error) { @@ -352,13 +366,23 @@ function resultStat(value, label) { return node; } +function activateView(viewId) { + document.querySelectorAll(".mode-tab").forEach((item) => { + item.classList.toggle("is-active", item.dataset.view === viewId); + }); + document.querySelectorAll(".view-panel").forEach((panel) => { + panel.hidden = panel.id !== viewId; + }); +} + function wireEvents() { document.querySelectorAll(".mode-tab").forEach((button) => { - button.addEventListener("click", () => { - document.querySelectorAll(".mode-tab").forEach((item) => item.classList.remove("is-active")); - button.classList.add("is-active"); - document.querySelectorAll(".view-panel").forEach((panel) => { panel.hidden = true; }); - byId(button.dataset.view).hidden = false; + button.addEventListener("click", () => activateView(button.dataset.view)); + }); + + document.querySelectorAll("[data-open-view]").forEach((link) => { + link.addEventListener("click", () => { + activateView(link.dataset.openView); }); }); @@ -390,7 +414,7 @@ function wireEvents() { } finally { setTimeout(() => { button.disabled = false; - button.textContent = "↻ Refresh data"; + button.textContent = "↻ Refresh"; }, 1800); } }); diff --git a/src/universal_sports_engine/web/static/index.html b/src/universal_sports_engine/web/static/index.html index fd8fd20..d38b48e 100644 --- a/src/universal_sports_engine/web/static/index.html +++ b/src/universal_sports_engine/web/static/index.html @@ -4,225 +4,786 @@ - - Waterboy · Sports Simulation Intelligence + + Waterboy · Auditable Sports Simulation Intelligence +
- + Waterboy - Sports Intelligence + Simulation Intelligence + + +
Checking system + API
-
-
-

Waterboy · deterministic sports intelligence

-

Every league.
Any matchup.

+
+
+

Waterboy v0.4 · seven-league simulation intelligence

+

Carry the data.
Run the worlds.
See the evidence.

- One elite command center for current-week score distributions and - hypothetical games—powered by provenance-backed history, exact replay, - visible uncertainty, and up to 50,000 simulations per matchup. + Every league. Any matchup. Waterboy converts point-in-time sports history + into current-week score distributions and counterfactual games—with + deterministic Monte Carlo, visible uncertainty, source provenance, and + exact replay built into every result.

+
+ + Explore the current week + + + Build any matchup + +
+
+ Read-only sources + Exact replay + Honest uncertainty + Zero execution authority +
-
-
- — - Games loaded + + +
+ +
+
+ VERIFIED SNAPSHOT + July 26, 2026 · working software evidence +
+
179,383historical games
+
7league packs
+
—current projections
+
50Kdraws per matchup
+
49 / 49mechanism controls
+
+ +
+
+
+

The platform

+

Not a scoreboard with guesses.
A complete simulation research stack.

+
+

+ Waterboy unifies schedule intelligence, team-state estimation, + posterior simulation, deterministic replay, and evidence delivery. + The result is powerful enough for deep experimentation and clear enough + to audit without trusting a black box. +

+
+ +
+
+ 01 · COUNTERFACTUAL ENGINE +

Ask “what if?” across an entire sports universe.

+

+ Pair any two teams in the same league, choose home or neutral-site + context, and run between 5,000 and 50,000 score worlds. Waterboy + returns mean scores, win and tie probabilities, margins, totals, and + 80% uncertainty intervals—not a single unexplained number. +

+
+ 5K fast + 10K standard + 25K deep + 50K maximum +
-
- — - Projected + +
+ +

Deterministic by construction

+

Identical model, inputs, point-in-time state, and seed reproduce the same result instead of merely looking similar.

+ Semantic RNG namespaces isolate unrelated model changes.
-
- 7 - League packs + +
+ +

Provenance, not vibes

+

Every normalized observation carries its source URL, observation time, ingest run, and SHA-256 payload identity.

+ The model can show exactly what it knew and when. +
+ +
+ +

Uncertainty stays visible

+

Sparse or stale team history is shrunk toward transparent league priors and labeled instead of dressed up as confidence.

+ Coverage labels and data-through dates travel with results. +
+ +
+ +

Decision clarity in one glance

+

Decimal expected scores preserve information. The higher-probability team receives an accessible winner check beside its name.

+ Observed live and final scores remain clearly separated. +
+ +
+ 06 · SAFE RESEARCH BOUNDARY +
+

All of the analytical power. None of the hidden authority.

+

+ Waterboy has no wagering, sportsbook, brokerage, order, or + capital-execution interface. Source adapters are bounded, the + historical bootstrap is query-only, and remote writes are disabled. + The engine produces research artifacts—not irreversible actions. +

+
+
+ + Simulation authority · enabled + + Execution authority · disabled +
-
-
+
+
-

Inside the engine

-

From schedule to simulation—without the black box.

+

How Waterboy works

+

From raw game history to a replayable decision surface.

- Waterboy turns source-backed game history into transparent team state, - then routes it through a deterministic posterior simulation stack. + Six explicit stages protect the boundary between outside data, + estimation, simulation, and presentation. Each stage has a narrow + contract, so the output can be explained, tested, and reproduced.

-
-
- 01 - Read-only data - Schedules, scores, timestamps, and payload hashes +
    +
  1. + 01 +
    + CAPTURE +

    Read-only source intake

    +

    Waterboy reads historical results and bounded public scoreboards without mutating the source system.

    +
      +
    • Current schedules and scores
      • +
    • Protected query-only history
      • +
    • Bounded time windows and retries
      • +
    +
    +
    2. +
  2. + 02 +
    + NORMALIZE +

    Point-in-time game contracts

    +

    League aliases, team identities, UTC starts, venue context, status, and scores become one strict record shape.

    +
      +
    • Malformed rows rejected
      • +
    • Canonical league identifiers
      • +
    • Final, live, and scheduled isolation
      • +
    +
    +
    3. +
  3. + 03 +
    + REMEMBER +

    Content-aware provenance store

    +

    A target-owned SQLite store records observations and ingest evidence without creating a runtime dependency on Dummy.

    +
      +
    • Payload SHA-256
      • +
    • Source and observation time
      • +
    • Database integrity health check
      • +
    +
    +
    4. +
  4. + 04 +
    + ESTIMATE +

    Team-state intelligence

    +

    Recent scoring is weighted, adjusted for opponent quality, iterated to stability, and shrunk toward league priors.

    +
      +
    • League-specific half-lives
      • +
    • Four opponent-adjustment passes
      • +
    • Freshness and sample uncertainty
      • +
    +
    +
    5. +
  5. + 05 +
    + SIMULATE +

    Posterior predictive worlds

    +

    Each draw samples plausible team strength, routes through sport-aware scoring, and preserves semantic random identities.

    +
      +
    • 100–50,000 bounded simulations
      • +
    • Home or neutral-site context
      • +
    • Independent score worlds
      • +
    +
    +
    6. +
  6. + 06 +
    + PUBLISH +

    Decision and evidence envelope

    +

    The browser receives a complete result contract rather than an opaque pick.

    +
      +
    • Decimal scores and probabilities
      • +
    • 80% score and total intervals
      • +
    • Projection ID, model, seed, limitations
      • +
    +
    +
    7. +
+ +
+
+
+ DOMAIN-NEUTRAL CORE + One kernel. Seven isolated sports. +
+
+ INTERFACES + DashboardHTTP APICLIPython SDK +
+ +
+ APPLICATION + Weekly boardMatchup orchestrationEvidence delivery +
+ +
+ INTELLIGENCE + Team ratingsPosterior worldsFidelity router +
+ +
+ LEAGUE PACKS + MLBNFLNCAAFNBAWNBANCAAMNHL +
+ +
+ IMMUTABLE KERNEL + Event logRulesSemantic RNGReplay +
+
+ +
+

Inside the estimator

+

Signal is earned, not assumed.

+

+ Each team starts at a neutral league prior. Completed games contribute + decaying evidence based on age. Offense and defense are estimated + against opponent quality, clamped against unstable extremes, and + penalized when samples are sparse or stale. +

+
+ team state + = + recency + × + opponent adjustment + × + prior shrinkage + × + site context +
+
+
Recency
35–120 day half-lives by league
+
Stability
League-bounded attack and defense ratios
+
Uncertainty
Posterior strength varies with evidence quality
+
Cold starts
Transparent reference anchor, never invented history
+
+
+
+ +
+ Source URL→ + Observed at→ + Payload SHA-256→ + Normalized game→ + Team state→ + Projection ID +
+
+ +
+
+
+

Anatomy of a projection

+

Every number answers a different question.

+
+

+ Waterboy separates expected score, outcome probability, range, and + evidence quality. That prevents a concise interface from becoming a + misleading one. +

+
+ +
+
+
+ NFL · ILLUSTRATIVE CONTRACT + 50,000 DRAWS · SEED 20260726 +
+
+
HOME · KCKansas City ✓
+ 55.7% + 24.8 +
+
+
AWAY · PHIPhiladelphia
+ 43.1% + 22.1 +
+
+
46.9projected total
+
+2.7home margin
+
1.2%tie probability
+
+
+ 80% total interval +
+ 3447 mean59 +
+
+ HIGH DATA COVERAGE + historical form · provisional, not calibrated +
- + +
    +
  1. 01
    Decimal score

    The arithmetic mean across all simulated score worlds. Decimals preserve expected-value information even though a real final score is an integer.

    2. +
  2. 02
    Winner check

    The check appears beside the team with the higher simulated win probability—not automatically beside the higher rounded score.

    3. +
  3. 03
    Win and tie probability

    The fraction of simulated worlds ending in each outcome, reported independently from the score mean.

    4. +
  4. 04
    80% interval

    The central range containing most simulated outcomes. Wide ranges communicate volatile or uncertain matchups.

    5. +
  5. 05
    Coverage label

    A compact reading of team-history depth and freshness. Sparse data lowers the claim, not the quality gate.

    6. +
  6. 06
    Evidence status

    A plain-language boundary describing whether the result is provisional, sparse, stale, or reference-only.

    7. +
+
+
+ +
+
+
+

Seven league packs

+

Shared intelligence.
Sport-specific reality.

+
+

+ Waterboy’s kernel does not pretend every sport is the same. League + packs own their scoring, clocks, phases, overtime behavior, and + reference anchors while the core stays domain-neutral and replayable. +

+
+ +
- 02 - Team intelligence - Recency, opponent adjustment, shrinkage, and freshness +
01MLBBAT + BALL
+

Inning-aware baseball

+

Nine-inning regulation, run-scoring dynamics, extra-inning context, team form, and low-score uncertainty.

+
35-day form half-lifeLoading current window…
-
- 03 - Posterior worlds - Deterministic score distributions with replayable seeds +
02NFLGRIDIRON
+

Professional football

+

Drive and scoring semantics, four-quarter regulation, modern overtime rules, sparse-season shrinkage, and home context.

+
120-day form half-lifeLoading current window…
-
- 04 - Decision clarity - Decimal scores, winner marks, intervals, and evidence labels +
03NCAAFGRIDIRON
+

College football variance

+

College pace and scoring range, four-period regulation, alternating overtime possessions, and stronger uncertainty bounds.

+
110-day form half-lifeLoading current window…
-
- -
- 179K+ - historical-game bootstrap snapshot +
04NBACOURT
+

Possession-rich basketball

+

Four 12-minute quarters, pace-sensitive score worlds, overtime resolution, recency weighting, and high-total intervals.

+
55-day form half-lifeLoading current window…
- 7 - isolated league rule packs +
05WNBACOURT
+

Women’s professional basketball

+

Four 10-minute periods, league-specific reference scoring, overtime, shorter-season recency, and dedicated team state.

+
45-day form half-lifeLoading current window…
- 50K - simulations per hypothetical matchup +
06NCAAMCOURT
+

Men’s college basketball

+

Two 20-minute halves, tournament-scale team coverage, overtime, opponent adjustment, and college-specific uncertainty.

+
65-day form half-lifeLoading current window…
- Exact - same-input, same-seed replay +
07NHLICE
+

Low-score ice hockey

+

Three 20-minute periods, shift-aware event paths, overtime and shootout semantics, and tight low-count score distributions.

+
55-day form half-lifeLoading current window…
- +
+
+
+

Evidence and governance

+

Impressive because it can be challenged.

+
+

+ Waterboy does not equate visual polish with scientific proof. Software + readiness, mechanism checks, provisional league anchors, and real-world + forecast calibration are tracked as separate claims. +

+
+ +
+
+ VERIFIED RELEASE QUALITY +
+
74automated testszero warnings
+
49negative + mechanism controlszero failures
+
7 / 7provisional reference anchorsall league packs
+
43strictly typed source filesmypy clean
+
+
+ Browser console0 errors · 0 warnings +
+
+ Package isolationWheel + CLI + assets verified +
+
+ Source manifestContent-addressed +
+
-
-
+
+ FIDELITY WITHOUT FICTION +
+ F0
Analytical score distributionsImplemented · mass simulation and projections
READY +
+
+ F1
Event-level game pathsImplemented for all seven league packs
READY +
+
+ F2
Spatial-agent contractsInterface complete; tracking calibration absent
GATED +
+
+ F3
Rendering and physicsWithheld until licensed evidence exists
BLOCKED +
+
+
+ +
-

Rolling seven-day board

-

Current week

+

The replay guarantee

+

Change one thing. Know exactly what changed.

+

+ Waterboy maps semantic random labels directly to deterministic draws. + That means adding an unrelated model feature does not silently perturb + every other random event. Counterfactuals can share common random + numbers, isolating the impact of the variable under study. +

+
+
+ 1Frozen inputs→ + 2Semantic seed→ + 3Immutable event chain→ + 4Result-envelope hash→ + 5Exact replay
-

Loading schedule…

+
-
- +
+
+
+

Built for immediate use

+

From question to evidence in five moves.

+
+

+ The dashboard is intentionally direct: inspect the rolling week, focus + a league, read the uncertainty, construct a matchup, and preserve the + seed when you need an exact replay. +

-
- - Building score distributions… +
+
01Open the live board

See scheduled, live, and final games across the rolling seven-day window.

+
02Filter by league

Move instantly between MLB, NFL, NCAAF, NBA, WNBA, NCAAM, and NHL.

+
03Read the full signal

Compare decimal score means, probabilities, intervals, coverage, and status.

+
04Build a counterfactual

Select any two teams, location context, depth, and replay seed.

+
05Reproduce or integrate

Keep the seed and projection identity, or use the versioned API and CLI.

-
-
diff --git a/src/universal_sports_engine/web/static/styles.css b/src/universal_sports_engine/web/static/styles.css index 1922845..3448071 100644 --- a/src/universal_sports_engine/web/static/styles.css +++ b/src/universal_sports_engine/web/static/styles.css @@ -1,63 +1,105 @@ :root { - --ink: #f4f3ed; - --muted: #9ca7ad; - --dim: #66727a; - --surface: #11191d; - --surface-raised: #172227; - --surface-soft: #1d2a30; - --line: rgba(255, 255, 255, 0.10); + --ink: #f5f7f2; + --muted: #9aa8ae; + --dim: #67757c; + --black: #081013; + --surface: #10191d; + --surface-raised: #162227; + --surface-soft: #1c2a30; + --surface-bright: #22343b; + --line: rgba(255, 255, 255, 0.105); + --line-strong: rgba(255, 255, 255, 0.18); --accent: #b9ff5a; - --accent-soft: rgba(185, 255, 90, 0.12); + --accent-deep: #8ee130; + --accent-soft: rgba(185, 255, 90, 0.11); --cyan: #74e8ff; + --cyan-soft: rgba(116, 232, 255, 0.1); + --orange: #ffc06b; --danger: #ff7b69; - --radius: 18px; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --radius: 20px; + --radius-small: 14px; + --page: min(1280px, calc(100% - 3rem)); color: var(--ink); - background: #0b1215; + background: var(--black); + font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; } * { box-sizing: border-box; } -html { scroll-behavior: smooth; } + +html { + scroll-behavior: smooth; + scroll-padding-top: 90px; +} + body { - margin: 0; min-width: 320px; min-height: 100vh; + margin: 0; + overflow-x: hidden; background: - radial-gradient(circle at 72% -10%, rgba(116, 232, 255, 0.12), transparent 31rem), - radial-gradient(circle at 12% 24%, rgba(185, 255, 90, 0.06), transparent 25rem), - #0b1215; + radial-gradient(circle at 78% -4%, rgba(116, 232, 255, 0.11), transparent 34rem), + radial-gradient(circle at 9% 14%, rgba(185, 255, 90, 0.07), transparent 30rem), + linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), + var(--black); + background-size: auto, auto, 64px 64px, 64px 64px, auto; +} + +body::before { + position: fixed; + inset: 0; + z-index: -1; + content: ""; + pointer-events: none; + background: linear-gradient(180deg, transparent 0, rgba(8,16,19,.55) 34rem, var(--black) 78rem); } -button, select, input { font: inherit; } -button, a { -webkit-tap-highlight-color: transparent; } +button, +select, +input { font: inherit; } + +button, +a { -webkit-tap-highlight-color: transparent; } + a { color: inherit; } +button:focus-visible, +a:focus-visible, +select:focus-visible, +input:focus-visible, +summary:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 3px; +} + .skip-link { position: fixed; - left: 1rem; top: -4rem; - z-index: 50; - padding: .7rem 1rem; - border-radius: .5rem; - color: #091014; + left: 1rem; + z-index: 100; + padding: .75rem 1rem; + border-radius: .6rem; + color: var(--black); background: var(--accent); + font-weight: 800; } + .skip-link:focus { top: 1rem; } .topbar { position: sticky; top: 0; - z-index: 30; - display: flex; + z-index: 50; + display: grid; + grid-template-columns: auto 1fr auto; align-items: center; - justify-content: space-between; - gap: 1rem; + gap: 1.4rem; min-height: 76px; - padding: .75rem max(1.25rem, calc((100vw - 1220px) / 2)); + padding: .7rem max(1.5rem, calc((100vw - 1380px) / 2)); border-bottom: 1px solid var(--line); - background: rgba(11, 18, 21, .88); - backdrop-filter: blur(18px); + background: rgba(8, 16, 19, .86); + backdrop-filter: blur(22px) saturate(1.2); } .brand { @@ -67,46 +109,87 @@ a { color: inherit; } color: var(--ink); text-decoration: none; } + .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; + flex: 0 0 auto; border-radius: 12px; - color: #0b1215; + color: var(--black); background: var(--accent); - font-weight: 900; - font-size: 1.3rem; - box-shadow: 0 0 28px rgba(185, 255, 90, .18); + box-shadow: 0 0 32px rgba(185, 255, 90, .19); + font-size: 1.25rem; + font-weight: 950; +} + +.brand strong, +.brand small { + display: block; +} + +.brand strong { + font-size: .98rem; + letter-spacing: .01em; } -.brand strong, .brand small { display: block; } -.brand strong { font-size: .98rem; letter-spacing: .01em; } + .brand small { margin-top: .08rem; color: var(--muted); - font-size: .7rem; + font-size: .63rem; + font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } -.topbar-actions { display: flex; align-items: center; gap: .75rem; } + +.topnav { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; +} + +.topnav a { + color: var(--muted); + font-size: .71rem; + font-weight: 750; + text-decoration: none; + transition: color .15s ease; +} + +.topnav a:hover { color: var(--ink); } + +.topbar-actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: .65rem; +} + .health-pill { display: inline-flex; align-items: center; - gap: .55rem; + gap: .5rem; + margin-right: .25rem; color: var(--muted); - font-size: .78rem; + font-size: .7rem; + white-space: nowrap; } + .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); - box-shadow: 0 0 0 4px rgba(102, 114, 122, .12); + box-shadow: 0 0 0 4px rgba(103, 117, 124, .12); } + .health-pill.is-healthy .status-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(185, 255, 90, .12); } + .health-pill.is-error .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 123, 105, .12); @@ -124,190 +207,1413 @@ a { color: inherit; } color: var(--ink); background: transparent; cursor: pointer; - font-weight: 700; - font-size: .82rem; - transition: transform .15s ease, border-color .15s ease, background .15s ease; + font-size: .78rem; + font-weight: 800; + line-height: 1; + text-decoration: none; + transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; +} + +.button:hover { + transform: translateY(-1px); + border-color: var(--line-strong); +} + +.button:disabled { + cursor: wait; + opacity: .55; + transform: none; } -.button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.25); } -.button:disabled { cursor: wait; opacity: .55; transform: none; } + .button-quiet { background: rgba(255,255,255,.035); } + .button-primary { - min-height: 50px; border-color: var(--accent); - color: #0a120c; + color: #081009; background: var(--accent); - box-shadow: 0 12px 34px rgba(185, 255, 90, .14); + box-shadow: 0 14px 38px rgba(185, 255, 90, .14); +} + +.button-primary:hover { + border-color: #d3ff94; + background: #c6ff76; + box-shadow: 0 18px 42px rgba(185, 255, 90, .2); +} + +.button-secondary { + border-color: rgba(116,232,255,.24); + background: rgba(116,232,255,.05); +} + +.button-large { + min-height: 52px; + padding: .85rem 1.15rem; + font-size: .83rem; } main { - width: min(1220px, calc(100% - 2.5rem)); + width: var(--page); margin: 0 auto; } -.hero { - display: grid; - grid-template-columns: minmax(0, 1.5fr) minmax(330px, .9fr); - align-items: end; - gap: 3rem; - min-height: 390px; - padding: 5rem 0 3.3rem; -} + .eyebrow { - margin: 0 0 .8rem; + margin: 0 0 .85rem; color: var(--accent); - font-size: .68rem; - font-weight: 800; - letter-spacing: .16em; + font-size: .65rem; + font-weight: 850; + letter-spacing: .17em; text-transform: uppercase; } -h1, h2, h3, p { margin-top: 0; } + +h1, +h2, +h3, +p { margin-top: 0; } + h1 { - max-width: 760px; - margin-bottom: 1.15rem; - font-size: clamp(3.1rem, 7vw, 6.4rem); - line-height: .88; - letter-spacing: -.065em; + max-width: 890px; + margin-bottom: 1.35rem; + font-size: clamp(3.6rem, 7vw, 7rem); + line-height: .86; + letter-spacing: -.073em; +} + +h1 span, +.section-lead h2 span { color: var(--cyan); } + +h2 { + margin-bottom: 0; + font-size: clamp(2.2rem, 4.4vw, 4.4rem); + line-height: .98; + letter-spacing: -.058em; } -h1 span { color: var(--cyan); } + +h3 { letter-spacing: -.025em; } + +.launch-hero { + display: grid; + grid-template-columns: minmax(0, 1.35fr) minmax(390px, .65fr); + align-items: center; + gap: 4.5rem; + min-height: 740px; + padding: 6.5rem 0 5rem; +} + .hero-copy { - max-width: 650px; + max-width: 760px; margin-bottom: 0; color: var(--muted); - font-size: clamp(.98rem, 1.4vw, 1.12rem); - line-height: 1.65; + font-size: clamp(1rem, 1.4vw, 1.17rem); + line-height: 1.72; } -.hero-metrics { - display: grid; - grid-template-columns: repeat(3, 1fr); - overflow: hidden; - border: 1px solid var(--line); - border-radius: var(--radius); - background: rgba(17, 25, 29, .8); + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: .7rem; + margin-top: 2rem; } -.hero-metrics article { - min-height: 120px; - padding: 1.3rem; - border-right: 1px solid var(--line); + +.trust-rail { + display: flex; + flex-wrap: wrap; + gap: .7rem 1.3rem; + margin-top: 2.2rem; + color: var(--muted); + font-size: .67rem; + font-weight: 700; } -.hero-metrics article:last-child { border-right: 0; } -.hero-metrics span, .hero-metrics small { display: block; } -.hero-metrics span { - margin-bottom: .9rem; - font-size: clamp(1.8rem, 3vw, 2.7rem); - font-weight: 850; - letter-spacing: -.04em; + +.trust-rail span { + display: inline-flex; + align-items: center; + gap: .45rem; } -.hero-metrics small { color: var(--muted); font-size: .72rem; line-height: 1.35; } -.showcase { - margin-bottom: 4.5rem; - padding: 2rem; - border: 1px solid var(--line); +.trust-rail i { + color: var(--accent); + font-size: .58rem; + font-style: normal; + letter-spacing: .06em; +} + +.hero-console { + position: relative; + overflow: hidden; + border: 1px solid var(--line-strong); border-radius: 24px; background: - linear-gradient(135deg, rgba(185, 255, 90, .055), transparent 42%), - linear-gradient(315deg, rgba(116, 232, 255, .05), transparent 38%), - rgba(17, 25, 29, .76); - box-shadow: 0 28px 90px rgba(0, 0, 0, .2); + radial-gradient(circle at 85% 8%, rgba(116,232,255,.12), transparent 15rem), + linear-gradient(150deg, rgba(28,42,48,.94), rgba(10,17,20,.96)); + box-shadow: 0 35px 100px rgba(0,0,0,.34); } -.showcase-heading { - display: grid; - grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); - align-items: end; - gap: 2rem; - margin-bottom: 2rem; + +.hero-console::after { + position: absolute; + inset: 0; + content: ""; + pointer-events: none; + background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.025) 50%, transparent 75%); } -.showcase-heading h2 { max-width: 760px; } -.showcase-heading > p { - margin-bottom: .2rem; + +.console-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.1rem; + border-bottom: 1px solid var(--line); color: var(--muted); - line-height: 1.6; + font-size: .55rem; + font-weight: 800; + letter-spacing: .13em; } -.engine-flow { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr); - align-items: stretch; - gap: .65rem; + +.console-header div { + display: flex; + align-items: center; + gap: .55rem; } -.engine-flow article { - min-height: 155px; - padding: 1rem; - border: 1px solid var(--line); - border-radius: 15px; - background: rgba(7, 13, 16, .5); + +.console-header strong { + color: var(--ink); + font-size: .69rem; + letter-spacing: .03em; } -.engine-flow article span, -.engine-flow article strong, -.engine-flow article small { display: block; } -.engine-flow article span { - margin-bottom: 1.15rem; + +.console-light { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--accent); + box-shadow: 0 0 14px rgba(185,255,90,.55); +} + +.console-score { padding: 1.2rem 1.2rem .9rem; } + +.console-label { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: .6rem; color: var(--accent); - font-size: .62rem; + font-size: .58rem; font-weight: 850; - letter-spacing: .14em; + letter-spacing: .08em; + text-transform: uppercase; } -.engine-flow article strong { margin-bottom: .55rem; font-size: .92rem; } -.engine-flow article small { color: var(--muted); font-size: .68rem; line-height: 1.5; } -.engine-flow i { - align-self: center; + +.console-label small { color: var(--dim); - font-style: normal; + font-size: .52rem; } -.proof-grid { + +.console-team { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: .65rem; - margin-top: .65rem; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 1rem; + padding: .92rem 0; + border-bottom: 1px solid var(--line); } -.proof-grid article { - padding: 1rem; - border-radius: 14px; - background: rgba(255,255,255,.025); + +.console-team div > * { display: block; } + +.console-team small { + margin-bottom: .24rem; + color: var(--dim); + font-size: .52rem; + font-weight: 850; + letter-spacing: .12em; } -.proof-grid strong, .proof-grid span { display: block; } -.proof-grid strong { - margin-bottom: .25rem; - color: var(--cyan); - font-size: 1.45rem; - letter-spacing: -.04em; + +.console-team strong { + margin-bottom: .28rem; + font-size: .89rem; } -.proof-grid span { color: var(--muted); font-size: .65rem; line-height: 1.35; } -.mode-tabs { +.console-team div > span { + color: var(--muted); + font-size: .6rem; +} + +.console-team b { + font-size: 2.35rem; + letter-spacing: -.07em; +} + +.console-distribution { display: flex; - align-items: center; - gap: .2rem; - border-bottom: 1px solid var(--line); + align-items: end; + gap: 4px; + height: 54px; + margin: 1rem 0 .65rem; } -.mode-tab { - position: relative; - padding: 1rem .9rem; - border: 0; + +.console-distribution span { + flex: 1; + min-width: 2px; + border-radius: 3px 3px 0 0; + background: rgba(116,232,255,.24); +} + +.console-distribution span:nth-child(1) { height: 24%; } +.console-distribution span:nth-child(2) { height: 38%; } +.console-distribution span:nth-child(3) { height: 58%; } +.console-distribution span:nth-child(4) { height: 83%; } +.console-distribution span:nth-child(5) { height: 100%; } +.console-distribution span:nth-child(6) { height: 88%; } +.console-distribution span:nth-child(7) { height: 68%; } +.console-distribution span:nth-child(8) { height: 42%; } +.console-distribution span:nth-child(9) { height: 25%; } +.console-distribution span:nth-child(10) { height: 12%; } + +.console-distribution span.is-peak { background: var(--cyan); } + +.console-score > p { + margin: 0; + color: var(--dim); + font-size: .53rem; + line-height: 1.45; +} + +.console-trace { + margin: 0; + padding: .1rem 1.2rem 1.2rem; +} + +.console-trace div { + display: grid; + grid-template-columns: 90px minmax(0, 1fr); + gap: .7rem; + padding: .52rem 0; + border-top: 1px solid var(--line); + font-size: .57rem; +} + +.console-trace dt { color: var(--dim); } + +.console-trace dd { + overflow: hidden; + margin: 0; color: var(--muted); - background: transparent; - cursor: pointer; - font-weight: 750; - font-size: .85rem; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.proof-band { + display: grid; + grid-template-columns: 1.45fr repeat(5, 1fr); + overflow: hidden; + margin-bottom: 8rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: rgba(16,25,29,.78); + box-shadow: 0 22px 65px rgba(0,0,0,.18); +} + +.proof-band > * { + min-height: 118px; + padding: 1.25rem; + border-right: 1px solid var(--line); +} + +.proof-band > *:last-child { border-right: 0; } + +.proof-intro { + display: flex; + flex-direction: column; + justify-content: space-between; + background: linear-gradient(140deg, var(--accent-soft), transparent); +} + +.proof-intro span { + color: var(--accent); + font-size: .59rem; + font-weight: 850; + letter-spacing: .14em; +} + +.proof-intro small { + color: var(--muted); + font-size: .61rem; + line-height: 1.4; +} + +.proof-band article { + display: flex; + flex-direction: column; + justify-content: space-between; } + +.proof-band article strong { + font-size: clamp(1.5rem, 2.4vw, 2.35rem); + letter-spacing: -.05em; +} + +.proof-band article span { + color: var(--muted); + font-size: .63rem; +} + +.presentation-section { + padding: 7.5rem 0; + border-top: 1px solid var(--line); +} + +.section-lead { + display: grid; + grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); + align-items: end; + gap: 4rem; + margin-bottom: 3.5rem; +} + +.section-lead > p { + max-width: 480px; + margin-bottom: .25rem; + color: var(--muted); + font-size: .9rem; + line-height: 1.72; +} + +.capability-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-auto-flow: dense; + gap: .8rem; +} + +.capability-card { + display: flex; + min-height: 270px; + flex-direction: column; + padding: 1.35rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: + linear-gradient(145deg, rgba(255,255,255,.025), transparent 55%), + rgba(16,25,29,.84); + transition: transform .18s ease, border-color .18s ease; +} + +.capability-card:hover { + transform: translateY(-3px); + border-color: rgba(185,255,90,.28); +} + +.capability-card-large { + grid-column: span 2; + grid-row: span 2; + min-height: 550px; + justify-content: flex-end; + background: + radial-gradient(circle at 75% 15%, rgba(185,255,90,.13), transparent 19rem), + linear-gradient(145deg, rgba(116,232,255,.05), transparent 55%), + rgba(16,25,29,.9); +} + +.capability-card-wide { + display: grid; + grid-template-columns: 1.25fr .75fr; + align-items: end; + gap: 2rem; + grid-column: 1 / -1; + min-height: 270px; +} + +.capability-card-wide .card-index { grid-column: 1 / -1; } + +.card-index { + display: block; + margin-bottom: auto; + color: var(--accent); + font-size: .58rem; + font-weight: 850; + letter-spacing: .14em; +} + +.card-icon { + display: grid; + place-items: center; + width: 42px; + height: 42px; + margin-bottom: auto; + border: 1px solid rgba(116,232,255,.2); + border-radius: 12px; + color: var(--cyan); + background: var(--cyan-soft); + font-size: 1.25rem; + font-weight: 850; +} + +.capability-card h3 { + max-width: 650px; + margin: 1.2rem 0 .7rem; + font-size: 1.18rem; + line-height: 1.15; +} + +.capability-card-large h3 { + font-size: clamp(2rem, 3.6vw, 3.5rem); + letter-spacing: -.055em; +} + +.capability-card p { + margin-bottom: 0; + color: var(--muted); + font-size: .78rem; + line-height: 1.65; +} + +.capability-card-large p { + max-width: 660px; + font-size: .93rem; +} + +.capability-card > small { + display: block; + margin-top: auto; + padding-top: 1.1rem; + color: var(--dim); + font-size: .61rem; + line-height: 1.45; +} + +.mini-stat-row { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: .5rem; + margin-top: 2rem; +} + +.mini-stat-row span { + padding: .9rem; + border: 1px solid var(--line); + border-radius: 12px; + color: var(--muted); + background: rgba(0,0,0,.13); + font-size: .61rem; +} + +.mini-stat-row b { + display: block; + margin-bottom: .2rem; + color: var(--cyan); + font-size: 1rem; +} + +.authority-meter span { + display: block; + overflow: hidden; + height: 6px; + margin: .75rem 0 .45rem; + border-radius: 999px; + background: var(--surface-soft); +} + +.authority-meter i { + display: block; + height: 100%; + border-radius: inherit; + background: var(--accent); +} + +.authority-meter i.is-enabled { width: 100%; } +.authority-meter i.is-disabled { width: 0; } + +.authority-meter small { + display: block; + color: var(--muted); + font-size: .58rem; +} + +.pipeline-steps { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: .8rem; + margin: 0; + padding: 0; + list-style: none; +} + +.pipeline-steps > li { + display: grid; + grid-template-columns: auto 1fr; + gap: 1rem; + min-height: 330px; + padding: 1.35rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: + radial-gradient(circle at 100% 0, rgba(116,232,255,.055), transparent 14rem), + rgba(16,25,29,.8); +} + +.pipeline-number { + display: grid; + place-items: center; + width: 38px; + height: 38px; + border-radius: 11px; + color: var(--black); + background: var(--accent); + font-size: .65rem; + font-weight: 900; +} + +.pipeline-steps li > div > small { + color: var(--cyan); + font-size: .55rem; + font-weight: 850; + letter-spacing: .14em; +} + +.pipeline-steps h3 { + margin: .65rem 0 .65rem; + font-size: 1.12rem; +} + +.pipeline-steps p { + color: var(--muted); + font-size: .73rem; + line-height: 1.6; +} + +.pipeline-steps ul { + margin: 1rem 0 0; + padding: 0; + color: var(--muted); + font-size: .65rem; + line-height: 1.8; + list-style: none; +} + +.pipeline-steps li li::before { + margin-right: .5rem; + color: var(--accent); + content: "·"; +} + +.architecture-layout { + display: grid; + grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); + gap: .8rem; + margin-top: .8rem; +} + +.architecture-stack, +.model-deep-dive { + padding: 1.5rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: rgba(16,25,29,.82); +} + +.architecture-title { + display: flex; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.35rem; +} + +.architecture-title span { + color: var(--accent); + font-size: .58rem; + font-weight: 850; + letter-spacing: .14em; +} + +.architecture-title strong { font-size: .8rem; } + +.stack-layer { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: .5rem; + padding: .9rem; + border: 1px solid var(--line); + border-radius: 12px; + background: rgba(255,255,255,.025); +} + +.stack-layer small { + min-width: 105px; + color: var(--dim); + font-size: .54rem; + font-weight: 850; + letter-spacing: .11em; +} + +.stack-layer span { + padding: .38rem .55rem; + border-radius: 7px; + color: var(--muted); + background: rgba(255,255,255,.045); + font-size: .6rem; +} + +.stack-interface { border-color: rgba(116,232,255,.16); } +.stack-leagues { border-color: rgba(185,255,90,.18); } +.stack-core { background: rgba(185,255,90,.055); } + +.stack-arrow { + padding: .25rem 0; + color: var(--dim); + text-align: center; + font-size: .75rem; +} + +.model-deep-dive { + display: flex; + flex-direction: column; + background: + radial-gradient(circle at 85% 10%, rgba(185,255,90,.1), transparent 17rem), + rgba(16,25,29,.85); +} + +.model-deep-dive h3 { + margin: 0 0 .8rem; + font-size: clamp(1.8rem, 3vw, 2.8rem); + line-height: 1; + letter-spacing: -.05em; +} + +.model-deep-dive > p:not(.eyebrow) { + color: var(--muted); + font-size: .78rem; + line-height: 1.65; +} + +.model-equation { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: .45rem; + margin: 1rem 0; + padding: 1rem; + border: 1px solid var(--line); + border-radius: 13px; + background: rgba(0,0,0,.16); +} + +.model-equation span { + padding: .4rem .55rem; + border-radius: 7px; + color: var(--cyan); + background: var(--cyan-soft); + font-size: .57rem; +} + +.model-equation b { + color: var(--dim); + font-size: .65rem; +} + +.model-facts { + display: grid; + grid-template-columns: 1fr 1fr; + gap: .5rem; + margin: auto 0 0; +} + +.model-facts div { + padding: .8rem; + border-top: 1px solid var(--line); +} + +.model-facts dt { + margin-bottom: .25rem; + color: var(--ink); + font-size: .63rem; + font-weight: 800; +} + +.model-facts dd { + margin: 0; + color: var(--muted); + font-size: .57rem; + line-height: 1.45; +} + +.provenance-chain { + display: flex; + align-items: center; + justify-content: center; + gap: .7rem; + margin-top: .8rem; + padding: 1.15rem; + overflow-x: auto; + border: 1px solid var(--line); + border-radius: var(--radius); + background: rgba(16,25,29,.72); + white-space: nowrap; +} + +.provenance-chain span { + padding: .5rem .65rem; + border-radius: 8px; + color: var(--muted); + background: rgba(255,255,255,.035); + font-size: .61rem; + font-weight: 750; +} + +.provenance-chain i { + color: var(--accent); + font-size: .7rem; + font-style: normal; +} + +.anatomy-layout { + display: grid; + grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr); + gap: 1rem; +} + +.anatomy-card { + align-self: start; + overflow: hidden; + padding: 1.5rem; + border: 1px solid var(--line-strong); + border-radius: 24px; + background: + radial-gradient(circle at 88% 10%, rgba(116,232,255,.1), transparent 18rem), + linear-gradient(145deg, var(--surface-soft), var(--surface)); + box-shadow: 0 28px 80px rgba(0,0,0,.25); +} + +.anatomy-topline { + display: flex; + justify-content: space-between; + gap: 1rem; + padding-bottom: 1rem; + color: var(--muted); + font-size: .55rem; + font-weight: 850; + letter-spacing: .1em; +} + +.anatomy-topline span:first-child { color: var(--accent); } + +.anatomy-team { + display: grid; + grid-template-columns: minmax(0,1fr) auto auto; + align-items: center; + gap: 1rem; + padding: 1.15rem 0; + border-top: 1px solid var(--line); +} + +.anatomy-team div > * { display: block; } + +.anatomy-team small { + margin-bottom: .3rem; + color: var(--dim); + font-size: .55rem; + font-weight: 850; + letter-spacing: .1em; +} + +.anatomy-team strong { font-size: .98rem; } + +.anatomy-win { + color: var(--muted); + font-size: .72rem; + font-variant-numeric: tabular-nums; +} + +.anatomy-team > b { + min-width: 68px; + text-align: right; + font-size: 2.8rem; + letter-spacing: -.07em; +} + +.anatomy-range { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: .55rem; + margin-top: .75rem; +} + +.anatomy-range div { + padding: .85rem; + border: 1px solid var(--line); + border-radius: 11px; + background: rgba(0,0,0,.12); +} + +.anatomy-range strong, +.anatomy-range small { display: block; } + +.anatomy-range strong { + margin-bottom: .28rem; + font-size: 1.05rem; +} + +.anatomy-range small { + color: var(--muted); + font-size: .55rem; +} + +.anatomy-interval { + margin: 1.35rem 0 1rem; +} + +.anatomy-interval > span { + display: block; + margin-bottom: .6rem; + color: var(--muted); + font-size: .58rem; + font-weight: 750; +} + +.anatomy-interval > div { + position: relative; + height: 7px; + border-radius: 999px; + background: var(--surface-bright); +} + +.anatomy-interval i { + position: absolute; + top: 0; + left: 17%; + width: 64%; + height: 100%; + border-radius: inherit; + background: linear-gradient(90deg, var(--cyan), var(--accent)); +} + +.anatomy-interval b { + position: absolute; + top: 50%; + left: 48%; + width: 12px; + height: 12px; + border: 3px solid var(--surface); + border-radius: 50%; + background: var(--accent); + transform: translate(-50%, -50%); +} + +.anatomy-interval > small { + display: flex; + justify-content: space-between; + margin-top: .45rem; + color: var(--dim); + font-size: .52rem; +} + +.anatomy-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: .8rem; + padding-top: .9rem; + border-top: 1px solid var(--line); + color: var(--dim); + font-size: .53rem; +} + +.anatomy-notes { + display: grid; + grid-template-columns: 1fr 1fr; + gap: .65rem; + margin: 0; + padding: 0; + list-style: none; +} + +.anatomy-notes li { + display: grid; + grid-template-columns: auto 1fr; + gap: .8rem; + min-height: 180px; + padding: 1.1rem; + border: 1px solid var(--line); + border-radius: var(--radius-small); + background: rgba(16,25,29,.76); +} + +.anatomy-notes li > span { + color: var(--accent); + font-size: .59rem; + font-weight: 900; +} + +.anatomy-notes strong { + display: block; + margin-bottom: .5rem; + font-size: .82rem; +} + +.anatomy-notes p { + margin: 0; + color: var(--muted); + font-size: .66rem; + line-height: 1.55; +} + +.league-showcase-grid { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + gap: .75rem; +} + +.league-showcase-grid > article { + display: flex; + grid-column: span 3; + min-height: 330px; + flex-direction: column; + padding: 1.25rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: + linear-gradient(145deg, rgba(116,232,255,.035), transparent 50%), + rgba(16,25,29,.82); + transition: border-color .18s ease, transform .18s ease; +} + +.league-showcase-grid > article:nth-child(n+5) { grid-column: span 4; } + +.league-showcase-grid > article:hover { + transform: translateY(-3px); + border-color: rgba(116,232,255,.28); +} + +.league-card-top { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: .7rem; + margin-bottom: auto; +} + +.league-card-top span { + display: grid; + place-items: center; + width: 30px; + height: 30px; + border-radius: 8px; + color: var(--black); + background: var(--accent); + font-size: .55rem; + font-weight: 900; +} + +.league-card-top b { + font-size: .9rem; + letter-spacing: .04em; +} + +.league-card-top small { + color: var(--dim); + font-size: .5rem; + font-weight: 850; + letter-spacing: .13em; +} + +.league-showcase-grid h3 { + margin: 2rem 0 .7rem; + font-size: 1.25rem; +} + +.league-showcase-grid p { + margin-bottom: 1.6rem; + color: var(--muted); + font-size: .69rem; + line-height: 1.62; +} + +.league-showcase-grid article > div:last-child { + margin-top: auto; + padding-top: .8rem; + border-top: 1px solid var(--line); +} + +.league-showcase-grid article > div:last-child span, +.league-showcase-grid article > div:last-child strong { + display: block; +} + +.league-showcase-grid article > div:last-child span { + margin-bottom: .28rem; + color: var(--dim); + font-size: .54rem; +} + +.league-showcase-grid article > div:last-child strong { + color: var(--cyan); + font-size: .59rem; + font-weight: 750; +} + +.evidence-grid { + display: grid; + grid-template-columns: 1.05fr .95fr; + gap: .8rem; +} + +.quality-panel, +.fidelity-panel { + padding: 1.4rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: rgba(16,25,29,.82); +} + +.quality-numbers { + display: grid; + grid-template-columns: 1fr 1fr; + gap: .6rem; + margin: 1.6rem 0; +} + +.quality-numbers div { + min-height: 145px; + padding: 1rem; + border: 1px solid var(--line); + border-radius: 13px; + background: rgba(255,255,255,.02); +} + +.quality-numbers strong, +.quality-numbers span, +.quality-numbers small { display: block; } + +.quality-numbers strong { + margin-bottom: .55rem; + color: var(--cyan); + font-size: 2rem; + letter-spacing: -.05em; +} + +.quality-numbers span { + font-size: .67rem; + font-weight: 750; +} + +.quality-numbers small { + margin-top: .25rem; + color: var(--dim); + font-size: .56rem; +} + +.quality-line { + display: flex; + justify-content: space-between; + gap: 1rem; + padding: .85rem 0; + border-top: 1px solid var(--line); + font-size: .62rem; +} + +.quality-line span { color: var(--muted); } + +.fidelity-row { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: .9rem; + padding: 1rem 0; + border-top: 1px solid var(--line); +} + +.fidelity-panel > .card-index { + margin-bottom: 1.2rem; +} + +.fidelity-row > b { + display: grid; + place-items: center; + width: 42px; + height: 42px; + border-radius: 12px; + color: var(--muted); + background: var(--surface-soft); + font-size: .72rem; +} + +.fidelity-row.is-ready > b { + color: var(--black); + background: var(--accent); +} + +.fidelity-row div > * { display: block; } + +.fidelity-row strong { + margin-bottom: .25rem; + font-size: .72rem; +} + +.fidelity-row span { + color: var(--muted); + font-size: .58rem; + line-height: 1.4; +} + +.fidelity-row > small { + color: var(--orange); + font-size: .52rem; + font-weight: 850; + letter-spacing: .09em; +} + +.fidelity-row.is-ready > small { color: var(--accent); } + +.replay-story { + display: grid; + grid-template-columns: minmax(300px, .45fr) minmax(0, .55fr); + align-items: center; + gap: 3rem; + margin-top: .8rem; + padding: 2rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: + radial-gradient(circle at 85% 50%, rgba(185,255,90,.08), transparent 25rem), + rgba(16,25,29,.78); +} + +.replay-story h3 { + margin: 0 0 .8rem; + font-size: clamp(1.8rem, 3vw, 2.7rem); + line-height: 1; + letter-spacing: -.05em; +} + +.replay-story > div:first-child > p:last-child { + margin: 0; + color: var(--muted); + font-size: .75rem; + line-height: 1.65; +} + +.replay-chain { + display: flex; + align-items: center; + justify-content: center; + gap: .4rem; +} + +.replay-chain span { + display: flex; + min-height: 104px; + flex: 1; + flex-direction: column; + justify-content: space-between; + padding: .8rem; + border: 1px solid var(--line); + border-radius: 12px; + color: var(--muted); + background: rgba(0,0,0,.13); + font-size: .57rem; + line-height: 1.4; +} + +.replay-chain b { + color: var(--accent); + font-size: .55rem; +} + +.replay-chain i { + color: var(--dim); + font-size: .6rem; + font-style: normal; +} + +.workflow-steps { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: .6rem; +} + +.workflow-steps article { + min-height: 225px; + padding: 1.1rem; + border: 1px solid var(--line); + border-radius: var(--radius-small); + background: rgba(16,25,29,.78); +} + +.workflow-steps span { + display: block; + margin-bottom: 3rem; + color: var(--accent); + font-size: .6rem; + font-weight: 900; +} + +.workflow-steps strong { + display: block; + margin-bottom: .55rem; + font-size: .77rem; +} + +.workflow-steps p { + margin: 0; + color: var(--muted); + font-size: .62rem; + line-height: 1.55; +} + +.api-presentation { + display: grid; + grid-template-columns: .78fr 1.22fr; + gap: 2.5rem; + margin-top: .8rem; + padding: 2rem; + border: 1px solid var(--line); + border-radius: var(--radius); + background: + radial-gradient(circle at 10% 20%, rgba(116,232,255,.08), transparent 22rem), + rgba(16,25,29,.82); +} + +.api-copy h3 { + margin: 0 0 .75rem; + font-size: clamp(1.8rem, 3vw, 2.7rem); + line-height: 1; + letter-spacing: -.05em; +} + +.api-copy > p:not(.eyebrow) { + color: var(--muted); + font-size: .75rem; + line-height: 1.65; +} + +.api-copy .button { margin-top: .7rem; } + +.endpoint-list { + overflow: hidden; + border: 1px solid var(--line); + border-radius: 14px; + background: rgba(0,0,0,.14); +} + +.endpoint-list div { + display: grid; + grid-template-columns: 54px minmax(0,1fr) minmax(120px,.8fr); + align-items: center; + gap: .75rem; + padding: .9rem; + border-bottom: 1px solid var(--line); +} + +.endpoint-list div:last-child { border-bottom: 0; } + +.endpoint-list span { + color: var(--accent); + font-size: .54rem; + font-weight: 900; +} + +.endpoint-list code { + overflow: hidden; + color: var(--ink); + font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; + font-size: .62rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.endpoint-list small { + color: var(--muted); + font-size: .56rem; + text-align: right; +} + +.live-engine-section { + padding: 7.5rem 0 2rem; + border-top: 1px solid var(--line); +} + +.live-engine-header { + display: grid; + grid-template-columns: 1fr auto; + align-items: end; + gap: 2rem; + margin-bottom: 3rem; +} + +.live-summary { + display: grid; + grid-template-columns: repeat(3, minmax(110px, 1fr)); + overflow: hidden; + border: 1px solid var(--line); + border-radius: var(--radius-small); + background: rgba(16,25,29,.8); +} + +.live-summary article { + padding: 1rem; + border-right: 1px solid var(--line); +} + +.live-summary article:last-child { border-right: 0; } + +.live-summary span, +.live-summary small { display: block; } + +.live-summary span { + margin-bottom: .6rem; + font-size: 1.7rem; + font-weight: 850; + letter-spacing: -.05em; +} + +.live-summary small { + color: var(--muted); + font-size: .57rem; +} + +.mode-tabs { + display: flex; + align-items: center; + gap: .2rem; + border-bottom: 1px solid var(--line); +} + +.mode-tab { + position: relative; + padding: 1rem .9rem; + border: 0; + color: var(--muted); + background: transparent; + cursor: pointer; + font-size: .82rem; + font-weight: 750; +} + .mode-tab::after { position: absolute; - left: .9rem; right: .9rem; bottom: -1px; + left: .9rem; height: 2px; content: ""; background: transparent; } + .mode-tab.is-active { color: var(--ink); } .mode-tab.is-active::after { background: var(--accent); } + .api-link { margin-left: auto; color: var(--muted); - font-size: .78rem; + font-size: .73rem; text-decoration: none; } + .api-link:hover { color: var(--ink); } .view-panel { padding: 3rem 0 5rem; } + .section-heading { display: flex; align-items: end; @@ -315,12 +1621,14 @@ h1 span { color: var(--cyan); } gap: 1rem; margin-bottom: 1.8rem; } -h2 { - margin-bottom: 0; - font-size: clamp(1.9rem, 3.4vw, 3rem); - letter-spacing: -.045em; + +.section-heading h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); } + +.updated-text { + margin-bottom: .2rem; + color: var(--muted); + font-size: .72rem; } -.updated-text { margin-bottom: .2rem; color: var(--muted); font-size: .78rem; } .league-strip { display: flex; @@ -329,6 +1637,7 @@ h2 { padding-bottom: .8rem; scrollbar-width: thin; } + .league-chip { display: flex; align-items: center; @@ -340,9 +1649,10 @@ h2 { color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; - font-size: .76rem; + font-size: .72rem; font-weight: 700; } + .league-chip b { display: grid; place-items: center; @@ -352,16 +1662,23 @@ h2 { border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.07); - font-size: .66rem; + font-size: .62rem; } -.league-chip:hover, .league-chip.is-active { + +.league-chip:hover, +.league-chip.is-active { border-color: rgba(185,255,90,.42); color: var(--ink); background: var(--accent-soft); } -.league-chip.is-active b { color: #10180f; background: var(--accent); } -.loading-state, .empty-state { +.league-chip.is-active b { + color: #10180f; + background: var(--accent); +} + +.loading-state, +.empty-state { display: flex; align-items: center; justify-content: center; @@ -369,6 +1686,7 @@ h2 { min-height: 270px; color: var(--muted); } + .loader { width: 18px; height: 18px; @@ -377,30 +1695,54 @@ h2 { border-radius: 50%; animation: spin .8s linear infinite; } + @keyframes spin { to { transform: rotate(360deg); } } -.empty-state { flex-direction: column; text-align: center; } + +.empty-state { + flex-direction: column; + text-align: center; +} + .empty-state h3 { margin-bottom: .3rem; } -.empty-state p { max-width: 460px; color: var(--muted); line-height: 1.5; } -.empty-icon { color: var(--accent); font-size: 2.5rem; } + +.empty-state p { + max-width: 460px; + color: var(--muted); + line-height: 1.5; +} + +.empty-icon { + color: var(--accent); + font-size: 2.5rem; +} .day-group { margin-top: 2rem; } + .day-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; color: var(--muted); - font-size: .68rem; + font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } -.day-heading::after { flex: 1; height: 1px; content: ""; background: var(--line); } + +.day-heading::after { + flex: 1; + height: 1px; + content: ""; + background: var(--line); +} + .game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } + .game-card { position: relative; overflow: hidden; @@ -408,21 +1750,28 @@ h2 { padding: 1rem; border: 1px solid var(--line); border-radius: 15px; - background: linear-gradient(145deg, rgba(29,42,48,.85), rgba(17,25,29,.92)); + background: linear-gradient(145deg, rgba(28,42,48,.85), rgba(16,25,29,.92)); transition: transform .16s ease, border-color .16s ease; } -.game-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); } + +.game-card:hover { + transform: translateY(-2px); + border-color: rgba(255,255,255,.2); +} + .card-topline { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); - font-size: .67rem; + font-size: .63rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } + .league-tag { color: var(--accent); } + .team-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; @@ -431,58 +1780,147 @@ h2 { padding: .8rem 0; border-bottom: 1px solid var(--line); } + .team-row:first-of-type { margin-top: .55rem; } + .team-name { min-width: 0; } -.team-name strong, .team-name small { display: block; } -.team-name strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; } -.team-name small { margin-top: .2rem; color: var(--dim); font-size: .62rem; text-transform: uppercase; } + +.team-name strong, +.team-name small { display: block; } + +.team-name strong { + overflow: hidden; + font-size: .84rem; + text-overflow: ellipsis; + white-space: nowrap; +} + +.team-name small { + margin-top: .2rem; + color: var(--dim); + font-size: .59rem; + text-transform: uppercase; +} + .winner-check { color: var(--accent); font-size: .88em; font-weight: 950; text-shadow: 0 0 14px rgba(185, 255, 90, .35); } -.team-win { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; } -.team-score { min-width: 2.5rem; text-align: right; font-size: 1.65rem; font-weight: 850; letter-spacing: -.05em; } + +.team-win { + color: var(--muted); + font-size: .69rem; + font-variant-numeric: tabular-nums; +} + +.team-score { + min-width: 2.5rem; + text-align: right; + font-size: 1.65rem; + font-weight: 850; + letter-spacing: -.05em; +} + .projection-meta { display: flex; justify-content: space-between; gap: .7rem; padding-top: .9rem; color: var(--muted); - font-size: .64rem; + font-size: .61rem; } + .coverage-badge { - padding: .18rem .45rem; + padding: .2rem .48rem; border-radius: 999px; color: var(--cyan); background: rgba(116,232,255,.08); white-space: nowrap; } -.coverage-badge.is-low { color: #ffc06b; background: rgba(255,192,107,.08); } + +.coverage-badge.is-low { + color: var(--orange); + background: rgba(255,192,107,.08); +} + .final-label { color: var(--accent); } +.lab-primer { + display: flex; + align-items: center; + justify-content: center; + gap: .65rem; + margin-bottom: 1rem; + padding: .9rem; + border: 1px solid var(--line); + border-radius: 13px; + color: var(--muted); + background: rgba(16,25,29,.72); + font-size: .61rem; +} + +.lab-primer span { + display: inline-flex; + align-items: center; + gap: .4rem; +} + +.lab-primer b { color: var(--accent); } + +.lab-primer i { + color: var(--dim); + font-style: normal; +} + .lab-layout { display: grid; - grid-template-columns: minmax(380px, .8fr) minmax(0, 1.2fr); + grid-template-columns: minmax(390px, .8fr) minmax(0, 1.2fr); gap: 1rem; } -.simulator-form, .lab-result { - min-height: 470px; - padding: 1.35rem; + +.simulator-form, +.lab-result { + min-height: 520px; + padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); - background: rgba(17,25,29,.78); + background: rgba(16,25,29,.8); +} + +.form-intro { + display: flex; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.3rem; + padding-bottom: .9rem; + border-bottom: 1px solid var(--line); +} + +.form-intro span { + color: var(--accent); + font-size: .56rem; + font-weight: 850; + letter-spacing: .12em; +} + +.form-intro small { + color: var(--dim); + font-size: .54rem; } + .field label { display: block; margin: 0 0 .42rem; color: var(--muted); - font-size: .69rem; + font-size: .66rem; font-weight: 750; letter-spacing: .04em; } -select, input { + +select, +input { width: 100%; min-height: 47px; padding: .7rem .8rem; @@ -492,7 +1930,13 @@ select, input { color: var(--ink); background: var(--surface-soft); } -select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } + +select:focus, +input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-soft); +} + .matchup-fields { display: grid; grid-template-columns: 1fr auto 1fr; @@ -500,21 +1944,24 @@ select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px v gap: .6rem; margin: 1rem 0; } + .versus-mark { display: grid; place-items: center; width: 38px; height: 47px; color: var(--dim); - font-size: .66rem; + font-size: .63rem; font-weight: 900; } + .sim-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; } + .toggle { display: flex; align-items: center; @@ -522,17 +1969,25 @@ select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px v grid-column: 1 / -1; color: var(--muted); cursor: pointer; - font-size: .75rem; + font-size: .72rem; +} + +.toggle input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; } -.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } + .toggle span { position: relative; width: 38px; height: 22px; + border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); - border: 1px solid var(--line); } + .toggle span::after { position: absolute; top: 3px; @@ -544,16 +1999,62 @@ select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px v background: var(--muted); transition: transform .15s ease, background .15s ease; } -.toggle input:checked + span::after { transform: translateX(16px); background: var(--accent); } -.simulator-form .button-primary { width: 100%; margin-top: .2rem; } -.form-note { margin: 1rem 0 0; color: var(--dim); font-size: .68rem; line-height: 1.5; } -.lab-result { display: grid; place-items: center; } -.lab-placeholder { max-width: 390px; color: var(--muted); text-align: center; } -.lab-placeholder > span { color: var(--accent); font-size: 3rem; } -.lab-placeholder h3 { margin: .8rem 0 .4rem; color: var(--ink); } + +.toggle input:checked + span::after { + transform: translateX(16px); + background: var(--accent); +} + +.simulator-form .button-primary { + width: 100%; + margin-top: .2rem; +} + +.form-note { + margin: 1rem 0 0; + color: var(--dim); + font-size: .64rem; + line-height: 1.5; +} + +.lab-result { + display: grid; + place-items: center; +} + +.lab-placeholder { + max-width: 430px; + color: var(--muted); + text-align: center; +} + +.lab-placeholder > span { + color: var(--accent); + font-size: 3rem; +} + +.lab-placeholder h3 { + margin: .8rem 0 .4rem; + color: var(--ink); +} + .lab-placeholder p { line-height: 1.55; } -.result-shell { width: 100%; align-self: stretch; display: flex; flex-direction: column; } -.result-kicker { color: var(--accent); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } + +.result-shell { + display: flex; + width: 100%; + align-self: stretch; + flex-direction: column; +} + +.result-kicker { + color: var(--accent); + font-size: .62rem; + font-weight: 800; + letter-spacing: .13em; + text-transform: uppercase; +} + .result-matchup { display: grid; grid-template-columns: 1fr auto 1fr; @@ -562,12 +2063,38 @@ select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px v margin: 1rem 0 1.4rem; text-align: center; } -.result-team strong, .result-team span, .result-team small { display: block; } -.result-team strong { font-size: 2.8rem; letter-spacing: -.06em; } -.result-team span { margin-top: .3rem; font-weight: 750; } -.result-team .winner-check { display: inline; margin: 0 0 0 .2rem; } -.result-team small { margin-top: .25rem; color: var(--muted); font-size: .68rem; } -.result-vs { color: var(--dim); font-size: .72rem; font-weight: 800; } + +.result-team strong, +.result-team span, +.result-team small { display: block; } + +.result-team strong { + font-size: 2.8rem; + letter-spacing: -.06em; +} + +.result-team span { + margin-top: .3rem; + font-weight: 750; +} + +.result-team .winner-check { + display: inline; + margin: 0 0 0 .2rem; +} + +.result-team small { + margin-top: .25rem; + color: var(--muted); + font-size: .65rem; +} + +.result-vs { + color: var(--dim); + font-size: .69rem; + font-weight: 800; +} + .probability-bar { display: flex; height: 10px; @@ -575,76 +2102,309 @@ select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px v border-radius: 999px; background: var(--surface-soft); } + .probability-home { background: var(--accent); } .probability-away { background: var(--cyan); } + .probability-legend { display: flex; justify-content: space-between; margin-top: .55rem; color: var(--muted); - font-size: .68rem; + font-size: .65rem; } + .result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1.3rem; } + .result-stats div { padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); } -.result-stats strong, .result-stats small { display: block; } -.result-stats strong { margin-bottom: .25rem; font-size: 1rem; } -.result-stats small { color: var(--muted); font-size: .61rem; } + +.result-stats strong, +.result-stats small { display: block; } + +.result-stats strong { + margin-bottom: .25rem; + font-size: 1rem; +} + +.result-stats small { + color: var(--muted); + font-size: .58rem; +} + .result-evidence { margin: auto 0 0; padding-top: 1rem; color: var(--dim); - font-size: .64rem; + font-size: .61rem; line-height: 1.45; } +.faq-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: .65rem; +} + +.faq-grid details { + align-self: start; + overflow: hidden; + border: 1px solid var(--line); + border-radius: var(--radius-small); + background: rgba(16,25,29,.78); +} + +.faq-grid summary { + position: relative; + padding: 1.1rem 3rem 1.1rem 1.1rem; + cursor: pointer; + font-size: .76rem; + font-weight: 800; + list-style: none; +} + +.faq-grid summary::-webkit-details-marker { display: none; } + +.faq-grid summary::after { + position: absolute; + top: 50%; + right: 1.1rem; + color: var(--accent); + content: "+"; + font-size: 1.1rem; + transform: translateY(-50%); +} + +.faq-grid details[open] summary::after { content: "−"; } + +.faq-grid details p { + margin: 0; + padding: 0 1.1rem 1.1rem; + color: var(--muted); + font-size: .67rem; + line-height: 1.6; +} + footer { - display: flex; - justify-content: space-between; - gap: 1rem; - width: min(1220px, calc(100% - 2.5rem)); + display: grid; + grid-template-columns: auto 1fr minmax(280px, .75fr) auto; + align-items: center; + gap: 2rem; + width: var(--page); margin: 0 auto; - padding: 1.5rem 0 2.3rem; + padding: 2rem 0 2.8rem; border-top: 1px solid var(--line); color: var(--dim); - font-size: .68rem; + font-size: .61rem; +} + +.footer-brand { + display: flex; + align-items: center; + gap: .7rem; +} + +.footer-brand .brand-mark { + width: 36px; + height: 36px; + border-radius: 10px; + font-size: 1rem; +} + +.footer-brand strong, +.footer-brand small { display: block; } + +.footer-brand strong { + margin-bottom: .17rem; + color: var(--ink); + font-size: .8rem; +} + +.footer-brand small { font-size: .53rem; } + +.footer-links { + display: flex; + gap: 1rem; +} + +.footer-links a { + color: var(--muted); + text-decoration: none; +} + +footer p { + margin: 0; + line-height: 1.5; +} + +footer > span { + font-weight: 800; + letter-spacing: .08em; + white-space: nowrap; } -footer p { margin: 0; } -footer a { color: var(--muted); } [hidden] { display: none !important; } -@media (max-width: 960px) { - .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 4rem; } - .hero-metrics { max-width: 620px; } - .showcase-heading { grid-template-columns: 1fr; } - .engine-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .engine-flow i { display: none; } - .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +@media (max-width: 1160px) { + .topnav { display: none; } + .topbar { grid-template-columns: 1fr auto; } + .launch-hero { + grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); + gap: 2.5rem; + } + .proof-band { grid-template-columns: repeat(3, 1fr); } + .proof-band > *:nth-child(3) { border-right: 0; } + .proof-band > *:nth-child(-n+3) { border-bottom: 1px solid var(--line); } + .capability-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } + .capability-card-large { grid-row: auto; min-height: 480px; } + .pipeline-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } + .league-showcase-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } + .league-showcase-grid > article, + .league-showcase-grid > article:nth-child(n+5) { grid-column: span 1; } + .workflow-steps { grid-template-columns: repeat(3, minmax(0,1fr)); } + footer { grid-template-columns: auto 1fr auto; } + footer p { grid-column: 1 / -1; grid-row: 2; } +} + +@media (max-width: 900px) { + :root { --page: min(100% - 2rem, 1280px); } + .launch-hero { + grid-template-columns: 1fr; + min-height: auto; + padding: 5rem 0 4rem; + } + .hero-console { max-width: 620px; } + .section-lead { grid-template-columns: 1fr; gap: 1.5rem; } + .section-lead > p { max-width: 650px; } + .architecture-layout, + .anatomy-layout, + .evidence-grid, + .replay-story, + .api-presentation { grid-template-columns: 1fr; } + .model-deep-dive { min-height: 500px; } + .league-showcase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } + .replay-chain { flex-wrap: wrap; } + .replay-chain span { min-width: 120px; } + .replay-chain i { display: none; } + .live-engine-header { grid-template-columns: 1fr; } + .live-summary { max-width: 540px; } + .game-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .lab-layout { grid-template-columns: 1fr; } + .lab-primer { justify-content: flex-start; overflow-x: auto; white-space: nowrap; } } -@media (max-width: 640px) { - .topbar { min-height: 66px; } - .health-pill { display: none; } - .button-quiet { padding: .6rem .7rem; } - main, footer { width: min(100% - 1.5rem, 1220px); } - .hero { padding: 3.2rem 0 2.5rem; gap: 2rem; } - h1 { font-size: clamp(3rem, 15vw, 4.6rem); } - .hero-metrics article { min-height: 95px; padding: 1rem .7rem; } - .hero-metrics small { font-size: .6rem; } - .showcase { margin-bottom: 2.8rem; padding: 1rem; border-radius: 18px; } - .engine-flow, .proof-grid { grid-template-columns: 1fr; } - .engine-flow article { min-height: auto; } +@media (max-width: 680px) { + :root { --page: min(100% - 1.25rem, 1280px); } + html { scroll-padding-top: 74px; } + .topbar { + min-height: 66px; + padding: .65rem .7rem; + } + .brand small, + .health-pill, + .topbar-docs { display: none; } + .brand-mark { + width: 38px; + height: 38px; + } + .topbar-actions .button { min-height: 38px; padding: .6rem .72rem; } + h1 { font-size: clamp(3rem, 15vw, 5rem); } + h2 { font-size: clamp(2.3rem, 11vw, 3.5rem); } + .launch-hero { padding: 3.6rem 0 3rem; gap: 2.4rem; } + .hero-actions { flex-direction: column; } + .hero-actions .button { width: 100%; } + .trust-rail { display: grid; grid-template-columns: 1fr 1fr; } + .hero-console { border-radius: 18px; } + .console-header > span { display: none; } + .console-team b { font-size: 2rem; } + .console-trace div { grid-template-columns: 76px minmax(0,1fr); } + .proof-band { + grid-template-columns: 1fr 1fr; + margin-bottom: 5rem; + } + .proof-band > * { + min-height: 105px; + border-right: 1px solid var(--line) !important; + border-bottom: 1px solid var(--line); + } + .proof-band > *:nth-child(even) { border-right: 0 !important; } + .proof-band > *:nth-last-child(-n+2) { border-bottom: 0; } + .presentation-section, + .live-engine-section { padding: 5rem 0; } + .section-lead { margin-bottom: 2.3rem; } + .capability-grid, + .pipeline-steps, + .league-showcase-grid, + .workflow-steps, + .faq-grid { grid-template-columns: 1fr; } + .capability-card-large, + .capability-card-wide { grid-column: auto; min-height: auto; } + .league-showcase-grid > article, + .league-showcase-grid > article:nth-child(n+5) { grid-column: auto; } + .capability-card-large { padding-top: 8rem; } + .capability-card-wide { display: flex; align-items: stretch; } + .mini-stat-row { grid-template-columns: 1fr 1fr; } + .pipeline-steps li { min-height: auto; } + .architecture-stack, + .model-deep-dive, + .anatomy-card, + .quality-panel, + .fidelity-panel { padding: 1rem; } + .architecture-title { flex-direction: column; } + .stack-layer small { width: 100%; min-width: 0; } + .model-deep-dive { min-height: auto; } + .model-facts { grid-template-columns: 1fr; } + .provenance-chain { justify-content: flex-start; } + .anatomy-notes { grid-template-columns: 1fr; } + .anatomy-team { gap: .55rem; } + .anatomy-team > b { min-width: 58px; font-size: 2.2rem; } + .anatomy-range { grid-template-columns: 1fr; } + .anatomy-footer { align-items: flex-start; flex-direction: column; } + .quality-numbers { grid-template-columns: 1fr 1fr; } + .quality-line { align-items: flex-start; flex-direction: column; gap: .3rem; } + .fidelity-row { grid-template-columns: auto 1fr; } + .fidelity-row > small { grid-column: 2; } + .replay-story { padding: 1.2rem; } + .replay-chain { display: grid; grid-template-columns: 1fr 1fr; } + .replay-chain span { min-height: 90px; } + .endpoint-list div { + grid-template-columns: 46px minmax(0,1fr); + } + .endpoint-list small { + grid-column: 2; + text-align: left; + } + .live-summary { grid-template-columns: repeat(3, 1fr); } + .live-summary article { padding: .8rem .65rem; } + .live-summary span { font-size: 1.4rem; } + .mode-tabs { + display: grid; + grid-template-columns: 1fr 1fr auto; + overflow: visible; + } + .mode-tab { + padding-right: .5rem; + padding-left: .5rem; + white-space: nowrap; + } + .mode-tab::after { + right: .5rem; + left: .5rem; + } + .api-link { + margin-left: 0; + padding-left: .4rem; + white-space: nowrap; + } .section-heading { align-items: start; flex-direction: column; } .game-grid { grid-template-columns: 1fr; } .matchup-fields { grid-template-columns: 1fr; } @@ -652,9 +2412,41 @@ footer a { color: var(--muted); } .result-matchup { gap: .5rem; } .result-team strong { font-size: 2.15rem; } .result-stats { grid-template-columns: 1fr; } - footer { flex-direction: column; } + .form-intro { flex-direction: column; } + .lab-primer { + display: grid; + grid-template-columns: 1fr 1fr; + overflow: visible; + gap: .75rem; + white-space: normal; + } + .lab-primer i { display: none; } + footer { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; } + footer p { grid-column: 1; grid-row: auto; } + .footer-links { flex-wrap: wrap; } +} + +@media (max-width: 420px) { + .proof-band { grid-template-columns: 1fr; } + .proof-band > * { + border-right: 0 !important; + border-bottom: 1px solid var(--line) !important; + } + .proof-band > *:last-child { border-bottom: 0 !important; } + .trust-rail, + .quality-numbers, + .replay-chain { grid-template-columns: 1fr; } + .console-label { align-items: flex-start; flex-direction: column; } + .console-team { grid-template-columns: minmax(0,1fr) auto; } + .anatomy-topline { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { - *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; } + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: .001ms !important; + transition-duration: .001ms !important; + } } diff --git a/tests/test_projection_service_web.py b/tests/test_projection_service_web.py index 5eb9149..db2d001 100644 --- a/tests/test_projection_service_web.py +++ b/tests/test_projection_service_web.py @@ -133,6 +133,13 @@ async def exercise_api() -> None: dashboard = await client.get("/") assert dashboard.status_code == 200 assert "Every league" in dashboard.text + assert "From raw game history to a replayable decision surface." in dashboard.text + assert "Anatomy of a projection" in dashboard.text + assert "Stop reading. Run Waterboy." in dashboard.text + assert 'id="leagues"' in dashboard.text + assert 'id="evidence"' in dashboard.text + assert 'id="live-engine"' in dashboard.text + assert "style=" not in dashboard.text assert dashboard.headers["x-frame-options"] == "DENY" assert "default-src 'self'" in dashboard.headers["content-security-policy"]