:root { --bg:#fbfbf9; --fg:#1d1d1b; --muted:#6b6b66; --line:#e3e3de; --accent:#1f5fa8; --pos:#2a7a3f; --neg:#b3382c; --card:#ffffff; }
@media (prefers-color-scheme: dark) { :root { --bg:#161715; --fg:#ececea; --muted:#9a9a94; --line:#2d2e2b; --accent:#7eb3f0; --pos:#6fce85; --neg:#f08a7e; --card:#1e1f1c; } }
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
header.site { border-bottom:1px solid var(--line); background:var(--card); }
header.site .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:18px; min-height:54px; }
.brand { font-weight:700; letter-spacing:.02em; text-decoration:none; color:var(--fg); }
nav.project { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
nav.project a { text-decoration:none; color:var(--muted); }
nav.project a.pname { color:var(--accent); font-weight:600; }
nav.project a:hover { color:var(--fg); }
main { padding: 24px 20px 48px; }
footer { color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding:18px 20px; }
a { color: var(--accent); }
h1 { font-size: 30px; margin: 0 0 6px; letter-spacing:-.01em; }
h2 { font-size: 19px; margin: 28px 0 10px; }
.hero { padding: 8px 0 12px; }
.hero.compact { padding-bottom: 0; }
.lede { font-size: 17px; color: var(--muted); margin: 0 0 10px; max-width: 70ch; }
.muted { color: var(--muted); }
.stats { list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:12px; }
.stats li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 16px; min-width:150px; }
.stats strong { display:block; font-size:22px; }
.stats span { color:var(--muted); font-size:13px; }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; text-decoration:none; color:inherit; }
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 4px 0; }
.badge { display:inline-block; font-size:11px; font-weight:600; padding:1px 7px; border-radius:10px; border:1px solid var(--line); color:var(--muted); vertical-align:middle; text-transform:uppercase; letter-spacing:.04em; }
.badge-beta, .badge-live, .badge-ok { border-color: var(--pos); color: var(--pos); }
.badge-error { border-color: var(--neg); color: var(--neg); }
.badge-prelim, .badge-running, .badge-no_change { border-color: var(--muted); }
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--card); }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
table.data th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--bg); position: sticky; top: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td small { display:block; color: var(--muted); font-size: 11px; }
table.data td small.pos { color: var(--pos); }
table.data td small.neg { color: var(--neg); }
tr.muted td { color: var(--muted); }
code { font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.error { text-align:center; padding: 60px 0; }
.error h1 { font-size: 64px; color: var(--muted); }