/* humanoidmetric.com — professional FLAT theme (no gradients). ============================================================================ THEMING CONTRACT — read before adding a rule ============================================================================ Every colour the site renders is declared exactly once, here, as a `light-dark(, )` pair. Below this block there is not a single colour literal: rules reference tokens, and nothing else. That is the whole design. Two consequences worth stating, because both are easy to undo by accident: 1. **No rule may contain a literal colour.** Not a hex, not an rgba(), not `white`. A literal is a value that exists in one theme and is wrong in the other, and it will look perfectly fine to whoever adds it — they are only ever looking at one theme at a time. If a rule needs a colour that isn't here, the fix is a new token, not a literal. 2. **Tints are derived, never declared.** A status chip's fill used to be `rgba(52,211,153,.13)` — a translucent green that assumed a dark surface underneath. On white it turned into a pale wash with no contrast. They are now `color-mix(… var(--good) 14%, var(--panel))`, which mixes toward whatever the current surface actually is. One declaration, correct on both themes, and it stays correct if the panel colour ever moves. Switching is `color-scheme`, nothing more: `light-dark()` reads it, so the toggle sets one property on and every token flips. `:root` declares `light dark`, which means with JavaScript off the OS preference is honoured and the site is fully themed anyway — the toggle is an override, not the mechanism. Requires `light-dark()` and `color-mix()` (Baseline: Chrome 123, Safari 17.5, Firefox 120 — widely available since 2024). ============================================================================ */ :root{ color-scheme:light dark; /* -- surfaces, back to front -- */ --bg: light-dark(#f6f8fc, #0b0f1a); --bg2: light-dark(#eef2f9, #0d1320); --panel: light-dark(#ffffff, #111827); --panel2: light-dark(#f2f6fc, #161f33); --panel3: light-dark(#e4ebf6, #1c2740); --line: light-dark(#dfe6f1, #1f2a40); --line2: light-dark(#c5d2e6, #2a3a5a); /* -- text -- */ --txt: light-dark(#0f1729, #eef2fb); --mut: light-dark(#4d5d78, #9fb0cc); --mut2: light-dark(#6b7c9c, #6b7c9c); /* -- brand and semantics -- The light values are darkened rather than reused: #5b8cff on white is 3.1:1, under the 4.5:1 body-text floor, and these are used as text colours on chips and figures, not just as fills. */ --accent: light-dark(#2c5fe0, #5b8cff); --accent2: light-dark(#7338d4, #9b6bff); --cyan: light-dark(#0e7f97, #22d3ee); --good: light-dark(#04795c, #34d399); --warn: light-dark(#9a6206, #fbbf24); --bad: light-dark(#d01b45, #fb7185); /* -- warm accent streaks. DECORATIVE ONLY: never use these to mean anything. `--bad` is the semantic red and already reads as "error" on chips and deltas; if a streak reused it, a purely ornamental hairline would start looking like a failure state. Two separate tokens keep the decoration and the semantics from being confused for each other. Light values are darkened for the same reason the brand ramp is — a streak sits against a white page and has to keep its edge. -- */ --ember: light-dark(#c2410c, #fb923c); --flare: light-dark(#be123c, #fb7185); /* -- medals. Deliberately theme-independent: the plate is a light metal in both themes, so its label stays dark in both. -- */ --gold:#f5c451; --silver:#c3ccda; --bronze:#cd8a52; --on-medal:#33240a; /* -- text that sits on a filled accent surface -- */ --on-accent:#ffffff; /* -- flat faceted-robot palette (solid fills only — implies 3D via planar shading). The light ramp is pulled darker so the silhouette keeps its edge against a white page; on dark it is unchanged. -- */ --f1: light-dark(#aab6cd, #c6cfe2); --f2: light-dark(#8b99b5, #9aa7c0); --f3: light-dark(#6e7d9b, #7b89a6); --f4: light-dark(#55647f, #5c6a86); --f5: light-dark(#3f4c65, #45516b); --f6: light-dark(#2a3a5a, #2a3a5a); --visor:#0c111d; --spec:#eafcff; /* specular glint inside the visor */ --art-contact:light-dark(#1b2740, #000000); /* contact shadow under the art */ /* -- effects. A shadow tuned for a dark page is invisible on a light one, and one tuned for light is a smear on dark. light-dark() resolves to a *colour*, so only the colours go through it and the geometry is composed around them. Passing the whole two-layer box-shadow to light-dark() parses as four arguments to a function that takes two, which is invalid — and invalid resolves to `none` rather than to an error, so every card on the site loses its shadow and nothing says why. -- */ --shadow-near: light-dark(rgb(15 23 41 / .07), rgb(0 0 0 / .4)); --shadow-far: light-dark(rgb(15 23 41 / .08), rgb(0 0 0 / .3)); --shadow: 0 1px 2px var(--shadow-near), 0 10px 30px var(--shadow-far); --art-shadow: light-dark(rgb(15 23 41 / .18), rgb(0 0 0 / .45)); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* An explicit choice overrides the OS preference. Set by the inline script in base.html before first paint, so a light-theme user never sees a dark flash (and vice versa). */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"] {color-scheme:dark} *{box-sizing:border-box} html,body{margin:0;background:var(--bg);scroll-behavior:smooth} body{ color:var(--txt); background:var(--bg); font:14px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; -webkit-font-smoothing:antialiased;min-height:100vh; } a{color:var(--accent);text-decoration:none} a:hover{color:color-mix(in srgb,var(--accent) 75%,var(--txt))} ::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)} .wrap{max-width:1280px;margin:0 auto;padding:22px 24px 90px} /* ---------- header / nav ---------- */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0} .brand{display:flex;align-items:center;gap:13px} .logo{width:46px;height:46px;border-radius:13px;background:var(--panel2);border:1px solid var(--line2); display:grid;place-items:center;overflow:hidden} .logo svg{width:30px;height:30px;display:block} .brand .bname{display:block;font-size:18px;margin:0;font-weight:700;letter-spacing:.2px} .brand .sub{font-size:11.5px;color:var(--mut);margin-top:1px} nav.mainnav{display:flex;flex-wrap:wrap;gap:2px;margin:16px 0 26px;border-bottom:1px solid var(--line);padding-bottom:0} nav.mainnav a{padding:10px 15px;color:var(--mut);font-weight:600;font-size:13px;border-bottom:2px solid transparent} nav.mainnav a:hover{color:var(--txt)} nav.mainnav a.on{color:var(--txt);border-color:var(--accent)} nav.mainnav .spring{flex:1} .badge-ver{font-size:11px;color:var(--mut2);border:1px solid var(--line2);border-radius:999px;padding:5px 11px;font-family:var(--mono)} /* ---------- theme toggle ---------- */ .topbar-end{display:flex;align-items:center;gap:10px;flex-shrink:0} .theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px; border:1px solid var(--line2);background:var(--panel2);color:var(--mut);font:inherit;font-size:12px; font-weight:650;cursor:pointer;line-height:1} .theme-toggle:hover{color:var(--txt);border-color:var(--accent)} .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* The button shows the theme you'd get by pressing it — the sun while dark, the moon while light — and which one that is comes from `hidden` on the wrapper span, set by the script. `:not([hidden])` is load-bearing: a bare `display:block` would override the browser's own `[hidden]{display:none}` and re-show the icon that is supposed to be off. */ .theme-toggle .ic:not([hidden]){display:block} .theme-toggle .ic svg{width:15px;height:15px;display:block} @media(max-width:560px){.theme-toggle .lbl{display:none}.theme-toggle{padding:7px 9px}} .searchbox{margin:10px 0} .searchbox input{width:220px;max-width:100%;padding:8px 12px;border-radius:10px;border:1px solid var(--line2); background:var(--panel2);color:var(--txt);font-size:13px} .searchbox input::placeholder{color:var(--mut2)} .searchbox input:focus{outline:none;border-color:var(--accent)} @media(max-width:720px){.searchbox input{width:160px}} /* ---------- hero ---------- */ .hero{padding:34px 0 12px;position:relative} .hero-band{display:grid;grid-template-columns:1.12fr .88fr;gap:34px;align-items:center;padding:30px 0 14px} .hero h1,.hero h2{font-size:42px;line-height:1.1;margin:0 0 14px;font-weight:800;letter-spacing:-.5px;max-width:880px} .hero h1 .grad,.hero h2 .grad{color:var(--accent)} .hero p.lede{font-size:16px;color:var(--mut);max-width:680px;margin:0 0 24px} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.8px; text-transform:uppercase;color:var(--cyan);border:1px solid var(--line2);background:var(--panel); border-radius:999px;padding:5px 12px;margin-bottom:18px} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan)} .cta-row{display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;font-weight:650;font-size:13.5px;cursor:pointer;border:1px solid var(--line2);background:var(--panel2);color:var(--txt)} .btn:hover{border-color:var(--accent);color:var(--txt)} .btn.primary{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent)} .btn.primary:hover{background:color-mix(in srgb,var(--accent) 84%,var(--txt));border-color:color-mix(in srgb,var(--accent) 84%,var(--txt))} .btn.disabled{opacity:.35;cursor:default;pointer-events:none} .pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0} /* ---------- 3D robot face (flat planar SVG) ---------- */ .hero-art{display:grid;place-items:center;position:relative} .robot-3d{width:100%;max-width:440px;height:auto;display:block;filter:drop-shadow(0 22px 40px var(--art-shadow))} /* ---------- stat strip ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0} .stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px} .stat .n{font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--accent)} .stat .l{font-size:12px;color:var(--mut);margin-top:3px;text-transform:uppercase;letter-spacing:.6px} /* ---------- cards / sections ---------- */ .section-h{display:flex;align-items:baseline;justify-content:space-between;margin:42px 0 16px} .section-h h1,.section-h h2,.section-h h3{font-size:22px;margin:0;font-weight:750;letter-spacing:-.3px} .section-h .more{font-size:13px;color:var(--mut)} .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)} /* ---------- leaderboard table ---------- */ .lb{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px} .lb thead th{text-align:left;color:var(--mut2);font-size:11px;text-transform:uppercase;letter-spacing:.7px; font-weight:700;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel)} .lb thead th.num{text-align:right} .lb tbody td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle} .lb tbody tr:hover{background:var(--panel2)} .lb tbody tr:last-child td{border-bottom:none} .lb td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .rank{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;font-weight:800;font-size:13px; background:var(--panel3);color:var(--mut)} .rank.r1{background:var(--gold);color:var(--on-medal)} .rank.r2{background:var(--silver);color:var(--on-medal)} .rank.r3{background:var(--bronze);color:var(--on-medal)} .rname{display:flex;flex-direction:column;gap:2px} .rname .nm{font-weight:700;color:var(--txt);font-size:14px} .rname .co{font-size:11.5px;color:var(--mut)} .flag{font-size:13px;margin-right:5px} /* HMX score pill */ .xhi{display:inline-flex;align-items:center;gap:9px} .xhi .v{font-family:var(--mono);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;min-width:46px;text-align:right} .xhi .bar{width:74px;height:7px;border-radius:6px;background:var(--panel3);overflow:hidden} .xhi .bar i{display:block;height:100%;border-radius:6px;background:var(--accent)} /* status chips */ .chip{display:inline-block;font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;border:1px solid transparent;white-space:nowrap;letter-spacing:.2px} .chip.commercial{background:color-mix(in srgb,var(--good) 14%,var(--panel));color:var(--good);border-color:color-mix(in srgb,var(--good) 38%,var(--panel))} .chip.limited-production{background:color-mix(in srgb,var(--cyan) 14%,var(--panel));color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 38%,var(--panel))} .chip.pilot{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,var(--panel))} .chip.prototype{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn);border-color:color-mix(in srgb,var(--warn) 38%,var(--panel))} .chip.research{background:color-mix(in srgb,var(--accent2) 14%,var(--panel));color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 38%,var(--panel))} .chip.retired{background:color-mix(in srgb,var(--mut2) 12%,var(--panel));color:var(--mut);border-color:var(--line2)} .chip.teleoperated{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,var(--panel))} .chip.sm{font-size:10px;padding:3px 7px} .conf{font-size:10.5px;font-family:var(--mono);color:var(--mut2)} .conf.high{color:var(--good)} .conf.medium{color:var(--warn)} .conf.low{color:var(--bad)} /* ---------- category leaderboard switcher ---------- */ .lb-cats{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px} .lb-cats a{text-decoration:none} /* Not `filter:brightness()`: brightening lifts a dark chip toward its text and a light chip toward the page it sits on, so the same rule reads as a hover on one theme and as the element disappearing on the other. A border does the same job in the same direction on both. */ .lb-cats a:hover{border-color:var(--accent);color:var(--txt)} .lb-cats a b{font-weight:700;opacity:.6;margin-left:3px;font-variant-numeric:tabular-nums} .lb-cats a[aria-current="page"]{box-shadow:0 0 0 1px var(--accent) inset} /* ---------- filters ---------- */ .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px} .filters select,.filters input{background:var(--panel);border:1px solid var(--line2);color:var(--txt); border-radius:9px;padding:9px 12px;font:inherit;font-size:13px} .filters label{font-size:11px;color:var(--mut2);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-right:3px} .filters input.numf{width:76px} /* ---------- robot detail ---------- */ .detail-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start; background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin-bottom:22px} .detail-photo{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px} .detail-photo img{width:132px;height:132px;object-fit:cover;border-radius:14px;border:1px solid var(--line2);background:var(--panel3)} .detail-photo .cred{font-size:10.5px;color:var(--mut2)} .detail-head h1,.detail-head h2{font-size:30px;margin:0 0 4px;font-weight:800;letter-spacing:-.4px} .detail-head .co{color:var(--mut);font-size:14px} .scorebox{text-align:center;min-width:150px} .scorebox .big{font-size:54px;font-weight:850;line-height:1;font-family:var(--mono);color:var(--accent)} .scorebox .lab{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;margin-top:6px} .scorebox .rk{font-size:13px;color:var(--mut);margin-top:7px} .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px} .grid2-even{display:grid;grid-template-columns:1fr 1fr;gap:20px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px} .panel h4{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:750} /* spec list */ .specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:11px;overflow:hidden} .specs .s{background:var(--panel);padding:11px 14px} .specs .s .k{font-size:11px;color:var(--mut2);text-transform:uppercase;letter-spacing:.4px} .specs .s .v{font-size:15px;font-weight:700;font-family:var(--mono);margin-top:2px} .specs .s .v.na{color:var(--mut2);font-weight:500;font-style:italic} /* company robot thumbnails */ .co-robots{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .co-robot{display:flex;flex-direction:column;align-items:center;width:66px;text-decoration:none} .co-robot img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line2);background:var(--panel3)} .co-robot .nm{font-size:10px;color:var(--mut);margin-top:5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:66px} .co-robot .sc{font-size:10px;color:var(--accent);font-family:var(--mono);font-weight:700} /* radar chart */ .radar-wrap{display:flex;justify-content:center;margin-bottom:6px} .radar{width:100%;max-width:280px;height:auto;display:block;overflow:visible} .radar-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:4px} .radar-legend .lg-item{display:inline-flex;align-items:center;gap:6px} .radar-legend i{display:inline-block;width:10px;height:10px;border-radius:3px} /* pillar bars */ .pillar{margin-bottom:14px} .pillar .top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px} .pillar .top .pl{color:var(--mut);font-weight:600} .pillar .top .pv{font-family:var(--mono);font-weight:750} .pillar .track{height:9px;border-radius:6px;background:var(--panel3);overflow:hidden} .pillar .track i{display:block;height:100%;border-radius:6px;background:var(--accent)} .pillar .wt{font-size:10px;color:var(--mut2);font-family:var(--mono)} ul.clean{list-style:none;margin:0;padding:0} ul.clean li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px} ul.clean li:last-child{border:none} .src a{font-size:12.5px;word-break:break-all} .notable{font-size:14px;line-height:1.65;color:var(--txt)} /* methodology */ .formula{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:18px 20px;font-family:var(--mono); font-size:14px;color:var(--cyan);overflow-x:auto;margin:16px 0} .weight-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px} .weight-table th,.weight-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)} .weight-table th{color:var(--mut2);font-size:11px;text-transform:uppercase;letter-spacing:.6px} .weight-table td.num{text-align:right;font-family:var(--mono)} .wbar{height:8px;border-radius:5px;background:var(--accent)} /* compare */ .cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px} .cmp th{text-align:left;padding:14px;border-bottom:2px solid var(--line2);font-size:14px;vertical-align:bottom} .cmp th.metric{color:var(--mut2);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700} .cmp td{padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-variant-numeric:tabular-nums} .cmp td.metric{font-family:inherit;color:var(--mut);font-weight:600} .cmp td.best{color:var(--good);font-weight:800} .cmp-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px} .cmp-pick select{background:var(--panel);border:1px solid var(--line2);color:var(--txt);border-radius:9px;padding:9px 12px;font:inherit} /* ---------- updates / review queue ---------- */ .prop{margin-bottom:16px} .prop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px} .prop-title{font-weight:700;font-size:15px;margin-left:8px} .prop-actions{display:flex;gap:8px;flex-shrink:0} .prop-actions form{margin:0} .btn.sm{padding:7px 14px;font-size:12.5px;border-radius:9px} .ct{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:7px} .ct-new{background:color-mix(in srgb,var(--good) 14%,var(--panel));color:var(--good)} .ct-upd{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent)} .ct-co{background:color-mix(in srgb,var(--accent2) 14%,var(--panel));color:var(--accent2)} table.diff{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0} table.diff th{text-align:left;color:var(--mut2);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 10px;border-bottom:1px solid var(--line)} table.diff td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top} table.diff td.k{font-family:var(--mono);color:var(--mut);font-size:12px;white-space:nowrap} table.diff td.old{color:var(--mut2);font-family:var(--mono)} table.diff td.new{color:var(--good);font-weight:650;font-family:var(--mono)} table.diff td.arr{color:var(--mut2);text-align:center;width:24px} table.diff .na{color:var(--mut2);font-style:italic} .newspecs{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--mut);margin:4px 0 8px} .newspecs b{color:var(--mut2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-right:4px} .prop-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px} .prop-foot .src-n{color:var(--mut2);text-transform:uppercase;font-size:10.5px;letter-spacing:.5px;font-weight:700} .prop-foot a{font-size:12px} /* ---------- validity report ---------- */ .prop.quarantined{border-color:color-mix(in srgb,var(--bad) 45%,var(--panel))} .vreport{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)} .vreport>summary{cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;list-style:none} .vreport>summary::-webkit-details-marker{display:none} .vreport>summary::before{content:"▸";color:var(--mut2);font-size:11px} .vreport[open]>summary::before{content:"▾"} .vreport[open]>summary{border-bottom:1px solid var(--line)} .vscore{font-family:var(--mono);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums} .vs-max{font-size:10.5px;font-weight:600;color:var(--mut2);margin-left:1px} .vverdict{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:7px} .vverdict.v-pass{background:color-mix(in srgb,var(--good) 14%,var(--panel));color:var(--good)} .vverdict.v-warn{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)} .vverdict.v-fail{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)} .vverdict.v-unknown{background:color-mix(in srgb,var(--mut2) 14%,var(--panel));color:var(--mut2)} .v-pass>summary .vscore{color:var(--good)} .v-warn>summary .vscore{color:var(--warn)} .v-fail>summary .vscore{color:var(--bad)} .v-unknown>summary .vscore{color:var(--mut2)} ul.vchecks{list-style:none;margin:0;padding:8px 12px 10px} .vc{display:flex;gap:9px;align-items:baseline;padding:4px 0;font-size:12.5px;line-height:1.5} .vc-i{font-family:var(--mono);font-weight:800;width:14px;flex-shrink:0;text-align:center} .vc-pass .vc-i{color:var(--good)} .vc-warn .vc-i{color:var(--warn)} .vc-fail .vc-i{color:var(--bad)} .vc-unknown .vc-i{color:var(--mut2)} .vc b{font-weight:650;white-space:nowrap} /* ---------- approval policy ---------- */ .policy{margin-top:10px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:10px;background:var(--panel2);font-size:12.5px} .pol-p{font-family:var(--mono);font-weight:800;font-size:14px;color:var(--accent2);margin-right:7px} .pol-ev{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .ev{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:6px;background:var(--panel3);color:var(--mut)} .ev-pos{color:var(--good)} .ev-neg{color:var(--bad)} .muted{color:var(--mut)} .small{font-size:12px} .note{background:color-mix(in srgb,var(--warn) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 30%,var(--panel));border-radius:11px;padding:13px 16px;font-size:13px;color:var(--mut);margin:14px 0} .note b{color:var(--warn)} footer{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);color:var(--mut2);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} /* ---------- hero robot: idle animation ---------- All of it is behind `prefers-reduced-motion: no-preference`, so the default for anyone who has asked their OS to reduce motion is the original static drawing — the animation is opt-out by the user's own setting, not by ours. Nothing here changes layout or colour: only `transform` and `opacity`, both compositor-friendly, so an idle loop on the landing page costs no layout work. `transform-box:fill-box` matters on the SVG groups. Without it a transform's origin resolves against the SVG's own viewBox rather than the element's bounding box, so `scaleY` on the eyes would pivot somewhere near the canvas corner and fling them off the face instead of closing them in place. */ @media (prefers-reduced-motion: no-preference){ .robot-3d .rb-float, .robot-3d .rb-eyes{transform-box:fill-box} /* Head and features drift; the backdrop rings and the contact shadow do not, which is what sells it as the head lifting rather than the whole image sliding. */ .robot-3d .rb-float{animation:rb-float 6s ease-in-out infinite} /* The shadow tightens as the head rises, on the same 6s clock so the two stay in phase. */ .robot-3d .rb-shadow{transform-box:fill-box; transform-origin:center; animation:rb-shadow 6s ease-in-out infinite} /* Blink. Long gap, very short close — a slow pulse reads as sleepy, and the eyes are the only part of this drawing a person actually looks at. */ .robot-3d .rb-eyes{transform-origin:center; animation:rb-blink 7s infinite} /* Antenna: a ring that expands and fades, and an LED that breathes. */ .robot-3d .rb-ping{transform-box:fill-box; transform-origin:center; animation:rb-ping 3.2s ease-out infinite} .robot-3d .rb-led{animation:rb-led 3.2s ease-in-out infinite} /* Ear indicators, offset so they alternate rather than pulse in unison. */ .robot-3d .rb-ear{animation:rb-ear 2.4s ease-in-out infinite} .robot-3d .rb-ear-r{animation-delay:1.2s} } @keyframes rb-float{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-6px)} } @keyframes rb-shadow{ 0%,100%{transform:scaleX(1); opacity:.28} 50% {transform:scaleX(.92); opacity:.18} } @keyframes rb-blink{ 0%,92%,100%{transform:scaleY(1)} 95% {transform:scaleY(.08)} } @keyframes rb-ping{ 0% {transform:scale(.85); opacity:.55} 70% {transform:scale(1.6); opacity:0} 100%{transform:scale(1.6); opacity:0} } @keyframes rb-led{ 0%,100%{opacity:1} 50% {opacity:.55} } @keyframes rb-ear{ 0%,100%{opacity:1} 50% {opacity:.35} } /* ---------- warm accent streaks ---------- Flat, per the no-gradients rule at the top of this file: each streak is one solid token fill, and the orange/red pairing comes from setting two plain bars side by side rather than from any blend. No gradient, no literal. Each pair spans the full content column: a long orange run, a short gap, then a red run to the edge. Sized in percentages rather than pixels so the split holds its proportions at any viewport width instead of the red segment swallowing the bar on narrow screens. All of it is non-semantic decoration carrying no information, so the whole block can be deleted without changing what any page means. */ /* Above the header. Anchored to .wrap, not the viewport, so it lines up with the content column instead of drifting to the screen edge on wide displays. */ .wrap{position:relative} .wrap::before,.wrap::after{ content:""; position:absolute; top:0; height:3px; border-radius:2px; pointer-events:none; } .wrap::before{left:24px; right:32%; background:var(--ember)} .wrap::after {left:70%; right:24px; background:var(--flare)} /* Under each section heading. `.section-h` is a baseline-aligned flex row; this adds only padding and two absolute children, so the row is untouched. */ .section-h{position:relative; padding-bottom:11px} .section-h::before,.section-h::after{ content:""; position:absolute; bottom:0; height:2px; border-radius:2px; } .section-h::before{left:0; right:28%; background:var(--ember)} .section-h::after {left:74%; right:0; background:var(--flare)} /* Forced-colours mode must not paint decoration over system colours. */ @media (forced-colors: active){ .wrap::before,.wrap::after,.section-h::before,.section-h::after{display:none} } @media(max-width:880px){ .stats{grid-template-columns:repeat(2,1fr)} .grid2,.grid2-even{grid-template-columns:1fr} .hero-band{grid-template-columns:1fr;gap:18px} .hero-art{order:-1} .robot-3d{max-width:300px} .hero h1,.hero h2{font-size:32px} .specs{grid-template-columns:1fr} .lb .hide-sm{display:none} } /* Robot profile links must remain operable with a keyboard. */ .lb a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px} .field-evidence{font-size:12px;color:var(--mut);margin-top:10px;overflow-wrap:anywhere} .field-evidence summary{cursor:pointer;color:var(--txt)} .field-evidence summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .field-evidence article{border-top:1px solid var(--line2);margin-top:12px;padding-top:8px} .field-evidence blockquote{margin:8px 0;padding-left:10px;border-left:2px solid var(--line2)} /* The shortlist stays in document flow so it never covers tables or controls. */ .shortlist[hidden], .shortlist [hidden], .shortlist-toggle[hidden]{display:none} .shortlist{margin-top:24px;border:1px solid var(--line2)} .shortlist-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .shortlist ul{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none} .shortlist li{display:flex;align-items:center;gap:8px;max-width:100%;overflow-wrap:anywhere} .shortlist-toggle{margin-top:5px;align-self:start} .shortlist-toggle[aria-pressed="true"]{border-color:var(--accent)} .shortlist button:focus-visible,.shortlist-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Keep requirements usable without horizontal page scrolling. */ .filters label { max-width: 100%; } .filters input, .filters select { max-width: 100%; box-sizing: border-box; } .lb thead th { z-index: 2; } @media (max-width: 600px) { .filters > label { flex: 1 1 100%; margin-right: 0; } .filters > label > input:not([type="checkbox"]), .filters > label > select { width: 100%; } } /* Preserve controls instead of overflowing narrow headers. */ .topbar { flex-wrap: wrap; } .topbar-end { margin-left: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--panel); padding: 12px; } .skip-link:focus { top: 12px; } .cmp-pick select { max-width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 600px) { .cmp-pick select { width: 100%; } } .table-wrap { max-width: 100%; overflow-x: auto; } /* Front-page newsroom. Shared tokens keep both colour schemes coherent. */ .robot-news{margin:38px 0 42px;border:1px solid var(--line2);border-radius:20px;background:var(--panel);overflow:hidden;scroll-margin-top:96px} .news-masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 30px 25px} .news-eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--cyan);display:flex;align-items:center;gap:8px;margin-bottom:9px} .news-mark{font-size:17px;letter-spacing:0} .news-masthead h2{font-size:34px;line-height:1.1;letter-spacing:-1.4px;margin:0;font-weight:800} .news-masthead h2>span{color:var(--cyan)} .news-masthead p{font-size:13px;color:var(--mut);margin:10px 0 0;line-height:1.6} .news-source-button{display:flex;align-items:center;gap:12px;flex-shrink:0;font-size:12px;font-weight:650;color:var(--txt);padding:11px 14px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2)} .news-source-button:hover{border-color:var(--cyan);color:var(--cyan)} .news-source-icon{font-size:20px;color:var(--cyan)} .news-toolbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 30px;background:var(--panel2)} .news-filters{display:flex;gap:21px;overflow-x:auto;scrollbar-width:thin;min-width:0} .news-filters button{appearance:none;white-space:nowrap;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--mut);font:inherit;font-size:12px;font-weight:650;padding:15px 0 13px;cursor:pointer} .news-filters button[aria-pressed="true"]{color:var(--cyan);border-bottom-color:var(--cyan)} .news-filters button:hover{color:var(--txt)} .news-edition{font-size:10px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums} .news-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:24px 30px 0} .news-story{padding:20px 0;border-bottom:1px solid var(--line);min-width:0} .news-story[hidden],.news-image[hidden]{display:none} .news-story:not(.news-featured){margin-left:24px} .news-story:nth-child(n+5){border-top:0} .news-story-topline{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:9px;font-size:10px} .news-topic{color:var(--cyan);font-weight:700;text-transform:uppercase;letter-spacing:.08em} .news-story time{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap} .news-story h3{margin:0;font-size:16px;font-weight:700;line-height:1.42;letter-spacing:-.25px} .news-story h3 a{color:var(--txt);text-decoration:none} .news-story h3 a:hover{color:var(--cyan)} .news-arrow{display:inline-block;margin-left:7px;font-weight:400;color:var(--mut2);font-size:15px} .news-byline{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px;font-size:10px;line-height:1.5} .news-publisher{font-weight:700;color:var(--txt)} .news-kind{color:var(--mut);border-left:1px solid var(--line2);padding-left:7px} .news-summary{color:var(--mut);font-size:13px;line-height:1.65;margin:12px 0 0} .news-featured{grid-column:span 2;grid-row:span 3;padding:0 26px 22px 0;margin-right:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .news-featured .news-image{height:255px;position:relative;background:var(--panel3);border-radius:10px;overflow:hidden;margin-bottom:20px} .news-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .news-featured:hover .news-image img{transform:scale(1.025)} .news-image>span{position:absolute;right:9px;bottom:8px;padding:4px 7px;border-radius:4px;font-size:9px;background:var(--panel);color:var(--mut)} .news-story:not(.news-featured) .news-image{display:none} .news-featured h3{font-size:29px;line-height:1.18;letter-spacing:-.9px;max-width:590px} .news-featured .news-summary{font-size:14px;max-width:540px} .news-featured .news-story-topline{justify-content:flex-start;margin-bottom:12px;gap:15px} .news-featured .news-byline{margin-top:18px;font-size:11px} .news-featured:not(:has(.news-image)){display:flex;align-items:center;min-height:360px} .news-featured:not(:has(.news-image)) h3{font-size:36px} .news-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 30px 24px} .news-bottom p{margin:0;color:var(--mut);font-size:11px} .news-bottom p>span[aria-hidden]{margin:0 6px;color:var(--line2)} .news-more{font:inherit;font-size:12px;font-weight:650;color:var(--txt);background:var(--panel);border:1px solid var(--line2);border-radius:7px;padding:9px 14px;cursor:pointer;white-space:nowrap} .news-more:hover{color:var(--cyan);border-color:var(--cyan)} .news-more span{margin-left:16px} .news-empty{padding:45px 30px;color:var(--mut);text-align:center} .news-sources{border-top:1px solid var(--line);background:var(--panel2);scroll-margin-top:100px} .news-sources summary{cursor:pointer;padding:17px 30px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;font-weight:650;list-style:none} .news-sources summary::-webkit-details-marker{display:none} .news-source-count{font-size:10px;font-weight:500;margin-left:6px;border:1px solid var(--line2);padding:2px 6px;border-radius:5px;color:var(--mut)} .news-coverage{font-size:10px;color:var(--mut);font-weight:400} .news-expand{font-size:19px;margin-left:20px;display:inline-block;vertical-align:middle} .news-sources[open] .news-expand{transform:rotate(45deg)} .news-source-note{font-size:12px;line-height:1.7;color:var(--mut);margin:0 30px 20px;max-width:850px} .news-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 25px;padding:0 30px 24px} .news-source-grid>a{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--txt);min-width:0} .news-source-number{font-size:10px;color:var(--mut2);font-variant-numeric:tabular-nums;align-self:flex-start;padding-top:3px} .news-source-grid strong{font-size:11px;font-weight:650;display:block} .news-source-grid small{font-size:9px;color:var(--mut);display:block;margin-top:3px} .news-source-grid>a>span:last-child{margin-left:auto;color:var(--mut2)} @media(min-width:801px){.news-stories[data-enhanced] .news-story:nth-child(2){padding-top:0}.news-stories[data-enhanced] .news-story:nth-child(n+5){padding:20px 16px;margin:0}.news-stories[data-enhanced] .news-story:nth-child(3n+5){border-right:1px solid var(--line);padding-left:0}.news-stories[data-enhanced] .news-story:nth-child(3n+6){border-right:1px solid var(--line)}.news-stories[data-enhanced] .news-story:nth-child(3n+7){padding-right:0}} @media(max-width:1000px){.news-edition{display:none}.news-featured h3{font-size:25px}.news-featured .news-image{height:230px}.news-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:800px){.news-masthead{padding:24px;align-items:flex-start}.news-masthead h2{font-size:30px}.news-source-button{font-size:10px;padding:8px;gap:6px}.news-toolbar{padding:0 24px}.news-filters{gap:19px}.news-stories{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 24px 0}.news-featured{grid-column:span 2;grid-row:auto;border-right:0;padding:0 0 22px}.news-featured .news-image{height:300px}.news-story:not(.news-featured){margin:0;padding:20px 14px 20px 0}.news-story:nth-child(odd):not(.news-featured){padding-left:14px;border-left:1px solid var(--line)}.news-bottom{padding:18px 24px}.news-sources summary{padding:17px 24px}.news-source-note{margin-left:24px;margin-right:24px}} @media(max-width:540px){.robot-news{border-radius:14px;margin:28px 0}.news-masthead{display:block;padding:22px 18px}.news-masthead h2{font-size:31px}.news-masthead p{font-size:12px}.news-source-button{display:inline-flex;margin-top:15px;padding:7px 11px;font-size:11px}.news-source-icon{font-size:16px}.news-toolbar{padding:0 18px}.news-filters{gap:18px}.news-filters button{font-size:11px;min-height:44px}.news-stories{display:block;padding:18px 18px 0}.news-featured .news-image{height:200px}.news-featured h3{font-size:25px}.news-featured:not(:has(.news-image)){min-height:0}.news-featured:not(:has(.news-image)) h3{font-size:27px}.news-story:not(.news-featured),.news-story:nth-child(odd):not(.news-featured){padding:18px 0;border-left:0}.news-story h3{font-size:17px}.news-featured h3{font-size:25px}.news-story .news-summary{font-size:12px}.news-bottom{padding:18px;align-items:flex-start}.news-bottom p{max-width:170px;font-size:10px;line-height:1.7}.news-more{font-size:11px;padding:9px 10px}.news-more span{margin-left:7px}.news-sources summary{padding:16px 18px;font-size:11px}.news-coverage{font-size:9px}.news-expand{margin-left:8px}.news-source-grid{grid-template-columns:1fr;padding:0 18px 20px}.news-source-note{margin-left:18px;margin-right:18px;font-size:11px}.news-eyebrow{font-size:9px}} @media(prefers-reduced-motion:reduce){.news-image img{transition:none}.news-featured:hover .news-image img{transform:none}} /* Written analysis on leaderboard and category pages (app/analysis.py). A measure of ~75 characters: the tables above run the full width, prose that did too would be a 180-character line nobody reads to the end. */ .analysis{margin:30px 0 8px} .analysis h3{font-size:16px;margin:22px 0 8px} .prose{max-width:760px} .prose p{line-height:1.65;margin:0 0 12px} .prose ul{margin:0 0 12px;padding-left:20px} .prose li{line-height:1.6;margin:0 0 8px} .faq h3,.faq h4{font-size:15px;margin:18px 0 6px} .faq p{color:var(--mut)}