style.css

:root{
  --bg:#fbfbfa; --fg:#14161a; --fg2:#4a5058; --rule:#e2e5ea; --card:#fff;
  --accent:#8a6a1f; --accent-bg:#f7f0dd;
  --warn:#9c5a2a; --warn-bg:#fbeee3;
  --ok:#2f6d57; --tie:#6b7480;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0d0f13; --fg:#e8eaee; --fg2:#a6adb8; --rule:#242a33; --card:#141920;
  --accent:#d9b45c; --accent-bg:#241f10;
  --warn:#e0a071; --warn-bg:#2a1d13;
  --ok:#6bbd9b; --tie:#8d95a1;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:900px;margin:0 auto;padding:48px 22px 80px}
header{border-bottom:2px solid var(--fg);padding-bottom:20px;margin-bottom:28px}
.eyebrow{font:500 11.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
h1{font-size:clamp(34px,6vw,52px);margin:0 0 8px;letter-spacing:-.025em;font-weight:640}
.sub{color:var(--fg2);margin:0;font-size:18px}

.alert{background:var(--warn-bg);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;
  padding:20px 22px;margin:0 0 32px}
.alert h2{margin:0 0 10px;font-size:19px;color:var(--warn)}
.alert p{margin:0 0 10px;font-size:14.5px;color:var(--fg2);max-width:70ch}
.alert p:last-child{margin-bottom:0}
.alert .do{color:var(--fg)}

table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  background:var(--card);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
th{text-align:left;font:500 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tie);padding:12px 12px;border-bottom:1px solid var(--rule)}
td{padding:11px 12px;border-bottom:1px solid var(--rule);font-size:13.5px}
tbody tr:last-child td{border-bottom:0}
tr.unresolved{background:transparent}
td.d{font-weight:600}
td.n,td.sc,td.ci-t,td.tie{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:nowrap}
td.sc{font-weight:600}
td.ci-t,td.tie{color:var(--fg2)}
tr.unresolved td.tie{color:var(--warn);font-weight:600}

.bar{position:relative;height:9px;background:var(--rule);border-radius:5px;min-width:130px}
.ci{position:absolute;top:0;height:9px;background:var(--accent);opacity:.32;border-radius:5px}
.pt{position:absolute;top:-2px;width:2px;height:13px;background:var(--accent)}

section{margin-top:44px}
h3{font-size:15.5px;margin:28px 0 8px;font-weight:640}
p{color:var(--fg2);max-width:70ch;font-size:14.5px}
pre{background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:14px 16px;
  overflow-x:auto;font:12.5px/1.7 ui-monospace,Menlo,monospace;color:var(--fg)}
a{color:var(--accent)}
footer{margin-top:52px;padding-top:20px;border-top:1px solid var(--rule)}
footer p{font-size:13px;color:var(--tie)}

.sys{background:var(--card);border:1px solid var(--rule);border-radius:6px;
  padding:20px 22px;margin:38px 0 0}
.sys h3{margin:0 0 8px;font-size:16px}
.sys h3:not(:first-child){margin-top:26px}
.sys p{font-size:14px;margin:0 0 12px}
table.mini{margin:12px 0 14px;font-size:13px}
table.mini th{padding:9px 10px;font-size:10px}
table.mini td{padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
table.mini td:first-child{font-family:inherit;font-size:13.5px}
tr.tot td{border-top:2px solid var(--rule);background:var(--accent-bg)}
.pos{color:var(--ok)} .neg{color:var(--warn)}