@font-face {
  font-family: Satoshi;
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: Satoshi;
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: Satoshi;
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}

:root {
  color-scheme: dark;
  --page: #000000;
  --card: #1e1e1e;
  --text: #f7f7f7;
  --muted: #999;
  --soft: #777;
  --green: #8fd8b2;
  --red: #f28888;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.5 Satoshi, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid #a9b8c9; outline-offset: 5px; }

.site-header { padding: 0 20px; }
.site-nav { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; flex: none; align-items: center; }
.wordmark img { display: block; width: 136px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 700; white-space: nowrap; }
.nav-links a:hover, .mobile-nav a:hover { color: #a9b8c9; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav-links { position: absolute; z-index: 5; top: 34px; right: 0; display: grid; gap: 2px; min-width: 190px; padding: 10px; background: #262626; border-radius: 14px; box-shadow: 0 14px 32px #0006; }
.mobile-nav-links a { padding: 9px 12px; font-size: 14px; border-radius: 8px; }

main { width: min(100% - 48px, 1100px); margin: 0 auto; padding: 54px 0 74px; }
.page-heading { margin-bottom: 32px; }
h1 { margin: 0 0 10px; font-size: clamp(42px, 5vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 17px; }

.section { margin-top: 38px; }
.page-heading + .section { margin-top: 0; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 25px; font-weight: 500; letter-spacing: -.025em; }
.section-heading span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.components { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.component { min-width: 0; padding: 26px; background: var(--card); border-radius: 18px; }
.component-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.component-name { font-size: 18px; font-weight: 700; }
.component-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; color: var(--muted); }
.component-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--soft); }
.component-state.operational { color: var(--green); }
.component-state.operational::before { background: var(--green); }
.component-state.outage { color: var(--red); }
.component-state.outage::before { background: var(--red); }
.component-uptime { margin-top: 28px; font-size: 34px; line-height: 1.1; letter-spacing: -.045em; font-weight: 700; }
.component-caption { margin-top: 4px; color: var(--muted); font-size: 13px; }
.bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; margin-top: 26px; }
.bar { height: 24px; min-width: 0; background: #3b3b3b; border-radius: 2px; }
.bar.operational { background: #69bd94; }
.bar.partial { background: #d7ae67; }
.bar.outage { background: #d57b7b; }
.component-bottom { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { display: block; width: 8px; height: 8px; border-radius: 2px; }
.legend-dot.good { background: #69bd94; }
.legend-dot.bad { background: #d57b7b; }
.legend-dot.unknown { background: #3b3b3b; }
.disclosure { margin: 10px 0 0; color: var(--soft); font-size: 12px; }

.incident-section { margin-top: 38px; }
.incidents { min-height: 98px; padding: 0 26px; background: var(--card); border-radius: 18px; }
.incident { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; }
.incident-title { font-size: 15px; font-weight: 500; }
.incident-date { margin-top: 4px; color: var(--muted); font-size: 12px; }
.incident-state { color: var(--red); font-size: 13px; white-space: nowrap; }
.incident-state.resolved { color: var(--green); }
.empty { padding: 23px 0; color: var(--muted); font-size: 14px; }
.empty strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 16px; font-weight: 500; }
.loading { color: var(--muted); }
footer { width: min(100% - 48px, 1100px); margin: 0 auto; padding: 0 0 32px; display: flex; justify-content: space-between; gap: 24px; color: var(--soft); font-size: 12px; }
footer span:last-child { max-width: 600px; text-align: right; }

@media (max-width: 850px) {
  .nav-links { display: none; }
  .mobile-nav { display: block; }
}
@media (max-width: 700px) {
  .site-header { padding: 0 24px; }
  main { padding: 42px 0 66px; }
  .page-heading { margin-bottom: 24px; }
  .page-heading p { font-size: 15px; }
  .section { margin-top: 34px; }
  .section-heading h2 { font-size: 23px; }
  .section-heading span { font-size: 12px; }
  .components { grid-template-columns: 1fr; gap: 12px; }
  .component { padding: 22px; }
  .bars { gap: 1px; }
  .bar { height: 22px; }
  .incident-section { margin-top: 34px; }
  .incidents { padding: 0 22px; }
  .incident { flex-direction: column; gap: 5px; }
  footer { flex-direction: column; gap: 9px; }
  footer span:last-child { text-align: left; }
}