:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  background: #f1f4ff;
  color: #172248;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; }
main { width: min(100%, 640px); background: #fff; padding: clamp(24px, 7vw, 52px); border-radius: 26px; box-shadow: 0 18px 52px #263a841c; }
.brand { margin: 0; color: #1131de; font-size: .85rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: .45rem 0 1.2rem; font-size: clamp(1.8rem, 6vw, 2.65rem); line-height: 1.1; letter-spacing: -.035em; }
.summary { display: inline-flex; align-items: center; gap: .55em; margin: 0; padding: .42rem .7rem; border-radius: 9px; background: #eef1fd; font-weight: 650; }
.summary::before { content: ''; width: .55em; height: .55em; background: currentColor; border-radius: 50%; }
[data-state="up"] { color: #08704e; }
[data-state="down"] { color: #a43038; }
[data-state="pending"] { color: #465483; }
.summary[data-state="up"] { background: #e5f6ee; }
.summary[data-state="down"] { background: #fbecee; }
.timestamp { margin: 1.15rem 0 0; font-size: .85rem; color: #566282; }