:root { color-scheme: light dark; --bg: #fff; --fg: #1a2233; --muted: #566078; --line: #d5dae4; --banner-bg: #fff4e0; --banner-fg: #6b3d00; --up: #14633a; --down: #a3201c; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f1420; --fg: #e8ecf5; --muted: #a2adc4; --line: #2b3550; --banner-bg: #3a2a0c; --banner-fg: #ffd9a0; --up: #6fd29a; --down: #ff8f8a; } }
body { margin: 0 auto; max-width: 44rem; padding: 1.5rem 1rem 3rem; background: var(--bg); color: var(--fg); font: 1rem/1.5 system-ui, sans-serif; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .25rem; }
p { margin: .25rem 0 1rem; }
.banner { background: var(--banner-bg); color: var(--banner-fg); border: 1px solid var(--banner-fg); border-radius: .4rem; padding: .6rem .9rem; font-weight: 600; margin-bottom: 1.25rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th[scope="col"] { color: var(--muted); font-size: .85rem; font-weight: 600; }
.up { color: var(--up); font-weight: 600; }
.down { color: var(--down); font-weight: 600; }
.muted { color: var(--muted); }