:root { color-scheme: light dark; --ok: #1a7f37; --bad: #b42318; --muted: #6b7280; }
body { font: 15px/1.5 system-ui, sans-serif; margin: 0; padding: 0 16px 32px; max-width: 60rem; margin-inline: auto; }
header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #8884; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid #8883; }
.up { color: var(--ok); } .down { color: var(--bad); } .muted { color: var(--muted); }
form { display: grid; gap: .75rem; max-width: 22rem; margin-top: 2rem; }
@media (max-width: 40rem) { th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { display: none; } }