understanding-prime-env 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/skills/understand-prime-env/SKILL.md +181 -219
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "understanding-prime-env",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "Generate a rich, self-contained HTML report explaining any Prime Intellect verifiers environment.",
5
5
  "keywords": [
6
6
  "prime-intellect",
package/skills/understand-prime-env/SKILL.md CHANGED
@@ -7,322 +7,284 @@ description: Generate a rich, self-contained HTML report that fully explains a P
7
7
 
8
8
  ## Goal
9
9
 
10
- Produce a single self-contained HTML file (`environment_overview.html`) that gives a researcher — someone who already knows RL and verifiers but has never seen *this* environment — a complete deep understanding in one page. The output should make them stop and say "whoa."
11
-
12
- The page has **4 cards**, rendered in a dark gamified UI. Each card is a deep-dive, not a summary.
10
+ Produce a single self-contained HTML file (`environment_overview.html`). A researcher opens it and sees a **stack of 4 cards** — like a physical deck — each one peeking out behind the one in front. They click through the deck, one card at a time, in a satisfying progressive reveal. Each card is one chapter of the story. The whole experience should feel like flipping through a beautifully designed research brief.
13
11
 
14
12
  ---
15
13
 
16
14
  ## Step 1 — Read the source
17
15
 
18
- Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if they exist. Do not skip helper files — reward logic is often split across modules (e.g. `*_checks.py`, `*_prompts.py`). Read all of them before writing a single line of HTML.
16
+ Read **every `.py` file** in the current directory. Also read `pyproject.toml` and `README.md` if they exist. Do not skip helper files — reward logic is often split across modules (e.g. `*_checks.py`, `*_prompts.py`). Read everything before writing a single line of HTML.
19
17
 
20
18
  Extract exactly four things:
21
19
 
22
- ### A. Environment identity
23
- - The environment's name, one-paragraph description of what task it trains a model to do
24
- - The GitHub repo URL if present in any source file or README (e.g. `https://github.com/PrimeIntellect-ai/verifiers`)
25
- - 3–5 quick stats: e.g. dataset size, number of reward functions, number of turns, task type
26
-
27
- ### B. Raw dataset — the input data itself
28
- - Where does the data come from? (HuggingFace dataset name + split, a hardcoded `PROMPTS` list, a generator function, etc.)
29
- - What fields does a single row have? List every field name and its type/purpose
30
- - Show **one complete real example row** — every field, real values, not truncated. If real data is not available locally, synthesize one example that is indistinguishable from a real row (match field names, value formats, constraints exactly)
31
-
32
- ### C. Reward functions — the actual logic
33
- For each reward function (`@vf.reward`, functions passed to `Rubric`, reward methods on `Taskset`):
34
- - Its name
35
- - What it is actually checking — not a summary, the real logic: what string patterns, what conditions, what regex, what comparisons
36
- - Exactly what makes it return **0** (failure) vs **1** (full score) — and any partial scores in between
37
- - Any thresholds, edge cases, or gotchas a model writer would need to know
38
- - If a judge LLM is used: the model name, what the judge prompt asks, and what it returns
39
-
40
- If multiple rewards combine into a final score, extract the exact formula.
41
-
42
- ### D. Theoretical rollout — what would happen
43
- Write a step-by-step narrative trace of what would happen if you ran one example end-to-end through this environment:
44
- 1. How the raw dataset row gets transformed into the actual prompt the model sees (system prompt + user message, any templating)
45
- 2. What the model is expected to produce (format, length, structure)
46
- 3. If there are tools or a sandbox: what tools, how they'd be called
47
- 4. How each reward function gets called on the model output — in what order, with what inputs
48
- 5. How the final score is computed from the individual reward outputs
49
- 6. What a **perfect response** looks like vs a **zero-score response**
50
-
51
- Be specific. Trace through the actual code logic. This is theoretical (not executed) but must be grounded in what the code actually does.
20
+ ### Card 1 — Environment
21
+ - Name, and one punchy paragraph (3–4 sentences) describing what task this trains a model to do
22
+ - GitHub URL if found anywhere in source or README — if not found, omit entirely
23
+ - 3–5 stat chips: dataset size, reward count, turn count, task type, etc.
24
+
25
+ ### Card 2 — Dataset
26
+ - Where the data comes from: HuggingFace dataset name + split, hardcoded list, generator, etc. — one line
27
+ - Every field in a data row: name, type, purpose
28
+ - One complete example row with every field shown in full — real values if available, otherwise synthesize one that is indistinguishable from real (exact field names, value formats, constraints)
29
+
30
+ ### Card 3 — Rewards
31
+ - Every reward function: name, exactly what it checks, precisely what makes it score 0 vs 1 (and any partial values)
32
+ - Any thresholds, regex patterns, or edge cases a model writer needs to know
33
+ - If rewards combine into a final score: the exact formula
34
+
35
+ ### Card 4 — Rollout
36
+ - Step-by-step theoretical trace of one example running end-to-end:
37
+ 1. How the raw row becomes the prompt the model sees
38
+ 2. What the model is expected to produce
39
+ 3. How each reward fires on the output
40
+ 4. How the final score is computed
41
+ 5. What a perfect response looks like vs a zero-score response
52
42
 
53
43
  ---
54
44
 
55
45
  ## Step 2 — Generate the HTML
56
46
 
57
- Write a single **self-contained** HTML file to `./environment_overview.html`. No external CDN dependencies — all CSS, JS, and assets inline.
47
+ Write a single **self-contained** HTML file to `./environment_overview.html`. Zero external dependencies — all CSS and JS inline.
58
48
 
59
49
  ---
60
50
 
61
- ### Visual Direction: Dark Gamified Research Dashboard
51
+ ### The Core Mechanic — Card Stack Reveal
62
52
 
63
- The aesthetic is a **dark, glowing, gamified dashboard** — like a game HUD for researchers. Think deep space + neon. Each card has its own accent color and glows on hover. The reader should feel like they're exploring a world, not reading a doc.
53
+ The entire UI is a **centered card deck**. All four cards occupy the same position. The active card is front and center at full size. Cards behind it peek out — each one slightly smaller, slightly lower, slightly darker — giving the illusion of a physical stack.
64
54
 
65
- **Color palette:**
66
55
  ```
67
- Page background: #080b14 (near-black, blue-tinted)
68
- Card background: #0e1420 (dark navy)
69
- Card border: 1.5px gradient border (unique per card)
70
-
71
- Card 1 accent — purple: #a855f7 glow: rgba(168,85,247,0.25)
72
- Card 2 accent — cyan: #22d3ee glow: rgba(34,211,238,0.25)
73
- Card 3 accent — amber: #f59e0b glow: rgba(245,158,11,0.25)
74
- Card 4 accent — rose: #f43f5e glow: rgba(244,63,94,0.25)
75
-
76
- Text primary: #f1f5f9
77
- Text secondary: #94a3b8
78
- Text muted: #475569
79
- Code text: #e2e8f0
56
+ ░░░░░░░░░░░░░░░░ ← Card 4 (furthest back, barely visible)
57
+ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ← Card 3
58
+ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ← Card 2
59
+ ██████████████████████████ ← Card 1 (active, full size, full opacity)
80
60
  ```
81
61
 
82
- **Gradient borders** — each card has a glowing gradient border using this trick:
62
+ Clicking anywhere on the active card — or the "Continue →" button — triggers the reveal: the active card flies out (slides left + slight rotation + fade), and the next card scales up to the front with a spring animation. A progress indicator shows position (● ● ○ ○).
63
+
64
+ When card 4 is shown, "Continue →" becomes "Done ✓" and clicking it does nothing (or fades the stack out gracefully).
65
+
66
+ ---
67
+
68
+ ### Visual Design
69
+
70
+ **Background:** Full-viewport dark canvas.
83
71
  ```css
84
- .card {
85
- position: relative;
86
- background: #0e1420;
87
- border-radius: 16px;
88
- }
89
- .card::before {
90
- content: '';
91
- position: absolute;
92
- inset: -1.5px;
93
- border-radius: 17px;
94
- background: linear-gradient(135deg, var(--card-accent), transparent 60%);
95
- z-index: -1;
72
+ body {
73
+ background: #07090f;
74
+ background-image:
75
+ radial-gradient(ellipse at 20% 20%, rgba(168,85,247,0.06) 0%, transparent 50%),
76
+ radial-gradient(ellipse at 80% 80%, rgba(34,211,238,0.04) 0%, transparent 50%);
77
+ min-height: 100vh;
78
+ display: flex;
79
+ flex-direction: column;
80
+ align-items: center;
81
+ justify-content: center;
96
82
  }
97
83
  ```
98
84
 
99
- On hover: `box-shadow: 0 0 40px var(--card-glow), 0 0 80px rgba(var(--card-glow), 0.3)` + `transform: translateY(-4px)`. Transition: `0.3s cubic-bezier(0.34, 1.56, 0.64, 1)` (slight spring).
100
-
101
- **Typography:**
85
+ **Card base:**
102
86
  ```css
103
- font-family: 'SF Pro Display', -apple-system, 'Helvetica Neue', sans-serif; /* body */
104
- font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* code */
87
+ .card {
88
+ position: absolute;
89
+ width: min(600px, 90vw);
90
+ background: #0d1117;
91
+ border-radius: 24px;
92
+ padding: 40px 44px 36px;
93
+ transform-origin: center bottom;
94
+ will-change: transform, opacity;
95
+ }
105
96
  ```
106
97
 
107
- ---
98
+ **Stack offset** (CSS, applied via `data-depth` attribute 0–3, 0 = active):
99
+ ```
100
+ depth 0: scale(1.00) translateY(0px) opacity: 1 (active)
101
+ depth 1: scale(0.96) translateY(18px) opacity: 0.65 z-index: -1
102
+ depth 2: scale(0.92) translateY(36px) opacity: 0.35 z-index: -2
103
+ depth 3: scale(0.88) translateY(54px) opacity: 0.15 z-index: -3
104
+ ```
108
105
 
109
- ### Page Layout
106
+ Each card has a unique accent. Apply via a CSS custom property `--accent` and `--glow` set on the card element itself. The gradient border and glow use this accent.
110
107
 
111
108
  ```
112
- ┌─────────────────────────────────────────────────────────────┐
113
- │ HERO: env name (large, glowing) + tagline + PI logo badge │
114
- ├──────────────┬──────────────┬──────────────┬────────────────┤
115
- │ CARD 1 │ CARD 2 │ CARD 3 │ CARD 4 │
116
- │ 🌐 Env │ 📦 Dataset │ ⚡ Rewards │ 🎯 Rollout │
117
- │ purple │ cyan │ amber │ rose │
118
- ├──────────────┴──────────────┴──────────────┴────────────────┤
119
- │ FOOTER: generated timestamp · PI branding │
120
- └─────────────────────────────────────────────────────────────┘
109
+ Card 1: --accent: #a855f7 --glow: rgba(168,85,247,0.3) (purple)
110
+ Card 2: --accent: #22d3ee --glow: rgba(34,211,238,0.3) (cyan)
111
+ Card 3: --accent: #f59e0b --glow: rgba(245,158,11,0.3) (amber)
112
+ Card 4: --accent: #f43f5e --glow: rgba(244,63,94,0.3) (rose)
121
113
  ```
122
114
 
123
- On screens < 1200px: 2-column grid. On mobile: single column.
115
+ **Gradient border** on the active card only:
116
+ ```css
117
+ .card[data-depth="0"] {
118
+ box-shadow:
119
+ 0 0 0 1.5px var(--accent),
120
+ 0 0 60px var(--glow),
121
+ 0 32px 80px rgba(0,0,0,0.6);
122
+ }
123
+ .card[data-depth="1"],
124
+ .card[data-depth="2"],
125
+ .card[data-depth="3"] {
126
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
127
+ }
128
+ ```
124
129
 
125
- Cards are tall enough to show all content — the page CAN scroll, but each card is self-contained.
130
+ **Typography:**
131
+ ```css
132
+ font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
133
+ font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; /* code only */
134
+ ```
126
135
 
127
136
  ---
128
137
 
129
- ### Hero Section
130
-
131
- Full-width header above the cards:
132
- - Large environment name: `font-size: clamp(2rem, 5vw, 4rem)`, `font-weight: 800`, white with a subtle purple text-shadow glow: `text-shadow: 0 0 40px rgba(168,85,247,0.4)`
133
- - Below: one sentence tagline in `#94a3b8`
134
- - Top-right: a `⬡ PRIME INTELLECT` badge — `background: rgba(168,85,247,0.1)`, `border: 1px solid rgba(168,85,247,0.3)`, `color: #a855f7`, `border-radius: 6px`, `padding: 4px 12px`, `font-size: 0.7rem`, `letter-spacing: 0.12em`
135
- - Background: `radial-gradient(ellipse at 30% 0%, rgba(168,85,247,0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(34,211,238,0.06) 0%, transparent 50%)`
136
- - A thin `border-bottom: 1px solid #1e293b` separates the hero from the cards
137
-
138
- On page load: env name fades + slides up 16px (`animation: heroIn 0.6s ease-out`). Tagline follows 150ms later.
138
+ ### Card Content Specs
139
139
 
140
- ---
140
+ Each card has the same shell structure:
141
141
 
142
- ### Card 1 — Environment `(purple)`
142
+ ```
143
+ ┌────────────────────────────────────────────┐
144
+ │ LABEL (0.65rem, accent, caps, tracking) │
145
+ │ TITLE (1.6rem, 700, white) │
146
+ │ ───────────────────────────────────── │
147
+ │ │
148
+ │ [BODY — unique per card, see below] │
149
+ │ │
150
+ │ ──────────────────────────────────────── │
151
+ │ [progress dots] [Continue → button] │
152
+ └────────────────────────────────────────────┘
153
+ ```
143
154
 
144
- **Header:** `🌐 Environment` in bold white, `font-size: 0.7rem` `ENVIRONMENT` label in purple caps above it.
155
+ **Progress dots:** 4 dots, `width: 7px height: 7px border-radius: 50%`. Active dot: accent color, `width: 20px border-radius: 4px` (pill). Inactive: `rgba(255,255,255,0.15)`. Transition: `width 0.3s ease`.
145
156
 
146
- **Body:**
147
- - A paragraph of prose describing what task this environment trains a model to do — written in plain English, no jargon beyond what the researcher already knows
148
- - GitHub link (if found): a pill button — `background: rgba(168,85,247,0.1)`, `border: 1px solid rgba(168,85,247,0.3)`, hover brightens, shows `↗` arrow. If no GitHub link found, omit this element entirely.
149
- - Stat chips row at the bottom: 3–5 pill badges (e.g. `64 prompts`, `2 rewards`, `single-turn`, `math reasoning`). Each chip: `background: rgba(168,85,247,0.08)`, `border: 1px solid rgba(168,85,247,0.2)`, `color: #c4b5fd`, `border-radius: 99px`, `padding: 3px 10px`, `font-size: 0.72rem`
157
+ **Continue button:** `background: var(--accent)`, `color: #000`, `font-weight: 700`, `font-size: 0.82rem`, `border-radius: 99px`, `padding: 8px 20px`, `border: none`, `cursor: pointer`. Hover: `opacity: 0.85`.
150
158
 
151
159
  ---
152
160
 
153
- ### Card 2 — Dataset `(cyan)`
161
+ #### Card 1 Body — Environment
154
162
 
155
- **Header:** `📦 Dataset` label.
163
+ - **Env name**: `font-size: 1.6rem`, `font-weight: 800`, white
164
+ - **Description**: 3–4 sentences, `font-size: 0.9rem`, `color: #94a3b8`, `line-height: 1.65`, `margin: 14px 0`
165
+ - **GitHub link** (only if URL was found in source): pill button — `background: rgba(255,255,255,0.05)`, `border: 1px solid rgba(255,255,255,0.1)`, `color: #e2e8f0`, `border-radius: 99px`, `padding: 5px 14px`, `font-size: 0.78rem`. Shows `↗ GitHub`. Hover: `border-color: var(--accent)`, `color: var(--accent)`. If no URL found, this element does not exist.
166
+ - **Stat chips**: row of 3–5 pills. `background: rgba(168,85,247,0.08)`, `border: 1px solid rgba(168,85,247,0.2)`, `color: #c4b5fd`, `border-radius: 99px`, `padding: 4px 11px`, `font-size: 0.73rem`
156
167
 
157
- **Body — three subsections, stacked:**
168
+ ---
158
169
 
159
- **① Source** — one line, monospace: where the data comes from. E.g.:
160
- ```
161
- HuggingFace · openai/gsm8k · train split
162
- ```
163
- or
170
+ #### Card 2 Body — Dataset
171
+
172
+ **Source line** — monospace, one line:
164
173
  ```
165
- Hardcoded · PROMPTS list · 64 examples
174
+ HuggingFace · openai/gsm8k · train split
166
175
  ```
167
- Style: `background: rgba(34,211,238,0.05)`, `border-left: 3px solid #22d3ee`, `padding: 8px 14px`, `border-radius: 0 6px 6px 0`, monospace, cyan text.
168
-
169
- **② Field anatomy** — a compact table showing every field in a data row:
170
-
171
- | Field | Type | Description |
172
- |-------|------|-------------|
176
+ Style: `background: rgba(34,211,238,0.05)`, `border-left: 3px solid #22d3ee`, `padding: 8px 14px`, `border-radius: 0 6px 6px 0`, `font-size: 0.82rem`, `color: #67e8f9`
173
177
 
174
- Table style: no outer border, alternating row backgrounds `rgba(34,211,238,0.03)` / transparent, header row in cyan `0.6rem` caps. Text `0.82rem`.
178
+ **Field list** — compact, beneath the source line:
179
+ Each field on one line: `field_name` in cyan monospace + `·` + type/purpose in muted text. `font-size: 0.8rem`, `line-height: 1.8`.
175
180
 
176
- **③ Example row** — the most important part. Show one complete real (or synthesized) example row. Render it as a structured display, NOT a raw JSON dump:
177
- - Each field on its own line: field name in cyan monospace, value in white
178
- - Long text values (like prompt content) get a soft box: `background: rgba(255,255,255,0.03)`, `border: 1px solid #1e293b`, `border-radius: 6px`, `padding: 10px 14px`, `font-size: 0.82rem`, full content shown (no truncation)
181
+ **Example row** — the main content:
182
+ A clean structured display. Label: `EXAMPLE ROW` in `0.65rem` cyan caps. Then each field:
183
+ - Field name: cyan monospace, `font-size: 0.78rem`
184
+ - Value: white, `font-size: 0.82rem`, `line-height: 1.5`
185
+ - Long text values (prompts, answers): wrapped in a soft box — `background: rgba(255,255,255,0.03)`, `border-radius: 6px`, `padding: 8px 12px`, `margin-top: 2px`
186
+ - Full content — never truncated
179
187
 
180
188
  ---
181
189
 
182
- ### Card 3 — Rewards `(amber)`
190
+ #### Card 3 Body — Rewards
183
191
 
184
- **Header:** `⚡ Rewards` label.
185
-
186
- **Body:** For each reward function, a reward block:
192
+ For each reward function, a compact block:
187
193
 
188
194
  ```
189
- ┌─────────────────────────────────────────────────┐
190
- │ format_reward [float] │
191
- │ ───────────────────────────────────────────── │
192
- │ CHECKS │
193
- │ Checks that response contains <answer>...</ │
194
- │ answer> tags and inner content is numeric │
195
- │ │
196
- │ SCORES 0 if tags missing or content non-num │
197
- │ SCORES 1 if tags present and content is int │
198
- └─────────────────────────────────────────────────┘
195
+ format_reward [float]
196
+ Checks response contains <answer>…</answer>
197
+ ✗ 0 tags absent or inner content non-numeric
198
+ ✓ 1 tags present, content is a valid integer
199
199
  ```
200
200
 
201
- - Function name: `font-family: monospace`, amber color, `font-size: 0.9rem`, `font-weight: 600`
202
- - `[float]` / `[int]` / `[bool]` type badge: small, muted, right-aligned
203
- - `CHECKS` / `SCORES 0` / `SCORES 1` labels: `0.65rem`, letter-spacing `0.1em`, amber at 60% opacity
204
- - Actual descriptions: white text, `0.83rem`, leading `1.5`
205
- - Block background: `rgba(245,158,11,0.04)`, `border: 1px solid rgba(245,158,11,0.15)`, `border-radius: 10px`, `padding: 14px 16px`
206
- - Blocks separated by `12px` gap
201
+ - Name: monospace, `color: #fcd34d`, `font-weight: 600`, `font-size: 0.88rem`
202
+ - `[float]` badge: `font-size: 0.68rem`, `color: #6b7280`, right-aligned via `display: flex justify-content: space-between`
203
+ - Description line: `color: #94a3b8`, `font-size: 0.8rem`, `margin: 4px 0 6px`
204
+ - `✗ 0` / `✓ 1` lines: `font-size: 0.78rem`, `✗` in `#f87171`, `✓` in `#4ade80`, text in `#94a3b8`
205
+ - Block: `background: rgba(245,158,11,0.05)`, `border: 1px solid rgba(245,158,11,0.12)`, `border-radius: 10px`, `padding: 12px 14px`, `margin-bottom: 10px`
207
206
 
208
- If there is a composite formula, show it after all blocks in a prominent callout:
207
+ If composite formula exists — after all reward blocks:
209
208
  ```
210
209
  background: rgba(245,158,11,0.08)
211
- border: 1px solid rgba(245,158,11,0.3)
212
- border-radius: 8px
213
- padding: 14px 18px
214
- font-family: monospace
215
- color: #fcd34d
216
- font-size: 0.9rem
210
+ border: 1px solid rgba(245,158,11,0.25)
211
+ border-radius: 8px · padding: 10px 14px
212
+ font-family: monospace · color: #fcd34d · font-size: 0.85rem
217
213
  ```
218
214
 
219
215
  ---
220
216
 
221
- ### Card 4 — Rollout `(rose)`
222
-
223
- **Header:** `🎯 Rollout` label.
217
+ #### Card 4 Body — Rollout
224
218
 
225
- **Body:** A numbered step-by-step trace. Each step:
219
+ Numbered steps. Each step:
226
220
 
227
221
  ```
228
- ① Data → Prompt
229
- ──────────────────────────────────────────
230
- The raw row's `problem` field is inserted
231
- into a system prompt: "Solve the following
232
- math problem step by step..." followed by
233
- the problem text as the user message.
222
+ 01
223
+ Data → Prompt
224
+ The problem field is inserted into "Solve step by step…"
225
+ as the user message. No system prompt.
234
226
  ```
235
227
 
236
- - Step number: large, `font-size: 1.4rem`, `font-weight: 800`, rose color, `opacity: 0.4`, positioned to the left
237
- - Step title: `font-weight: 700`, white, `font-size: 0.9rem`
238
- - A `1px solid rgba(244,63,94,0.15)` rule below the title
239
- - Description: `0.83rem`, `#94a3b8`, `line-height: 1.6`
240
- - Between steps: a rose-tinted connector line on the left side (`border-left: 2px solid rgba(244,63,94,0.15)`, `margin-left: 10px`, `padding-left: 20px`)
228
+ - Number: `font-size: 2rem`, `font-weight: 800`, `color: var(--accent)`, `opacity: 0.25`, `line-height: 1`
229
+ - Title: `font-size: 0.88rem`, `font-weight: 700`, `color: #f1f5f9`, `margin: 2px 0`
230
+ - Description: `font-size: 0.8rem`, `color: #94a3b8`, `line-height: 1.55`
231
+ - Left connector: `border-left: 2px solid rgba(244,63,94,0.15)`, `padding-left: 16px`, `margin-left: 12px`, except on last step
232
+ - Between steps: `margin-bottom: 16px`
241
233
 
242
- Steps to always include (adapt to what's in the code):
243
- 1. **Data → Prompt** — how the raw row becomes the model's input
244
- 2. **Model response** — what the model is expected to produce (format, structure)
245
- 3. **Reward evaluation** — how each reward function is called and what it receives
246
- 4. **Score computation** — how the final score is derived
247
- 5. **Perfect vs zero** — what a max-score response looks like vs a zero-score response (concrete examples if possible)
234
+ Always 5 steps: Data→Prompt · Model Response · Reward Evaluation · Score Computation · Perfect vs Zero.
248
235
 
249
236
  ---
250
237
 
251
- ### Entrance Animations
252
-
253
- All guarded by `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }`.
238
+ ### Reveal Animation
254
239
 
255
240
  ```css
256
- @keyframes heroIn {
257
- from { opacity: 0; transform: translateY(16px); }
258
- to { opacity: 1; transform: translateY(0); }
241
+ @keyframes flyOut {
242
+ to { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
259
243
  }
260
- @keyframes cardIn {
261
- from { opacity: 0; transform: translateY(24px) scale(0.98); }
262
- to { opacity: 1; transform: translateY(0) scale(1); }
244
+ @keyframes riseUp {
245
+ from { transform: scale(0.96) translateY(18px); opacity: 0.65; }
246
+ to { transform: scale(1) translateY(0); opacity: 1; }
263
247
  }
264
248
  ```
265
249
 
266
- Cards animate in with staggered delay: `animation-delay: 0.1s, 0.2s, 0.3s, 0.4s` for cards 1–4.
250
+ On click:
251
+ 1. Active card: `flyOut 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards`
252
+ 2. After 80ms: next card transitions from depth-1 styles to depth-0 styles — `riseUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)` (spring overshoot)
253
+ 3. All remaining cards shift their `data-depth` attributes down by 1
254
+ 4. Progress dots update with a `0.3s` width transition
267
255
 
268
- ---
269
-
270
- ### JavaScript (inline, vanilla)
271
-
272
- ```js
273
- // Card hover glow
274
- document.querySelectorAll('.card').forEach(card => {
275
- card.addEventListener('mousemove', (e) => {
276
- const rect = card.getBoundingClientRect();
277
- const x = ((e.clientX - rect.left) / rect.width) * 100;
278
- const y = ((e.clientY - rect.top) / rect.height) * 100;
279
- card.style.setProperty('--mouse-x', x + '%');
280
- card.style.setProperty('--mouse-y', y + '%');
281
- });
282
- });
283
- ```
284
-
285
- Add a radial gradient spotlight that follows the mouse inside each card:
256
+ Guard all animations:
286
257
  ```css
287
- .card::after {
288
- content: '';
289
- position: absolute;
290
- inset: 0;
291
- border-radius: 16px;
292
- background: radial-gradient(
293
- circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
294
- rgba(255,255,255,0.03) 0%,
295
- transparent 60%
296
- );
297
- pointer-events: none;
258
+ @media (prefers-reduced-motion: reduce) {
259
+ *, *::before, *::after { animation: none !important; transition: none !important; }
298
260
  }
299
261
  ```
300
262
 
301
263
  ---
302
264
 
303
- ### Footer
265
+ ### Page Chrome
304
266
 
305
- ```
306
- Generated by Claude · Prime Intellect Verifiers · <ISO timestamp>
307
- ```
267
+ **Top:** Environment name in small muted text, centered, `font-size: 0.75rem`, `color: #334155`, `letter-spacing: 0.08em`, `margin-bottom: 32px`.
268
+
269
+ **Bottom:** `Generated by Claude · Prime Intellect · <timestamp>` — `font-size: 0.68rem`, `color: #1e293b`, `margin-top: 28px`.
308
270
 
309
- Centered, `color: #334155`, `font-size: 0.72rem`. `border-top: 1px solid #1e293b`, `padding: 24px`. No links, no extra content.
271
+ Nothing else. No nav, no sidebar, no header. The cards are the whole UI.
310
272
 
311
273
  ---
312
274
 
313
275
  ## Step 3 — Confirm and report
314
276
 
315
- After writing the file, tell the user:
316
- - The full path and `open environment_overview.html` command
277
+ After writing the file:
278
+ - Give the full path and `open environment_overview.html`
317
279
  - Two sentences: what the environment trains and how it scores
318
280
 
319
281
  ## Anti-patterns
320
282
 
321
- - Do not produce a surface-level summary — every section must contain the actual logic from the code
322
- - Do not hallucinate reward weights, field names, dataset contents, or GitHub URLs not found in the source
323
- - Do not skip helper modules — they often contain the core reward logic
324
- - Do not truncate the example row — show every field in full
325
- - Do not use light theme — this is dark-only
326
- - Do not add tabs, collapsible sections, score bars, or copy buttons — the 4-card layout is the whole structure
283
+ - Do not dump all content at once — each card is one focused chapter
284
+ - Do not truncate the example row — every field, every value, in full
285
+ - Do not invent a GitHub URL — only include it if found in the source
286
+ - Do not hallucinate reward weights, field names, or dataset content
287
+ - Do not skip helper modules — they contain the core reward logic
288
+ - Do not add tabs, sidebars, scroll-within-cards, or any structure beyond the 4-card deck
289
+ - Do not use a light theme — dark only
327
290
  - Do not use Inter, Roboto, or any Google Font
328
- - If a GitHub URL is not found in the source, omit the GitHub button entirely — never invent a URL