:root { color-scheme: light dark; --bg: #0b0d10; --fg: #e8e8e8; --muted: #8a8f98; --cell: #15181d;
        --ok: #2fbf71; --warn: #e0a81c; --challenge: #f07c2a; --blocked: #d9433b; --unknown: #3a3f47; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }
.page { max-width: 1040px; margin: 0 auto; padding: 16px; }
.masthead h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: .02em; }
.masthead p { margin: 0 0 12px; color: var(--muted); }
.grid-scroll { overflow-x: auto; }
.grid { display: grid; grid-template-columns: repeat(100, 1fr); grid-template-rows: repeat(100, 1fr);
        width: 1000px; max-width: 100%; aspect-ratio: 1; background: var(--cell);
        background-image: linear-gradient(#1b1f26 1px, transparent 1px), linear-gradient(90deg, #1b1f26 1px, transparent 1px);
        background-size: 1% 1%; overflow: hidden; }
/* On a phone a block stays at least 5px wide and the grid scrolls sideways. */
@media (max-width: 540px) { .grid { width: 500px; max-width: none; } }
a.block { display: block; width: 100%; height: 100%; background: var(--unknown); }
a.block img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
a.block[data-colour="ok"] { background: var(--ok); }
a.block[data-colour="warn"] { background: var(--warn); }
a.block[data-colour="challenge"] { background: var(--challenge); }
a.block[data-colour="blocked"] { background: var(--blocked); }
a.block[data-colour="none"] { background: transparent; }
a.block[data-stale] { filter: saturate(.45); }
a.block[data-fresh] { animation: pulse 1.2s ease-in-out infinite; }
a.block[data-glow] { box-shadow: 0 0 6px 2px rgba(255, 255, 255, .7); z-index: 1; }
@keyframes pulse { 50% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { a.block[data-fresh] { animation: none; } }
.legend { margin: 10px 0; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: middle; }
.swatch.ok { background: var(--ok); } .swatch.warn { background: var(--warn); } .swatch.challenge { background: var(--challenge); }
.swatch.blocked { background: var(--blocked); } .swatch.unknown { background: var(--unknown); }
.ticker ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; border-top: 1px solid #1b1f26; }
.ticker li { padding: 4px 0; border-bottom: 1px solid #1b1f26; }
.ticker time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.stats dl { display: grid; grid-template-columns: repeat(6, auto); gap: 4px 16px; margin: 16px 0; color: var(--muted); }
.stats dd { margin: 0; color: var(--fg); font-weight: 600; }
.stats h2 { font-size: 16px; margin: 16px 0 4px; }