:root { color-scheme: light; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.status-dot { width: .8rem; height: .8rem; border-radius: 999px; background:#a0a4a4; box-shadow:0 0 0 6px #a0a4a422; }
.status-dot.up { background:#18a66a; box-shadow:0 0 0 6px #18a66a20; }
.status-dot.degraded { background:#e59b19; box-shadow:0 0 0 6px #e59b1920; }
.status-dot.down { background:#ff3b3b; box-shadow:0 0 0 6px #ff3b3b20; }
.state-label { font-size:.8rem; font-weight:800; }
.state-label.up { color:#087f4d; } .state-label.slow { color:#ad6b00; } .state-label.down { color:#d72c2c; } .state-label.unknown { color:#777; }
.history { display:grid; gap:3px; height:34px; }
.day { background:#d4d6d4; border-radius:2px; }
.day.up { background:#24ae70; } .day.partial { background:#e5a02b; } .day.down { background:#ff4b4b; }
.day:hover { outline:2px solid #111313; outline-offset:1px; }
@media (max-width:500px){ .history{gap:2px;height:28px;} }