-
Notifications
You must be signed in to change notification settings - Fork 0
Launch: AMBER-led landing page #5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>AskClaw — AMBER: sealed-in-amber replay evaluation</title> | ||
| <meta name="description" content="AMBER replays real, auditable historical events — frozen the moment before the answer was revealed. Private case library, public scores, independently checkable."> | ||
| <style> | ||
| :root { --ink:#17242b; --sub:#5a6b73; --teal:#00a5b5; --teal-dark:#0b7c88; --bg:#fafdfe; --card:#fff; --line:#e3ecef; } | ||
| * { box-sizing: border-box; margin: 0; padding: 0; } | ||
| body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.7; } | ||
| a { color: var(--teal-dark); text-decoration: none; } | ||
| a:hover { text-decoration: underline; } | ||
| .wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; } | ||
| header { border-bottom: 1px solid var(--line); padding: 18px 0; } | ||
| header .wrap { display: flex; justify-content: space-between; align-items: center; } | ||
| .logo { font-weight: 800; font-size: 20px; color: var(--ink); } | ||
| .logo span { color: var(--teal); } | ||
| nav a { margin-left: 18px; font-size: 14px; color: var(--sub); } | ||
| .hero { padding: 64px 0 40px; } | ||
| .hero h1 { font-size: 40px; line-height: 1.3; letter-spacing: .5px; } | ||
| .hero h1 em { font-style: normal; color: var(--teal); } | ||
| .hero p.lead { margin-top: 16px; font-size: 18px; color: var(--sub); max-width: 720px; } | ||
| .badges { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } | ||
| .badge { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; } | ||
| .badge b { font-size: 22px; color: var(--teal-dark); } | ||
| .badge small { display: block; color: var(--sub); font-size: 12.5px; } | ||
| section { padding: 36px 0; } | ||
| h2 { font-size: 24px; margin-bottom: 6px; } | ||
| .hint { color: var(--sub); font-size: 14.5px; margin-bottom: 18px; } | ||
| figure { margin: 10px 0 6px; } | ||
| figure img { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; } | ||
| figcaption { color: var(--sub); font-size: 13.5px; margin-top: 6px; } | ||
| .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } | ||
| .repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } | ||
| .repo { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: block; color: var(--ink); } | ||
| .repo:hover { border-color: var(--teal); text-decoration: none; } | ||
| .repo b { color: var(--teal-dark); } | ||
| .repo .score { float: right; font-weight: 700; color: var(--ink); } | ||
| .repo p { font-size: 13.5px; color: var(--sub); margin-top: 4px; } | ||
| .rule { border-left: 3px solid var(--teal); padding: 4px 14px; margin: 10px 0; color: var(--sub); } | ||
| footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 40px; color: var(--sub); font-size: 13.5px; } | ||
| @media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div class="wrap"> | ||
| <div class="logo">Ask<span>Claw</span></div> | ||
| <nav> | ||
| <a href="https://github.com/getaskclaw">GitHub</a> | ||
| <a href="index.html">中文</a> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="wrap"> | ||
|
|
||
| <section class="hero"> | ||
| <h1><em>AMBER</em> — real history,<br>sealed in amber, replayed</h1> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Forced |
||
| <p class="lead">We take real, auditable incidents and freeze them at the moment before the answer was revealed. Models must redo the work with only what was knowable then, against a rubric frozen before any output existed. <b>The cases are never published. The scores always are.</b></p> | ||
| <div class="badges"> | ||
| <div class="badge"><b>23 cases / 26 papers</b><small>private library, hash-sealed</small></div> | ||
| <div class="badge"><b>11 result repos</b><small>one per vendor × endpoint</small></div> | ||
| <div class="badge"><b>Updated weekly</b><small>same library, same band, public hash index</small></div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>The board right now</h2> | ||
| <p class="hint">Same band (high), same 23 cases, same public hash index. Five rank tiers; ties are labeled as ties.</p> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "Same band (high)" is inaccurate: leader swe-2-max runs at max and tiers 4-5 include medium/low lanes; correct the claim. |
||
| <figure> | ||
| <img src="assets/top5-2026-w38.en.png" alt="AMBER board: five rank tiers (2026-W38)"> | ||
| <figcaption>2026-W38 · leader swe-2-max @ Devin at 18/23; a five-way tie at 17/23.</figcaption> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Same score, different shape</h2> | ||
| <p class="hint">The nine-axis completion matrix: each cell is a face's pin-level completion. Tied totals hide completely different profiles — the matrix shows what the sum can't.</p> | ||
| <figure> | ||
| <img src="assets/completion-matrix-7way.en.png" alt="Nine-axis completion matrix"> | ||
| <figcaption>Five lanes tied at 17/23, plus doubao 16/23 and gp27b 14/23.</figcaption> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Why the scores can be trusted</h2> | ||
| <p class="hint">Every weekly issue runs like an exam: cases sealed in advance, a clean-room sitting, per-paper wire audits, anonymized publication, and a public index anyone can re-check.</p> | ||
| <figure> | ||
| <img src="assets/trust-chain.en.png" alt="How a result is produced"> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Three counterintuitive findings</h2> | ||
| <p class="hint">Each comes with named boundaries and counterexamples in the original writeups.</p> | ||
| <figure> | ||
| <img src="assets/effort-curves-20260911.en.png" alt="Effort curves"> | ||
| <figcaption>"Think longer ≠ score better": most families backfire at top bands; swe-2 is monotone to the top.</figcaption> | ||
| </figure> | ||
| <div> | ||
| <figure> | ||
| <img src="assets/score-vs-tokens-2026-w37.en.png" alt="Score vs thinking budget"> | ||
| <figcaption>Same band, same library: output-token bills span 17× while scores differ by one case.</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="assets/wallclock-strip-2026-w37.en.png" alt="Per-case wall clock"> | ||
| <figcaption>A vendor's high TPS only holds on easy problems; hard ones slow the token stream down.</figcaption> | ||
| </figure> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Result repos</h2> | ||
| <p class="hint">One repo per lane (model × endpoint × band), one matrix per week, wire audits and hash cross-checks included.</p> | ||
| <div class="repos"> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber"><b>amber</b><span class="score">spec</span><p>Method spec + public hash index + cross-repo weekly board</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-devin"><b>amber-devin</b><span class="score">18/23</span><p>swe-2-max @ Devin — current leader</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-kimi"><b>amber-kimi</b><span class="score">17/23</span><p>k3 @ Kimi official coding endpoint + the K2.8 duel</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-ollama"><b>amber-ollama</b><span class="score">17/23</span><p>glm-5.3-flash / d41f @ Ollama Cloud</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-commandcode"><b>amber-commandcode</b><span class="score">17/23</span><p>d41f @ CommandCode — five-band ladder</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-workbuddy"><b>amber-workbuddy</b><span class="score">17/23</span><p>hy4-preview-f @ WorkBuddy ACP</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-gpt"><b>amber-gpt</b><span class="score">16/23</span><p>gpt-6-astra / gpt-5.6 family @ OpenAI Codex</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-crof"><b>amber-crof</b><span class="score">16/23</span><p>qwen3.8-27b @ CrofAI — the $1.15 value king</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-deepseek"><b>amber-deepseek</b><span class="score">16/23</span><p>deepseek-flash @ DeepSeek official</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-opencode"><b>amber-opencode</b><span class="score">16/23</span><p>deepseek-flash @ OpenCode Go</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-doubao"><b>amber-doubao</b><span class="score">16/23</span><p>doubao-seed-evolving @ Volcengine Ark Agent Plan</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-goldenpotato"><b>amber-goldenpotato</b><span class="score">14/23</span><p>Qwen3.8-27B @ community self-hosted (3× V100)</p></a> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>The rules</h2> | ||
| <div class="rule">Private side, never public: the case library, oracles, transcripts, internal case IDs and variant names.</div> | ||
| <div class="rule">Public side, always checkable: scores, aggregates, verdicts, the hash index — anyone can verify the library didn't change and the scores add up.</div> | ||
| <div class="rule">Historical outcomes are evidence, not the only correct answer; runtime sealing ≠ clean training data. Both warnings are printed on every issue.</div> | ||
| <p class="hint" style="margin-top:14px">Read the method: <a href="https://github.com/getaskclaw/amber/blob/main/AMBER-Core-Specification.md">AMBER Core Specification</a> · <a href="https://github.com/getaskclaw/amber/blob/main/hash-index/v2026-09.md">public hash index</a> · <a href="https://github.com/getaskclaw/amber/blob/main/PLAN.md">roadmap</a></p> | ||
| </section> | ||
|
|
||
| </div> | ||
|
|
||
| <footer> | ||
| <div class="wrap"> | ||
| AskClaw · AMBER results published weekly · <a href="https://github.com/getaskclaw">github.com/getaskclaw</a> | ||
| </div> | ||
| </footer> | ||
|
|
||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="zh-CN"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>AskClaw — AMBER 琥珀式封存回放评测</title> | ||
| <meta name="description" content="AMBER:把真实历史事件封进琥珀,让 AI 重做当时的题。私有题库、公开成绩、人人可核对。"> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Launch page has no pair, canonical, or Open Graph/Twitter card meta; add them here and in en.html so shares and search index correctly. |
||
| <style> | ||
| :root { --ink:#17242b; --sub:#5a6b73; --teal:#00a5b5; --teal-dark:#0b7c88; --bg:#fafdfe; --card:#fff; --line:#e3ecef; } | ||
| * { box-sizing: border-box; margin: 0; padding: 0; } | ||
| body { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.7; } | ||
| a { color: var(--teal-dark); text-decoration: none; } | ||
| a:hover { text-decoration: underline; } | ||
| .wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; } | ||
| header { border-bottom: 1px solid var(--line); padding: 18px 0; } | ||
| header .wrap { display: flex; justify-content: space-between; align-items: center; } | ||
| .logo { font-weight: 800; font-size: 20px; color: var(--ink); } | ||
| .logo span { color: var(--teal); } | ||
| nav a { margin-left: 18px; font-size: 14px; color: var(--sub); } | ||
| .hero { padding: 64px 0 40px; } | ||
| .hero h1 { font-size: 40px; line-height: 1.3; letter-spacing: .5px; } | ||
| .hero h1 em { font-style: normal; color: var(--teal); } | ||
| .hero p.lead { margin-top: 16px; font-size: 18px; color: var(--sub); max-width: 720px; } | ||
| .badges { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; } | ||
| .badge { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; } | ||
| .badge b { font-size: 22px; color: var(--teal-dark); } | ||
| .badge small { display: block; color: var(--sub); font-size: 12.5px; } | ||
| section { padding: 36px 0; } | ||
| h2 { font-size: 24px; margin-bottom: 6px; } | ||
| .hint { color: var(--sub); font-size: 14.5px; margin-bottom: 18px; } | ||
| figure { margin: 10px 0 6px; } | ||
| figure img { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; } | ||
| figcaption { color: var(--sub); font-size: 13.5px; margin-top: 6px; } | ||
| .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } | ||
| .repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } | ||
| .repo { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: block; color: var(--ink); } | ||
| .repo:hover { border-color: var(--teal); text-decoration: none; } | ||
| .repo b { color: var(--teal-dark); } | ||
| .repo .score { float: right; font-weight: 700; color: var(--ink); } | ||
| .repo p { font-size: 13.5px; color: var(--sub); margin-top: 4px; } | ||
| .rule { border-left: 3px solid var(--teal); padding: 4px 14px; margin: 10px 0; color: var(--sub); } | ||
| footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 40px; color: var(--sub); font-size: 13.5px; } | ||
| @media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div class="wrap"> | ||
| <div class="logo">Ask<span>Claw</span></div> | ||
| <nav> | ||
| <a href="https://github.com/getaskclaw">GitHub</a> | ||
| <a href="en.html">English</a> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="wrap"> | ||
|
|
||
| <section class="hero"> | ||
| <h1><em>AMBER</em> — 琥珀式封存的<br>历史回放评测</h1> | ||
| <p class="lead">把真实、可审计的历史事件封进琥珀,精确还原到「答案揭晓之前」,让 AI 只用当时可得的信息重做一遍。评分标准在看到任何输出之前就已冻结。<b>题目永不公开,分数永远可查。</b></p> | ||
| <div class="badges"> | ||
| <div class="badge"><b>23 案 / 26 卷</b><small>私有题库,哈希封存</small></div> | ||
| <div class="badge"><b>11 个成绩仓</b><small>按厂商 × 端点分仓</small></div> | ||
| <div class="badge"><b>每周更新</b><small>同库、同档、公开哈希索引</small></div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>当前总榜</h2> | ||
| <p class="hint">同档(high)、同 23 案、同公开哈希索引。五个名次档,并列如实标注。</p> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| <figure> | ||
| <img src="assets/top5-2026-w38.png" alt="AMBER 当前总榜:五个名次档(2026-W38,全库 23 案)"> | ||
| <figcaption>2026-W38 · 榜首 swe-2-max @ Devin 18/23;#2 并列五席 17/23。</figcaption> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>同分 ≠ 同款</h2> | ||
| <p class="hint">九轴完成度矩阵:每格 = 该面全部案子的钉级完成度。同分的几家,形状完全不同——总分看不见的东西,矩阵看得见。</p> | ||
| <figure> | ||
| <img src="assets/completion-matrix-7way.png" alt="九轴完成度矩阵"> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| <figcaption>五家 17/23 + doubao 16/23 + gp27b 14/23,九轴同场。</figcaption> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>分数凭什么可信</h2> | ||
| <p class="hint">每期成绩像一场考试:出卷封存、净室应考、逐卷验脑、脱敏发布、人人可核对。</p> | ||
| <figure> | ||
| <img src="assets/trust-chain.png" alt="一期成绩怎么炼成"> | ||
| </figure> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>三个反直觉发现</h2> | ||
| <p class="hint">都有边界,都只代表已测家族——原文里每条都标着反例。</p> | ||
| <figure> | ||
| <img src="assets/effort-curves-20260911.png" alt="effort 曲线"> | ||
| <figcaption>「想更久 ≠ 考更好」:多数家族高档反噬,swe-2 单调到底。</figcaption> | ||
| </figure> | ||
| <div> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Bare wrapping two figures should be class="grid2" (the .grid2 rule on L34/L43 is otherwise dead CSS); same at en.html L102.
|
||
| <figure> | ||
| <img src="assets/score-vs-tokens-2026-w37.png" alt="分数 × 思考预算"> | ||
| <figcaption>同档同库,输出 token 账单跨 17 倍,分差不过一案。</figcaption> | ||
| </figure> | ||
| <figure> | ||
| <img src="assets/wallclock-strip-2026-w37.png" alt="逐题耗时"> | ||
| <figcaption>厂商的高 TPS 只在简单题上成立;难题想得多,吐字当场变慢。</figcaption> | ||
| </figure> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>成绩仓</h2> | ||
| <p class="hint">每条车道(模型 × 端点 × 档位)一个仓,每期一篇矩阵,验脑记录与哈希对照齐全。</p> | ||
| <div class="repos"> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber"><b>amber</b><span class="score">规范</span><p>方法规范 + 公开哈希索引 + 跨仓周榜</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-devin"><b>amber-devin</b><span class="score">18/23</span><p>swe-2-max @ Devin — 当前榜首</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-kimi"><b>amber-kimi</b><span class="score">17/23</span><p>k3 @ Kimi 官方 coding 端点 + K2.8 对决</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-ollama"><b>amber-ollama</b><span class="score">17/23</span><p>glm-5.3-flash / d41f @ Ollama Cloud</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-commandcode"><b>amber-commandcode</b><span class="score">17/23</span><p>d41f @ CommandCode — 五档天梯</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-workbuddy"><b>amber-workbuddy</b><span class="score">17/23</span><p>hy4-preview-f @ WorkBuddy ACP</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-gpt"><b>amber-gpt</b><span class="score">16/23</span><p>gpt-6-astra / gpt-5.6 系 @ OpenAI Codex</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-crof"><b>amber-crof</b><span class="score">16/23</span><p>qwen3.8-27b @ CrofAI — $1.15 性价比之王</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-deepseek"><b>amber-deepseek</b><span class="score">16/23</span><p>deepseek-flash @ DeepSeek 官方</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-opencode"><b>amber-opencode</b><span class="score">16/23</span><p>deepseek-flash @ OpenCode Go</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-doubao"><b>amber-doubao</b><span class="score">16/23</span><p>doubao-seed-evolving @ 火山方舟 Agent Plan</p></a> | ||
| <a class="repo" href="https://github.com/getaskclaw/amber-goldenpotato"><b>amber-goldenpotato</b><span class="score">14/23</span><p>Qwen3.8-27B @ 社区自部署(3×V100)</p></a> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>规则</h2> | ||
| <div class="rule">私有面永不公开:题库、oracle、transcript、内部案号与变体名。</div> | ||
| <div class="rule">公开面永远可查:分数、聚合、裁决、哈希索引——任何人都能核对题集没换、分数可对。</div> | ||
| <div class="rule">历史结果是证据,不是唯一正解;运行时密封 ≠ 训练数据纯净——这两条警告印在每期成绩上。</div> | ||
| <p class="hint" style="margin-top:14px">方法全文:<a href="https://github.com/getaskclaw/amber/blob/main/AMBER-Core-Specification.md">AMBER Core Specification</a> · <a href="https://github.com/getaskclaw/amber/blob/main/hash-index/v2026-09.md">公开哈希索引</a> · <a href="https://github.com/getaskclaw/amber/blob/main/PLAN.md">路线图</a></p> | ||
| </section> | ||
|
|
||
| </div> | ||
|
|
||
| <footer> | ||
| <div class="wrap"> | ||
| AskClaw · AMBER 成绩每周更新 · <a href="https://github.com/getaskclaw">github.com/getaskclaw</a> | ||
| </div> | ||
| </footer> | ||
|
|
||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
36 lines of CSS are duplicated verbatim from index.html; extract to assets/site.css so the two pages cannot drift.