:root { --fg:#111; --muted:#6b7280; --line:#e5e7eb; --bg:#fff; }
*{box-sizing:border-box}

html,body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.wrap{ 
  max-width:900px;
  margin:0 auto;
  padding:16px;
}

h1 {
  margin:0 0 6px;
  font-size:24px;
}

.meta{
  color:var(--muted);
  font-size:14px;
  margin-bottom:12px
}

.pill {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#0f172a;
  font-size:12px;
}

.row p {
  margin:4px 0;
}

code{
  background:#f6f8fa;
  padding:2px 6px;
  border-radius:6px;
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin-top:14px;
}

.card {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background-color: #111;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  max-width: 700px;
  margin-bottom: 30px;
}

.plot-card {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background-color: #111;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  max-width: 700px;
  margin-bottom: 30px;
  margin: auto;
}

.label {
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}

.value {
  font-size:28px;
  font-variant-numeric:tabular-nums;
}

.other {
  margin-top:12px;
}

.small {
  color:var(--muted);
  font-size:12px;
}

ul.compact {
  margin:6px 0 0;
  padding-left:18px}
ul.compact li{margin:2px 0;font-variant-numeric:tabular-nums}

canvas {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 456px;
}

#stats {
  border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 24px;
  margin: 20px auto;
  text-align: left;
  width: 500px;
  padding-left: 0;
  padding-right: 0;
}

#stats td {
  border: 1px solid #ddd;
}

#stats tr:nth-child(even) {
  background-color: #e9e9e9;
}

#stats tr:hover {
  background-color: #bbb;
}

@media (prefers-color-scheme: dark){
  :root{--bg:#0b0b0b;--fg:#fafafa;--line:#262626;--muted:#a3a3a3}
  .card{background:#111;box-shadow:0 1px 2px rgba(0,0,0,.25)}
  .pill{background:#0f172a;color:#e2e8f0}
  code{background:#111}
}