JacobLinCool's picture
download
raw
49.2 kB
<!DOCTYPE html>
<!--
Vendored + adapted into posterly from ARIS (Auto-claude-code-research-in-sleep),
skill paper-poster-html. Origin: https://github.com/wanshuiyin/Auto-claude-code-research-in-sleep
Upstream tokenization: MIT (c) 2026 wanshuiyin -- LICENSES/aris-MIT.txt
This is the tokenized form of posterly's own neutral template; the class names and
content are posterly's own (c) 2026 Ruishuo Chen. As an adapted derivative this file
ships as part of posterly under AGPL-3.0. See NOTICE.md.
-->
<!--
============================================================
TEMPLATE: landscape_hero (ARIS fork of posterly landscape_hero_neutral)
Adapted from posterly (MIT, © 2026 Ruishuo Chen) — see LICENSES/ & NOTICE.md;
ARIS modifications: flat de-gradient, --fs token scale, zero-inline-style
utilities, data-source/data-color-exempt contracts.
CANVAS: 48in × 36in landscape (narrower 4:3 default; hero + supporting column).
CANVAS RETARGETING: to change the print size, edit BOTH the @page
`size` (one place, in the CANVAS block below) AND the .poster
`width`/`height` (one place, in the .poster rule). Keep them in
sync. Example — ICLR 2026 main conference uses the official print
service spec 185cm × 90cm landscape:
@page { size: 1850mm 900mm; } /* or 185cm 90cm */
.poster { width: calc(1850 * var(--u)); height: calc(900 * var(--u)); }
(1 print --u = 1mm, so 1850/900 u == 1850/900 mm == 185×90 cm.)
LAYOUT: header → hero-grid (HERO panel ~60% | SUPPORTING column ~40%)
→ optional takeaways → footer
(NO framework banner — the hero IS the banner.)
USE WHEN: ONE figure / table / system diagram is the main message of the poster
and supporting text/cards orbit it. Examples:
- "We built X — look at this big result."
- "Here is our system diagram, plus a few orbit cards."
- Demos, single-killer-figure posters, system / architecture posters.
Pick `landscape_4col.html` instead when you have 3-5 cards
per column with no single dominant figure.
HOW TO USE:
1. Copy this file to your working directory as `poster.html`.
2. Edit the DESIGN TOKENS in `:root` (or swap a tokens/*.json palette) —
the token block is the ONLY place color/font-size literals may live.
3. Replace the scaffold content. The hero is the
only "big" element — put your headline figure / table / diagram there.
4. Run `python3 tools/run_gates.py poster.html` (the default driver:
preflight -> style -> measure -> polish) to verify the
hero panel's bottom edge aligns with the supporting column's last card,
then `python3 tools/render_preview.py poster.html` to produce the PDF.
STYLE CONTRACT (ARIS source gate, tools/style_check.py):
- NO inline `style=` attributes anywhere in the markup. Use the utility
classes (.fs-N, .mt-N, .mb-N, .w-NN, .text-secondary, .nowrap,
.text-center) defined in the UTILITIES block below.
Sole exceptions: the internal SVG of a `data-color-exempt="logo"` element,
and a `style="width: NN%"` on a `data-source="paper"` <img> (AR width tweak).
- All font-size values reference a `--fs-1..9` token (or a COMPONENTS.md
predefined `calc(var(--fs-N) * k)` variant such as `.eqn--large`).
- No `linear-gradient`; the only gradient allowed is the .poster radial
tint (every color stop alpha ≤ 0.06).
MEASURE ROLES: every layout-critical element carries `data-measure-role`.
poster, header, body, hero (NEW), column, card, footer-strip, footer.
Generic measurement scripts depend on these — do not remove.
============================================================
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chebyshev Policies and the Mountain Car Problem — Independent Reproduction</title>
<!-- MathJax v3 for inline equations. CDN by default; to go offline,
download a MathJax v3 release into assets/mathjax/ and change the <script>
`src` below to "assets/mathjax/es5/tex-svg.js". -->
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
packages: {'[+]': ['ams']}
},
svg: { fontCache: 'global' }
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<style>
/* =========================================================
CANVAS — 48" × 36" landscape (narrower 4:3 hero default).
RETARGET: change @page size here AND .poster width/height below.
ICLR 2026 main = 1850mm 900mm (185×90 cm) landscape — see header note.
========================================================= */
@page { size: 48in 36in; margin: 0; }
:root {
/* ===== DESIGN TOKENS ===== */
/* The ONLY place color / font-size literals are allowed (style_check
rule 1 + 8 locate this block by the comment pair). Override token
VALUES here only — never restyle component rules with new literals.
To rebrand, edit these or load a tokens/*.json palette. */
/* Primary accent (header underline, card-highlight bar, section nums, .keyword) */
--accent: #307090;
--accent-deep: #224E65;
--accent-light: #EAF1F4;
--accent-soft: #DAE5EB;
/* Secondary accent for "ours / best" emphasis (table .ours row, "★" callouts) */
--gold: #C9A24A;
--gold-soft: #FFF7E0;
/* Text */
--text-primary: #1A1A1A;
--text-secondary: #555555;
--text-muted: #888888;
/* Backgrounds */
--bg-page: #F6F2F0;
--bg-card: #FFFFFF;
--bg-card-tint: #FAFAFB;
--bg-emphasis: var(--accent-light);
/* Borders */
--border-soft: #D8D8D8;
--border-strong: var(--accent);
/* Screen-preview backdrop only — @media print overrides body to white.
Tokenized so no color literal escapes the token block (style_check rule 1). */
--bg-screen: #2b2b2b;
/* Base unit. Print: 1mm; screen preview: 1.6px (~3.78px = 1mm at 96dpi). */
--u: 1.6px;
/* Font-size scale (9 steps). Every font-size in this template references
one of these. Off-scale px drift is forbidden (style_check rule 8);
`calc(var(--fs-N) * k)` is allowed ONLY for COMPONENTS.md variants. */
--fs-1: calc(9 * var(--u)); /* micro label */
--fs-2: calc(10 * var(--u)); /* small caption */
--fs-3: calc(11 * var(--u)); /* caption / table */
--fs-4: calc(12 * var(--u)); /* body text */
--fs-5: calc(13 * var(--u)); /* equation / emphasis */
--fs-6: calc(15 * var(--u)); /* subtitle */
--fs-7: calc(16 * var(--u)); /* section title */
--fs-8: calc(22 * var(--u)); /* banner number */
--fs-9: calc(32 * var(--u)); /* main title */
/* Fonts. Override at :root if your venue mandates a specific family.
Whitelist (style_check rule 7): serif body, sans heads, mono code. */
--font-serif: "Charter", "Source Serif Pro", "Georgia", serif;
--font-sans: "Inter", "Helvetica Neue", sans-serif;
/* Shadows & watermark ink — tokenized so rules 1/3 stay literal-free
(the faint radial page tint is the ONE allowed literal outside this
block; rule 5 validates it WHEN ENABLED -- the style gate ships with rules 4-5 off). */
--shadow-screen: 0 0 60px rgba(0, 0, 0, 0.5);
--shadow-card: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(48, 112, 144, 0.05);
--ornament-ink: rgba(48, 112, 144, 0.06);
--shadow-hero: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(48, 112, 144, 0.08);
/* ===== END DESIGN TOKENS ===== */
}
/* =========================================================
RESET + BASE
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg-screen);
font-family: var(--font-serif);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
}
/* Poster container — exact print dimensions; data-measure-role="poster" so
poster_check.py can verify the canvas size.
RETARGET: width/height must track @page size (see CANVAS block). */
.poster {
width: calc(1219 * var(--u));
height: calc(914 * var(--u));
background: var(--bg-page);
/* The only gradient the catalog sanctions (rule 5 enforces it only when re-enabled): a low-alpha radial tint
(every color stop alpha ≤ 0.06). NOT a linear-gradient. */
background-image:
radial-gradient(ellipse at top left, rgba(48, 112, 144, 0.06), transparent 40%),
radial-gradient(ellipse at bottom right, rgba(201, 162, 74, 0.05), transparent 50%);
margin: 20px auto;
padding: calc(10 * var(--u)) calc(14 * var(--u));
display: grid;
/* NO banner row — the hero IS the banner. */
grid-template-rows: auto 1fr auto; /* header | hero-grid | footer */
gap: calc(8 * var(--u));
box-shadow: var(--shadow-screen);
position: relative;
overflow: hidden;
}
/* Decorative top bar — flat accent (de-gradiented from posterly original). */
.poster::before {
content: "";
position: absolute; top: 0; left: 0; right: 0;
height: calc(8 * var(--u));
background: var(--accent);
}
/* =========================================================
HEADER (venue-badge | title-block | logo+QR)
========================================================= */
.header {
display: grid;
grid-template-columns: 1fr minmax(50%, auto) 1fr; /* equal side tracks (1fr) -> the title track is centred on the poster, not just between the side blocks; the centre track is floored at 50% so a one-line title still fills it (else a short title measures narrow and trips a false HEADER/TITLE-SQUEEZED). Best-effort: a side block wide enough to clamp its 1fr track can still pull the title off-centre. */
align-items: center;
gap: calc(16 * var(--u));
padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));
border-bottom: calc(2 * var(--u)) solid var(--accent);
}
.venue-badge {
justify-self: start; /* anchor to the far-left edge so the centre track stays centred */
display: flex; flex-direction: column;
align-items: center; justify-content: center;
min-width: calc(95 * var(--u));
text-align: center;
border-right: calc(1 * var(--u)) solid var(--border-soft);
padding-right: calc(12 * var(--u));
}
.venue-badge .vb-venue {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-9);
color: var(--accent-deep);
line-height: 1;
letter-spacing: -0.5px;
}
.venue-badge .vb-year {
font-family: var(--font-sans);
font-size: var(--fs-5);
color: var(--text-secondary);
margin-top: calc(3 * var(--u));
letter-spacing: 1.2px;
}
.venue-badge .vb-tag {
font-family: var(--font-sans);
font-size: var(--fs-2);
color: var(--accent);
font-weight: 700;
margin-top: calc(2 * var(--u));
letter-spacing: 1.2px;
}
.title-block { text-align: center; min-width: 0; }
.title {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-9);
line-height: 1.05;
color: var(--accent-deep);
letter-spacing: -0.5px;
}
.title .accent { color: var(--gold); }
.subtitle {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-6);
color: var(--text-secondary);
margin-top: calc(2 * var(--u));
font-style: italic;
}
.authors-line {
font-family: var(--font-sans);
font-size: var(--fs-4);
color: var(--accent);
font-weight: 600;
margin-top: calc(3 * var(--u));
}
.authors-line .author { margin: 0 calc(4 * var(--u)); }
.authors-line sup { font-size: 0.7em; color: var(--accent); }
.authors-line .aff {
color: var(--text-secondary);
font-weight: 400;
display: inline; /* author + affiliation share ONE line */
font-size: var(--fs-4);
}
.right-block {
justify-self: end; /* keep logo+QR in the far-right corner */
display: flex; align-items: center;
gap: calc(10 * var(--u));
}
.qr-block { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.qr-block img {
width: calc(85 * var(--u));
height: calc(85 * var(--u));
border: calc(2 * var(--u)) solid var(--accent);
border-radius: calc(4 * var(--u));
background: white;
padding: calc(2 * var(--u));
}
.qr-label {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--accent);
font-weight: 600;
}
/* Optional logo slot — drop your lab logo here. Keep its rendered height
close to the QR (~85u) so the header doesn't grow disproportionately.
LOGO CONTRACT: a logo whose own SVG/PNG carries brand colors must be
marked `data-color-exempt="logo"` so style_check exempts it from the
palette / inline-style gates, e.g.:
<div class="logo-slot"><img src="assets/logos/lab.png" alt="Lab"
data-color-exempt="logo"></div>
Inline-SVG logos carry the attribute on the <svg> element itself. */
.logo-slot img { height: calc(85 * var(--u)); width: auto; max-width: calc(360 * var(--u)); object-fit: contain; display: block; }
/* Logo size classes on .logo-slot -- pick from the file's aspect ratio (SKILL.md Gate E).
tall/square sit at the QR-matched slot height; wide is intentionally shorter (~68% of the
QR) and width-capped so a long wordmark doesn't out-mass the title. Do NOT combine these
with logo-stack (that row is width-normalized, below). */
.logo-slot.logo-tall img,
.logo-slot.logo-square img { height: calc(85 * var(--u)); }
.logo-slot.logo-wide img { height: calc(58 * var(--u)); max-width: calc(300 * var(--u)); }
/* Logo chip: a solid backing that keeps a transparent / edge-white logo legible on a
colored/dark header (white chip) or a light header (.logo-chip-dark); the padding + radius
fold a stray white box into a deliberate rounded tile (SKILL.md Gate E, Background). */
.logo-chip {
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-card); border-radius: calc(3 * var(--u));
padding: calc(3 * var(--u)) calc(5 * var(--u));
}
.logo-chip.logo-chip-dark { background: var(--text-primary); }
/* logo-row: institution logos in the header right block (REAL logos the
user provided — never fabricate a seal). Each img MUST carry
data-color-exempt="logo"; height pairs with the QR. */
.logo-row { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.logo-row img { height: calc(68 * var(--u)); width: auto; display: block; }
/* --boxed variant: each logo in a labeled tile (logo + institution name) —
more presence at poster distance; white tile + soft border, no new hues. */
.logo-row .lr-item {
display: flex; flex-direction: column; align-items: center;
gap: calc(2 * var(--u));
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: calc(3 * var(--u));
padding: calc(4 * var(--u)) calc(6 * var(--u));
}
.logo-row .lr-item img { height: calc(58 * var(--u)); }
.logo-row .lr-label {
font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-1);
color: var(--text-secondary); text-align: center; line-height: 1.15;
}
/* logo-stack variant: WIDE WORDMARKS (AR >= ~2) normalized to EQUAL WIDTH
and stacked vertically, left-aligned. Use when two wide wordmarks of
different aspect ratio read unbalanced height-matched in a row (equal
width lets the less-wide mark grow taller and aligns a clean block).
NOT for a square seal or tall mark (equal width blows it up — keep those
height-matched). Do NOT also apply the logo-wide/tall/square classes. */
.logo-row.logo-stack { flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); }
.logo-row.logo-stack img { width: calc(170 * var(--u)); height: auto; }
/* venue badge may carry the official venue logo above its text line */
.venue-badge img { height: calc(62 * var(--u)); width: auto; display: block; margin: 0 auto calc(2 * var(--u)); }
.venue-badge .vb-title { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-5); color: var(--accent-deep); letter-spacing: 0.5px; }
/* =========================================================
BODY: HERO-GRID — HERO panel (~60%) + SUPPORTING column (~40%).
-----------------------------------------------------------------
STRICT ALIGNMENT (non-negotiable):
Cards in the supporting column must visually bottom-align with the hero
panel. Run `python3 tools/poster_check.py measure poster.html` — spread
between hero-bottom and column-last-card-bottom must be < 5 px (< 3 px
ideal); the gap to the takeaways strip should land in 30–50 px.
Mechanism:
- The `.hero-grid` itself fills the 1fr body row.
- `.hero` is `display:flex; flex-direction:column;` with a flexible
`.hero-stage` (`flex:1`) so its figure grows to fill the available
height. The hero's bottom edge is therefore pinned to the grid row.
- `.column` is `display:flex; flex-direction:column;` with
`justify-content: space-between;` so its last card hugs the bottom.
If alignment drifts > 5 px the usual fix is to (a) add one more line of
content to the shortest card, or (b) bump the `.column` gap from 6u to
7u. Do NOT pad the hero with empty space — visual weight must stay on
the hero figure / table itself.
----------------------------------------------------------------- */
.hero-grid {
display: grid;
/* Option A default: hero LEFT 60%, supporting column RIGHT 40%. */
grid-template-columns: 1fr 1fr;
gap: calc(10 * var(--u));
/* No overflow:hidden here — it would clip the hero/card shadows
(pitfall #6). .poster already clips at the page boundary;
min-height:0 is the grid-blowout guard. */
min-height: 0;
}
/* HERO panel — the single dominant element. Holds an optional section title,
ONE large figure / table / diagram (full-width inside the panel, no
image border), optional caption, optional 1 small text block. */
.hero {
display: flex;
flex-direction: column;
gap: calc(5 * var(--u));
background: var(--bg-card);
border-radius: calc(5 * var(--u));
border: calc(1 * var(--u)) solid var(--border-soft);
border-left: calc(8 * var(--u)) solid var(--accent);
box-shadow: var(--shadow-hero);
padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
min-height: 0;
overflow: hidden;
}
.hero .section-title { font-size: var(--fs-7); }
.hero .hero-stage {
/* The hero figure / table region. Fills available vertical space so its
bottom can align with the supporting column's last card bottom.
Flat tint (de-gradiented from posterly original). */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--bg-card-tint);
border-radius: calc(4 * var(--u));
min-height: 0;
padding: calc(4 * var(--u));
}
.hero .hero-stage img {
/* IMPORTANT: no border on the hero image. The stage container frames it.
HERO FIGURE CONTRACT: the hero image MUST come from the paper:
<img src="assets/paper_figures/hero.png" data-source="paper"
data-asset-id="hero" alt="...">
The data-source/data-asset-id pair is required by asset_check and
exempts the image from style_check's palette gate.
FILL: width/height:100% + object-fit:contain makes the picture fill the
stage (letterboxed to its AR) regardless of its natural pixel size. With
the old `width:auto; max-width:100%` a figure whose natural size was
below the rendered stage (~3200px wide at 60x36in) rendered SMALL and
centered, stranding large voids that no gate reliably caught. Generate
the hero figure at >= the stage pixel size and near the stage AR; polish
warns HERO/UNDER-RESOLVED otherwise. */
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* Placeholder shown when no <img> is present yet — remove once you drop in
your hero figure. Keeps the stage visible during template authoring. */
.hero .hero-stage .stage-placeholder {
font-family: var(--font-sans);
color: var(--text-muted);
font-size: var(--fs-6);
text-align: center;
line-height: 1.4;
padding: calc(40 * var(--u)) calc(10 * var(--u));
border: calc(2 * var(--u)) dashed var(--border-soft);
border-radius: calc(6 * var(--u));
width: 100%;
}
.hero .hero-caption {
font-family: var(--font-sans);
font-size: var(--fs-5);
color: var(--text-secondary);
line-height: 1.35;
text-wrap: balance;
}
.hero .hero-caption strong { color: var(--accent-deep); }
.hero .hero-aside {
/* Optional small text block under the figure. Keep to ~2-3 lines so the
figure stays the visual hero. Delete the element if not needed. */
font-family: var(--font-serif);
font-size: var(--fs-5);
line-height: 1.4;
color: var(--text-primary);
background: var(--bg-emphasis);
border-left: calc(3 * var(--u)) solid var(--accent);
padding: calc(4 * var(--u)) calc(9 * var(--u));
border-radius: calc(3 * var(--u));
}
/* SUPPORTING column — 3-4 stacked cards. `justify-content: space-between`
pushes the last card to the column bottom so it bottom-aligns with the
hero (see strict-alignment comment on `.hero-grid` above). */
.column {
display: flex;
flex-direction: column;
justify-content: space-between; /* anchor last card to column bottom */
gap: calc(6 * var(--u));
min-height: 0;
height: 100%;
}
/* =========================================================
CARDS (verbatim tokens from sibling template)
========================================================= */
.card {
background: var(--bg-card);
border-radius: calc(5 * var(--u));
padding: calc(4 * var(--u)) calc(9 * var(--u));
border: calc(1 * var(--u)) solid var(--border-soft);
box-shadow: var(--shadow-card);
position: relative;
}
.card.tinted { background: var(--bg-card-tint); }
.card.card--compact { padding: calc(3 * var(--u)) calc(6 * var(--u)); } /* predefined variant: tighter padding (fix (f)) */
/* .highlight de-gradiented: flat emphasis tint instead of a linear-gradient. */
.card.highlight {
border-left: calc(6 * var(--u)) solid var(--accent);
background: var(--bg-emphasis);
}
.section-title {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-7);
color: var(--accent-deep);
margin-bottom: calc(3 * var(--u));
display: flex; align-items: center;
gap: calc(5 * var(--u));
}
/* Title text + any ★ marker share ONE .st-text span, so the heading wraps as
natural text (hanging indent) instead of flex-wrapping atomic items: the
number badge is never stranded on its own line and the ★ never widows. */
.section-title .st-text { flex: 1; min-width: 0; line-height: 1.18; }
/* Graceful fallback if a title is NOT wrapped in .st-text: float the badge so
bare inline text still wraps beside it rather than dropping below it. */
.section-title:not(:has(.st-text)) { display: block; line-height: 1.18; }
.section-title:not(:has(.st-text)) .num { float: left; margin-right: calc(5 * var(--u)); }
.section-title .num {
display: inline-flex; align-items: center; justify-content: center;
width: calc(22 * var(--u)); height: calc(22 * var(--u));
background: var(--accent); color: white;
border-radius: 50%;
font-size: var(--fs-5); font-weight: 700;
flex-shrink: 0;
}
/* Inline "★ key" tag inside a section title (replaces an inline style). */
.section-title .tag-key {
color: var(--gold);
font-size: var(--fs-4);
}
.body-text, .card p, .card li {
font-family: var(--font-serif);
font-size: var(--fs-4);
line-height: 1.3;
color: var(--text-primary);
}
.card ul, .card ol { padding-left: calc(18 * var(--u)); }
.card li { margin-bottom: calc(2 * var(--u)); }
.keyword { color: var(--accent); font-weight: 700; }
.keyword-gold { color: var(--gold); font-weight: 700; }
.highlight-text {
background: var(--bg-emphasis);
padding: 0 calc(3 * var(--u));
border-radius: calc(2 * var(--u));
}
/* Equation block */
.eqn {
background: var(--bg-emphasis);
border-left: calc(3 * var(--u)) solid var(--accent);
padding: calc(4 * var(--u)) calc(10 * var(--u));
margin: calc(4 * var(--u)) 0;
font-size: var(--fs-5);
overflow-x: hidden;
}
/* COMPONENTS.md predefined variant: a larger equation when a formula is the
hero of a card. The `calc(var(--fs-N) * k)` form is allowed ONLY for
registered variants like this one (style_check rule 8 / §12.5 nit 1). */
.eqn--large { font-size: calc(var(--fs-5) * 1.25); }
.eqn .label {
display: block;
font-family: var(--font-sans);
font-size: var(--fs-2);
color: var(--accent);
font-weight: 600;
margin-bottom: calc(2 * var(--u));
text-transform: uppercase;
letter-spacing: 1px;
}
/* Callout: solid accent for primary; solid gold for theorems / "★ key" strips
(gold .callout de-gradiented to a flat fill). */
.callout {
background: var(--accent);
color: white;
padding: calc(5 * var(--u)) calc(10 * var(--u));
border-radius: calc(4 * var(--u));
font-size: var(--fs-4);
margin: calc(4 * var(--u)) 0;
}
.callout strong { color: var(--gold); }
.callout.gold {
background: var(--gold);
color: var(--accent-deep);
}
.callout.gold strong { color: var(--accent-deep); }
/* Figure container (still useful inside supporting cards) */
.figure { margin: calc(4 * var(--u)) 0; text-align: center; }
.figure img:not([class*="w-"]) { width: 100%; }
.figure--wide img { width: 100%; } /* predefined variant: force full card width over any .w-NN (fix (f)) */
.figure img {
/* FIGURE CONTRACT: figures must come from the paper:
<img src="assets/paper_figures/x.png" data-source="paper"
data-asset-id="x" class="w-95">
data-source/data-asset-id are required by asset_check + exempt the
image from style_check's palette gate. Use .w-NN utilities (not an
inline width) to size it; the only inline-style exception the gate
allows is `style="width: NN%"` on a data-source="paper" <img>. */
border-radius: calc(4 * var(--u));
border: calc(1 * var(--u)) solid var(--border-soft);
background: white;
}
.figure .caption {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--text-secondary);
margin-top: calc(3 * var(--u));
line-height: 1.3;
text-align: left;
}
.figure .caption strong { color: var(--accent-deep); }
/* Float a figure BESIDE text in a TEXT-RICH card: text wraps to its side
and then below it. The clearfix grows the card to contain the float;
mark the <img> data-fig-layout="beside-text" so the AR gates honour the
intentionally small width. Use ONLY when there is enough text to fill the
figure's height -- a text-sparse card should center .figure instead. A
short-text float leaves an L-shaped void below the text, which polish's
FIG/BESIDE-TEXT-VOID flags. */
.fig-wrap::after { content: ""; display: table; clear: both; }
.ff-fig {
float: right;
width: 48%; max-width: 58%; min-width: 38%;
margin: calc(1 * var(--u)) 0 calc(3 * var(--u)) calc(11 * var(--u));
text-align: center;
}
.ff-fig.left {
float: left;
margin: calc(1 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u)) 0;
}
.ff-fig img {
display: block;
width: 100%;
border-radius: calc(4 * var(--u));
border: calc(1 * var(--u)) solid var(--border-soft);
background: white;
}
.ff-fig .caption {
font-family: var(--font-sans);
font-size: var(--fs-3);
color: var(--text-secondary);
margin-top: calc(3 * var(--u));
line-height: 1.3;
text-align: center;
}
/* Result table with .ours row highlighted gold */
.result-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-3);
margin-top: calc(3 * var(--u));
}
.result-table th, .result-table td {
padding: calc(2 * var(--u)) calc(4 * var(--u));
text-align: center;
border-bottom: calc(1 * var(--u)) solid var(--border-soft);
}
.result-table thead th {
background: var(--accent); color: white;
font-weight: 600; font-size: var(--fs-2);
}
.result-table tbody tr.group-row td {
background: var(--bg-emphasis); font-weight: 700;
text-align: left;
color: var(--accent-deep);
padding-left: calc(8 * var(--u));
border-bottom: calc(2 * var(--u)) solid var(--accent);
}
.result-table tbody tr.ours td { background: var(--gold-soft); font-weight: 700; }
.result-table tbody tr.ours td:first-child { color: var(--accent-deep); }
.result-table .method { text-align: left; padding-left: calc(8 * var(--u)); }
.result-table .best { color: var(--accent); font-weight: 700; }
/* Muted reference row (replaces inline color styles in table cells). */
.result-table .ref, .result-table .ref td { color: var(--text-muted); }
/* 3-up stat box */
.keybox {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(4 * var(--u));
margin: calc(4 * var(--u)) 0 0;
}
.keybox .kb-item {
background: var(--bg-emphasis);
border-top: calc(2 * var(--u)) solid var(--accent);
padding: calc(3 * var(--u));
text-align: center;
/* The grid stretches every tile to the tallest one; center the content
vertically so a 1-line tile's number aligns with a 2-line neighbour's
instead of top-ragged (SKILL Layout pitfall — stat-tile alignment). */
display: flex; flex-direction: column; justify-content: center;
border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
}
.kb-item .kb-num {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--fs-6);
color: var(--accent);
line-height: 1;
}
.kb-item .kb-label {
font-family: var(--font-sans);
font-size: var(--fs-1);
color: var(--text-secondary);
margin-top: calc(2 * var(--u));
line-height: 1.1;
}
/* Optional takeaways strip (delete the section if not needed).
De-gradiented: flat emphasis tint instead of a left-right linear-gradient. */
.takeaways-strip {
display: grid;
grid-template-columns: auto repeat(4, 1fr);
align-items: center;
gap: calc(10 * var(--u));
background: var(--bg-emphasis);
border: calc(1 * var(--u)) solid var(--border-soft);
border-radius: calc(5 * var(--u));
padding: calc(8 * var(--u)) calc(12 * var(--u));
}
.takeaways-strip .ts-title {
font-family: var(--font-sans);
font-size: var(--fs-6);
font-weight: 800;
color: var(--accent-deep);
display: flex; align-items: center; gap: calc(6 * var(--u));
}
.takeaways-strip .ts-title .num {
display: inline-flex; align-items: center; justify-content: center;
width: calc(22 * var(--u)); height: calc(22 * var(--u));
background: var(--accent); color: white;
border-radius: 50%;
font-size: var(--fs-5); font-weight: 700;
}
.takeaways-strip .ts-item {
border-left: calc(3 * var(--u)) solid var(--accent);
padding-left: calc(8 * var(--u));
line-height: 1.3;
text-align: center;
text-wrap: balance;
}
.takeaways-strip .ts-key {
font-family: var(--font-sans);
font-size: var(--fs-3);
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
.takeaways-strip .ts-text {
font-family: var(--font-serif);
font-size: var(--fs-4);
margin-left: calc(4 * var(--u));
}
/* Footer */
.footer {
grid-column: 1 / -1;
display: flex; justify-content: space-between; align-items: baseline;
/* When the two blocks can't sit side by side they stack (wrap) instead of
overflowing; row-gap keeps the stacked blocks legible. */
flex-wrap: wrap; gap: calc(2 * var(--u)) calc(10 * var(--u));
padding-top: calc(8 * var(--u));
border-top: calc(1 * var(--u)) solid var(--border-soft);
font-family: var(--font-sans);
font-size: var(--fs-5);
color: var(--text-muted);
}
/* Long repo URL / email breaks mid-token rather than overflowing the edge. */
.footer .repo { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
/* Footer method name (replaces an inline color style). */
.footer .method-name { color: var(--accent-deep); }
/* Optional watermark */
.ornament {
position: absolute;
right: calc(20 * var(--u));
bottom: calc(20 * var(--u));
font-family: var(--font-sans);
font-size: var(--fs-9);
color: var(--ornament-ink);
font-weight: 900;
letter-spacing: 4px;
pointer-events: none;
user-select: none;
}
/* =========================================================
UTILITIES — replace inline `style=` attributes in the markup.
These exist so the template body can stay 100% inline-style-free
(style_check rule 2). Add new utilities here, never an inline style.
========================================================= */
/* =========================================================
DENSITY COMPONENTS (catalogued — see COMPONENTS.md).
Guardrail: no component-local color semantics. Distinction is
carried by labels, order and typography — never by new hues.
========================================================= */
/* equation-stack: compact multi-row formula stack (denser than one big .eqn) */
.equation-stack { margin: calc(2 * var(--u)) 0; }
.equation-stack .eqn { margin: calc(2 * var(--u)) 0; padding: calc(2 * var(--u)) calc(8 * var(--u)); }
/* eqn-anatomy: term-by-term anatomy grid (2x2 default; --row variant = 1x4) */
.eqn-anatomy {
display: grid; grid-template-columns: 1fr 1fr;
gap: calc(2.5 * var(--u)); margin: calc(3 * var(--u)) 0;
}
.eqn-anatomy.eqn-anatomy--row { grid-template-columns: repeat(4, 1fr); }
.eqn-anatomy .ea-item {
background: var(--bg-card-tint);
border: 1px solid var(--border-soft);
border-left: calc(2 * var(--u)) solid var(--accent);
border-radius: calc(2 * var(--u));
padding: calc(2 * var(--u)) calc(4 * var(--u));
font-size: var(--fs-2); line-height: 1.3;
}
.eqn-anatomy .ea-tag {
display: inline-block; font-family: var(--font-sans); font-weight: 700;
font-size: var(--fs-1); color: var(--accent-deep);
background: var(--accent-light); border-radius: calc(1.5 * var(--u));
padding: calc(0.5 * var(--u)) calc(2.5 * var(--u));
margin-right: calc(1.5 * var(--u));
}
/* flow-strip: labeled pipeline, ALL steps the same accent; ONLY the
final step may carry the gold top bar. Not an "algorithm" unless the
paper has one — see COMPONENTS.md. */
.flow-strip { display: flex; align-items: stretch; gap: calc(1.5 * var(--u)); margin: calc(3 * var(--u)) 0; }
.flow-strip .step {
flex: 1; background: var(--accent-light);
border: 1px solid var(--accent-soft); border-radius: calc(2 * var(--u));
padding: calc(2 * var(--u)) calc(2.5 * var(--u));
text-align: center; font-size: var(--fs-2); line-height: 1.25;
}
.flow-strip .step .step-name {
display: block; font-family: var(--font-sans); font-weight: 700;
font-size: var(--fs-1); color: var(--accent-deep);
letter-spacing: 0.5px; text-transform: uppercase;
margin-bottom: calc(1 * var(--u));
}
.flow-strip .step--final { border-top: calc(1.5 * var(--u)) solid var(--gold); background: var(--gold-soft); }
.flow-strip .arrow {
align-self: center; color: var(--accent);
font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-4);
flex: 0 0 auto;
}
/* figure--duo: two paper figures sharing one caption; each img MUST be
a data-source="paper" asset and carry .w-45/.w-50 (42-48% each). */
.figure--duo { display: flex; gap: calc(3 * var(--u)); align-items: flex-start; justify-content: center; }
.figure--duo img { max-width: 48%; min-width: 0; } /* hard cap: duo contract is 42-48% each; an oversized w-NN cannot overflow the card */
/* result-table derived column (gold-soft = DERIVED arithmetic; label it) */
.result-table th.derived, .result-table td.derived {
background: var(--gold-soft); font-family: var(--font-sans); font-weight: 700;
}
/* keybox 4-up variant */
.keybox.keybox--4 { grid-template-columns: repeat(4, 1fr); }
/* algo: compact numbered procedure — ONLY when the paper itself states
an explicit algorithm/procedure; never invent steps. */
ol.algo { padding-left: calc(16 * var(--u)); }
ol.algo li { margin-bottom: calc(1.5 * var(--u)); font-size: var(--fs-3); line-height: 1.3; }
/* claim-pills: provenance mini-table (numeric-heavy posters only) */
.claim-pills { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--fs-2); }
.claim-pills td {
border-bottom: 1px solid var(--border-soft);
padding: calc(1.5 * var(--u)) calc(3 * var(--u));
}
.claim-pills .cp-id {
font-weight: 700; color: var(--accent-deep); background: var(--accent-light);
border-radius: calc(1.5 * var(--u)); padding: 0 calc(2.5 * var(--u)); white-space: nowrap;
}
.claim-pills .cp-fact { color: var(--accent-deep); font-weight: 700; }
.claim-pills .cp-derived { color: var(--gold); font-weight: 700; }
/* Grid-blowout guards: (1) columns may shrink below min-content so a
wide equation can never widen its track and squeeze siblings;
(2) over-wide display math scales down to fit its box instead of
blowing out the card (SVG keeps aspect via height:auto). */
.body-grid > .column { min-width: 0; }
.card { min-width: 0; }
.eqn mjx-container > svg { max-width: 100%; height: auto; }
/* ── Utility classes — defined LAST so equal-specificity ties
resolve in the utility's favor (source order). ── */
.fs-1 { font-size: var(--fs-1); }
.fs-2 { font-size: var(--fs-2); }
.fs-3 { font-size: var(--fs-3); }
.fs-4 { font-size: var(--fs-4); }
.fs-5 { font-size: var(--fs-5); }
.fs-6 { font-size: var(--fs-6); }
.fs-7 { font-size: var(--fs-7); }
.fs-8 { font-size: var(--fs-8); }
.fs-9 { font-size: var(--fs-9); }
.mt-1 { margin-top: calc(1 * var(--u)); }
.mt-2 { margin-top: calc(2 * var(--u)); }
.mt-3 { margin-top: calc(3 * var(--u)); }
.mt-4 { margin-top: calc(4 * var(--u)); }
.mt-5 { margin-top: calc(5 * var(--u)); }
.mt-6 { margin-top: calc(6 * var(--u)); }
.mb-1 { margin-bottom: calc(1 * var(--u)); }
.mb-2 { margin-bottom: calc(2 * var(--u)); }
.mb-3 { margin-bottom: calc(3 * var(--u)); }
.mb-4 { margin-bottom: calc(4 * var(--u)); }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
/* =========================================================
PRINT OVERRIDE — KEEP LAST so it wins source-order ties.
RETARGET: width/height must match @page size in the CANVAS block.
========================================================= */
@media print {
html, body { background: white; }
.poster { margin: 0; box-shadow: none; width: 48in; height: 36in; page-break-after: avoid; }
:root { --u: 1mm; }
}
</style>
</head>
<body>
<div class="poster" data-measure-role="poster">
<header class="header" data-measure-role="header">
<div class="venue-badge">
<div class="vb-venue">ICML</div>
<div class="vb-year">2026</div>
<div class="vb-tag">AGENT REPRO</div>
</div>
<div class="title-block">
<h1 class="title">Chebyshev Policies &amp; Mountain Car <span class="accent">[Independent Reproduction]</span></h1>
<div class="subtitle">What reproduces, what needs qualification, and what remains hardware-bound.</div>
<div class="authors-line">
<span class="author">Stefan Huber<sup>&#9993;</sup>, Hannes Unger, Georg Sch&auml;fer, Jakob Rehrl</span> &middot;
<span class="aff">University of Applied Sciences Salzburg, Austria</span>
</div>
</div>
<div class="right-block">
<div class="qr-block">
<img data-color-exempt="logo" src="assets/qr/logbook.png" alt="QR code for the public Trackio reproduction logbook">
<div class="qr-label">Evidence logbook</div>
</div>
</div>
</header>
<div class="hero-grid" data-measure-role="body">
<section class="hero" data-measure-role="hero"
data-logbook-target="claim-2-analytic-and-neural-returns"
data-logbook-label="Claim 2 evidence">
<div class="section-title"><span class="num">2</span><span class="st-text">Mountain Car returns reproduced <span class="tag-key">&#9733; Main result</span></span></div>
<div class="hero-stage">
<img src="assets/paper_figures/paper_return_over_start.png"
data-source="paper" data-asset-id="paper_return_over_start"
alt="Paper Figure 10 plotting Mountain Car return over start position for analytical, Chebyshev, and neural policies">
</div>
<div class="hero-caption">
<strong>Paper Figure 10.</strong> Return over 100 evenly spaced starts $x_0\in[-0.6,-0.4]$.
The independent fixed-grid evaluation below reproduces the paper&rsquo;s central return comparison.
</div>
<div class="hero-aside">
<strong>Independent reproduction &middot; HF Job &middot; 100 starts each.</strong>
Regret is computed against the reproduced analytical mean, $99.394$.
<table class="result-table">
<thead><tr><th>Policy</th><th>Mean return</th><th class="derived">Regret (derived)</th><th>Paper</th></tr></thead>
<tbody>
<tr class="ours"><td class="method">Analytical</td><td class="best">99.394</td><td class="derived">&mdash;</td><td>99.39</td></tr>
<tr><td class="method">ARS</td><td>96.666</td><td class="derived">2.728</td><td>96.67</td></tr>
<tr><td class="method">PPO</td><td>93.906</td><td class="derived">5.489</td><td>93.91</td></tr>
<tr><td class="method">SAC</td><td>94.605</td><td class="derived">4.789</td><td>94.61</td></tr>
</tbody>
</table>
</div>
</section>
<div class="column" data-measure-role="column">
<div class="card card--compact highlight fig-wrap" data-measure-role="card"
data-logbook-target="claim-1-closed-form-optimal-control"
data-logbook-label="Claim 1 theorem and scope audit">
<div class="section-title"><span class="num">1</span><span class="st-text">Closed form&mdash;but narrower than the headline</span></div>
<figure class="ff-fig w-45">
<img src="assets/paper_figures/paper_analytic_policy_heatmap.png"
data-source="paper" data-asset-id="paper_analytic_policy_heatmap"
data-fig-layout="beside-text"
alt="Paper Figure 6 analytical policy heatmap with trajectory">
<figcaption class="caption">Paper Fig. 6: final analytical controller.</figcaption>
</figure>
<div class="eqn eqn--large">
<span class="label">Theorem 2.4</span>
$$\alpha(t)=C\,\dot{x}(t)$$
</div>
<ul>
<li>The theorem solves the <span class="keyword">continuous, unconstrained</span> goal-reaching loss with tight energy equality.</li>
<li>The released controller uses $C(x,v)\in\{4.3346,4.8358\}$ plus a position bootstrap&mdash;not velocity alone.</li>
<li>Numerical certificate: loss gap &ge; $8.30\!\times\!10^{-3}$, constraint residual &le; $5.9\!\times\!10^{-18}$, KKT deviation &le; $1.8\!\times\!10^{-15}$.</li>
</ul>
<p class="body-text fs-3"><strong class="keyword-gold">Partial:</strong> mechanism supported; exact Gym global optimum and firstness unresolved; a qualitative $\alpha\!\propto\!v$ heuristic appeared in ProPS v1; the paper&rsquo;s 36-year chronology is unsupported by this audit.</p>
</div>
<div class="card card--compact" data-measure-role="card"
data-logbook-target="claim-3-ch-3-ars"
data-logbook-label="Claim 3 CH-3-ARS and parameter audit">
<div class="section-title"><span class="num">3</span><span class="st-text">CH-3-ARS works; the compression headline does not</span></div>
<div class="keybox">
<div class="kb-item"><div class="kb-num">98.950</div><div class="kb-label">reproduced mean return</div></div>
<div class="kb-item"><div class="kb-num">0.444</div><div class="kb-label">reproduced regret</div></div>
<div class="kb-item"><div class="kb-num">16</div><div class="kb-label">Chebyshev coefficients</div></div>
</div>
<ul class="mt-3">
<li>Exact regret gain over ARS: <span class="keyword">6.146&times;</span>; the paper&rsquo;s 6.18&times; uses rounded $2.72/0.44$.</li>
<li>The challenge&rsquo;s 0.65 regret / 4.18&times; wording is superseded by arXiv v4.</li>
<li><strong>Mixed:</strong> a biased $2\!\to\!64\!\to\!64\!\to\!1$ MLP has <strong>4,417</strong> parameters, so $4417/16=276.06\times$, not 4,355 / 277&times;. The released ARS comparator actually has 65 parameters.</li>
</ul>
</div>
<div class="card card--compact tinted" data-measure-role="card"
data-logbook-target="claim-4-ch-3-ppo-and-ch-3-reinforce"
data-logbook-label="Claim 4 PPO and REINFORCE evidence">
<div class="section-title"><span class="num">4</span><span class="st-text">Optimizer transfer: paper targets</span></div>
<table class="result-table">
<thead><tr><th>Paper value</th><th>Chebyshev</th><th>Neural ref.</th><th>Gain</th></tr></thead>
<tbody>
<tr><td class="method">PPO regret</td><td>1.29</td><td>5.48</td><td class="best">4.24&times;</td></tr>
<tr><td class="method">REINFORCE regret</td><td>0.77</td><td>ARS 2.72</td><td class="best">3.53&times;</td></tr>
</tbody>
</table>
<p class="body-text fs-3 mt-1"><strong>Independent:</strong> PPO 84.58 (regret 14.81); fresh-seeded REINFORCE 96.01 (regret 3.38). <strong>Verdict:</strong> Not reproduced; narrow start-state failure bands erase both gains.</p>
</div>
<div class="card card--compact highlight" data-measure-role="card"
data-logbook-target="claim-5-pendulum-and-aero-2"
data-logbook-label="Claim 5 transfer and hardware scope">
<div class="section-title"><span class="num">5</span><span class="st-text">Beyond Mountain Car: paper targets and scope</span></div>
<table class="result-table">
<thead><tr><th>Paper value</th><th>Chebyshev</th><th>Neural</th></tr></thead>
<tbody>
<tr><td class="method">Pendulum &middot; ARS</td><td class="best">&minus;150.8</td><td>&minus;218.3</td></tr>
<tr><td class="method">Aero 2 real &middot; PPO</td><td class="best">&minus;55.8</td><td>&minus;182.0</td></tr>
</tbody>
</table>
<p class="body-text fs-3 mt-1"><strong>Independent:</strong> Pendulum CH-6 −150.50 vs released ARS −218.32; corrected reset shifts ARS +2.22. <strong>Verdict:</strong> Ordering reproduced; CH point estimate misses ±0.05, Aero 2 inconclusive.</p>
<p class="body-text fs-3 mt-1">Aero 2 remains hardware-bound; no simulator is substituted for the physical test.</p>
</div>
</div>
</div>
<div class="footer" data-measure-role="footer">
<div>
<strong class="method-name">CHEBYSHEV POLICIES</strong> &middot; ICML 2026 Agent Repro &middot; Independent reproduction
</div>
<div>
Evidence: <span class="repo">huggingface.co/spaces/JacobLinCool/repro-chebyshev-policies-mountain-car</span>
&nbsp;&middot;&nbsp; Paper: <span class="repo">arXiv:2605.22305v4</span>
</div>
</div>
</div>
</body>
</html>

Xet Storage Details

Size:
49.2 kB
·
Xet hash:
aab9fc3c9c76d5d3570002b5271c7a3dacdb93a7f1d37be1e1c526e6b08262f7

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.