:root { --ink:#1b1b1b; --dim:#666; --line:#ddd; --bg:#fafaf8; --card:#fff; --accent:#1f4e79; --up:#2a7a2a; --down:#a33; --lag:#bbb; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
header.top { display:flex; align-items:center; gap:1.5rem; padding:.6rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:600; color:var(--accent); text-decoration:none; }
nav { display:flex; gap:1rem; flex-wrap:wrap; }
nav a { color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
nav a:hover { border-bottom-color:var(--accent); }
.who { margin-left:auto; display:flex; gap:.8rem; align-items:center; color:var(--dim); }
.who form { margin:0; }
main { max-width: 1100px; margin: 0 auto; padding: 1.2rem; }
footer { max-width:1100px; margin:2rem auto; padding:0 1.2rem; color:var(--dim); font-size:.85rem; }
h1 { font-size:1.5rem; margin:.4rem 0 .8rem; }
h2 { font-size:1.1rem; margin:1.2rem 0 .4rem; }
a { color: var(--accent); }
.lead { max-width: 70ch; color:#333; }
.dim { color:var(--dim); }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1rem 1.2rem; margin-bottom:1rem; }
.card.muted { background:transparent; }
dl.meta { display:grid; grid-template-columns: max-content 1fr; gap:.25rem 1rem; margin:.6rem 0; }
dl.meta dt { color:var(--dim); }
dl.meta dd { margin:0; }
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; background:var(--card); }
th, td { padding:.4rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.92rem; }
th { color:var(--dim); font-weight:500; }
td.r, th.r { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
td.topics span { display:block; }
td.up { color:var(--up); } td.down { color:var(--down); }
svg.spark { color:var(--accent); display:block; }
svg.bars .bar { fill:var(--accent); } svg.bars .bar.lag { fill:var(--lag); }
svg.bars .grid { stroke:var(--line); } svg.bars .tick { fill:var(--dim); font-size:11px; }
.cols { display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
ol.works li { margin-bottom:.4rem; }
.login { max-width: 22rem; margin: 3rem auto; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1.2rem 1.5rem; }
.login label { display:block; margin:.6rem 0; }
.login input { display:block; width:100%; padding:.45rem .5rem; margin-top:.2rem; border:1px solid #bbb; border-radius:4px; font-size:1rem; }
button { padding:.45rem .9rem; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:4px; cursor:pointer; font-size:.95rem; }
.who button { background:transparent; color:var(--accent); padding:.2rem .6rem; }
.error { color:var(--down); }
.notice { background:#fff6d6; border:1px solid #e8d48a; padding:.6rem .8rem; border-radius:4px; }
code { background:#eee; padding:.1rem .3rem; border-radius:3px; }
.crumbs { color:var(--dim); margin:0; }