:root {
  color-scheme: light;
  --ink: #17202c;
  --muted: #748092;
  --line: #e5e9ef;
  --paper: #ffffff;
  --canvas: #f4f6f8;
  --green: #17865b;
  --green-soft: #e7f5ee;
  --amber: #a36b12;
  --amber-soft: #fff4dd;
  --red: #b84141;
  --red-soft: #fff0ef;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.page-shell {
  width: min(100% - 40px, 900px);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23, 32, 44, .08);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; letter-spacing: -.045em; }
.brand-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #182534;
  color: #fff;
  font-size: 15px;
  letter-spacing: -.04em;
}
.brand-light { color: #7c8998; font-weight: 550; }
.top-link { color: #5f6c7c; font-size: 13px; font-weight: 600; }
.top-link span { margin-left: 5px; color: #8993a0; }

main { flex: 1; }
.intro { padding: 72px 0 46px; }
.eyebrow, .section-kicker { color: #798596; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #48a77c; box-shadow: 0 0 0 4px rgba(72, 167, 124, .12); }
h1 { margin: 19px 0 10px; font-size: clamp(34px, 6vw, 48px); line-height: 1.06; letter-spacing: -.055em; }
.intro-copy { margin: 0; color: #697687; font-size: 15px; line-height: 1.6; }
.summary {
  width: fit-content;
  margin-top: 26px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #dce9e1;
  border-radius: 999px;
  background: #f0f8f3;
  color: #327653;
  font-size: 12px;
  font-weight: 650;
}
.summary[data-state="down"] { border-color: #f0dada; background: var(--red-soft); color: var(--red); }
.summary[data-state="degraded"] { border-color: #efe3c8; background: var(--amber-soft); color: var(--amber); }
.summary[data-state="unknown"] { border-color: var(--line); background: #fff; color: #667385; }
.summary-icon { font-size: 13px; }

.service-section { padding: 29px 0 72px; border-top: 1px solid rgba(23, 32, 44, .08); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 17px; }
.section-kicker { margin: 0 0 7px; font-size: 9px; }
h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.updated { color: #8993a0; font-size: 11px; text-align: right; }
.service-list { display: grid; gap: 10px; }
.service-card {
  min-height: 78px;
  padding: 17px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 2px 5px rgba(25, 39, 55, .025);
}
.service-main { min-width: 0; display: flex; align-items: center; gap: 13px; }
.service-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #f8f9fb;
  color: #687586;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -.02em;
}
.service-name { overflow: hidden; color: #202b38; font-size: 14px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.service-description { margin-top: 4px; color: #8893a0; font-size: 11px; }
.service-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
.response-time { color: #8a95a2; font-size: 11px; font-variant-numeric: tabular-nums; }
.badge { min-width: 91px; padding: 6px 9px; display: inline-flex; justify-content: center; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 700; }
.badge[data-state="disabled"] { background: #f0f2f5; color: #778292; }
.badge[data-state="unknown"] { background: #f0f2f5; color: #778292; }
.badge[data-state="down"] { background: var(--red-soft); color: var(--red); }
.badge[data-state="degraded"] { background: var(--amber-soft); color: var(--amber); }
.footnote { margin: 14px 2px 0; color: #97a0ac; font-size: 10px; line-height: 1.5; }
.footer { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid rgba(23, 32, 44, .08); color: #8792a0; font-size: 11px; }
.footer-note { text-align: right; }

@media (max-width: 560px) {
  .page-shell { width: min(100% - 28px, 900px); }
  .topbar { height: 68px; }
  .intro { padding: 55px 0 37px; }
  .section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .updated { text-align: left; }
  .service-card { min-height: 72px; padding: 14px 12px; gap: 10px; }
  .service-main { gap: 10px; }
  .service-icon { width: 33px; height: 33px; }
  .service-meta { gap: 7px; flex-direction: column-reverse; align-items: end; }
  .badge { min-width: 82px; }
}