:root { color-scheme: light; --ink: #172235; --muted: #667287; --line: #dfe6ef; --surface: #fff; --canvas: #f7f9fc; --accent: #2864dc; --good: #13845d; --good-soft: #e8f7f1; --danger: #c43d4f; --danger-soft: #fff0f2; --warning: #ad6d0a; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:root.theme-blue { --accent: #2563eb; }:root.theme-green { --accent: #0f8a5f; }:root.theme-amber { --accent: #b45309; }:root.theme-violet { --accent: #6d4aff; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: linear-gradient(180deg, #fbfcfe 0, var(--canvas) 420px); color: var(--ink); } a { color: inherit; } :focus-visible { outline: 3px solid #77a8ff; outline-offset: 3px; }.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .7rem 1rem; border-radius: 8px; background: white; }.skip-link:focus { top: 1rem; }
.site-header { width: min(1080px, calc(100% - 2rem)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.site-identity { display: flex; align-items: center; gap: .7rem; text-decoration: none; }.status-logo { display: flex; align-items: flex-end; gap: 2px; width: 25px; height: 26px; }.status-logo i { display: block; width: 6px; border-radius: 3px; background: var(--accent); }.status-logo i:nth-child(1) { height: 10px; opacity: .55; }.status-logo i:nth-child(2) { height: 18px; opacity: .78; }.status-logo i:nth-child(3) { height: 25px; }.site-header nav { display: flex; gap: 1.5rem; }.site-header nav a { color: var(--muted); font-size: .82rem; text-decoration: none; }.site-header nav a:hover { color: var(--ink); }
main, footer { width: min(960px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }.eyebrow { margin: 0 0 .5rem; color: #748095; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }.hero { padding: clamp(3rem, 6vw, 4.75rem) 0 3rem; }.hero-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }.hero h1 { margin: 0; max-width: 700px; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.042em; }.hero-heading p { margin: .75rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }.global-indicator { flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgba(23,34,53,.04); border-radius: 24px; background: #e9edf3; box-shadow: 0 12px 28px rgba(30,50,80,.08); }.global-indicator span { width: 22px; height: 22px; border: 6px solid #7c8795; border-radius: 50%; }.global-indicator.state-up { background: var(--good-soft); }.global-indicator.state-up span { border-color: var(--good); }.global-indicator.state-down { background: var(--danger-soft); }.global-indicator.state-down span { border-color: var(--danger); }.global-indicator.state-degraded, .global-indicator.state-maintenance { background: #fff5df; }.global-indicator.state-degraded span, .global-indicator.state-maintenance span { border-color: var(--warning); }.freshness { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--muted); font-size: .78rem; }.freshness-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(19,132,93,.1); }.freshness-dot.is-stale { background: var(--warning); box-shadow: 0 0 0 4px rgba(173,109,10,.1); }
.stale-warning { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #edcc8c; border-radius: 12px; background: #fff8e9; color: #68450c; }.stale-warning strong, .stale-warning span { display: block; }.stale-warning span { margin-top: .25rem; font-size: .84rem; line-height: 1.5; }.section-heading { margin-bottom: 1.3rem; }.section-heading h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.025em; }
.incidents, .components, .history { margin-bottom: 4.5rem; }.incident-card { overflow: hidden; margin-bottom: 1rem; border: 1px solid #f0c9ce; border-left: 4px solid var(--danger); border-radius: 14px; background: white; }.incident-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 1.3rem; }.incident-heading h3 { margin: .35rem 0 0; font-size: 1.05rem; }.incident-heading time { color: var(--muted); font-size: .75rem; }.incident-status { color: var(--danger); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.incident-timeline { padding: 0 1.3rem 1.2rem; }.timeline-item { display: grid; grid-template-columns: 12px 1fr; gap: .7rem; padding-top: .85rem; }.timeline-dot { width: 8px; height: 8px; margin-top: .38rem; border: 2px solid var(--danger); border-radius: 50%; }.timeline-item p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }.timeline-item .timeline-meta { margin-bottom: .25rem; color: var(--ink); font-size: .7rem; font-weight: 750; text-transform: capitalize; }
.component-groups { display: grid; gap: 1.1rem; }.component-group { overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 12px 34px rgba(30,50,80,.055); }.group-heading { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-radius: 16px 16px 0 0; background: #fbfcfe; border-bottom: 1px solid var(--line); }.group-heading h3 { margin: 0; font-size: .95rem; }.group-heading span { color: var(--muted); font-size: .7rem; }.component-row { padding: 1.15rem 1.25rem 1.05rem; border-top: 1px solid #edf1f5; }.component-row:last-child { border-radius: 0 0 16px 16px; }.group-heading + .component-row { border-top: 0; }.component-top, .component-lower { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.component-top { margin-bottom: .85rem; }.component-name strong { font-size: .92rem; }.component-metrics { display: flex; align-items: center; gap: 1rem; }.latency { color: var(--muted); font-size: .72rem; }.component-status { color: var(--good); font-size: .75rem; font-weight: 750; }.component-down .component-status { color: var(--danger); }.component-degraded .component-status, .component-pending-down .component-status, .component-maintenance .component-status { color: var(--warning); }.component-paused .component-status, .component-unknown .component-status { color: #707b8d; }.history-chart { width: 100%; min-width: 0; flex: 1; }.uptime-bars { position: relative; display: grid; grid-template-columns: repeat(var(--history-days), minmax(0, 1fr)); gap: clamp(.3px, .12vw, 2px); height: 24px; }.bar { position: relative; min-width: 0; border-radius: 3px; background: var(--good); cursor: help; transition: transform 120ms ease, filter 120ms ease; }.bar:hover, .bar:focus-visible { z-index: 4; transform: translateY(-2px) scaleY(1.12); filter: saturate(1.15); }.bar.component-down { background: var(--danger); }.bar.component-degraded, .bar.component-pending-down, .bar.component-maintenance { background: #dca642; }.bar.component-paused, .bar.component-unknown { background: #dce2e9; }.history-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: .38rem; color: #596b82; font-size: .68rem; }.history-empty { display: flex; flex: 1; align-items: center; gap: .55rem; min-height: 24px; color: var(--muted); font-size: .72rem; }.history-empty-dot { width: 8px; height: 8px; border: 2px solid #aeb7c4; border-radius: 50%; }.empty-group { padding: 2rem; text-align: center; }.empty-group h3 { margin: 0; }.empty-group p { color: var(--muted); }.loading-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: white; }.loading-card span { display: block; height: 12px; margin: .8rem 0; border-radius: 8px; background: #edf1f5; }.loading-card span:nth-child(2) { width: 72%; }.loading-card span:nth-child(3) { width: 88%; }
.history-list .incident-card { border-color: var(--line); border-left-color: var(--good); }.history-list .incident-status { color: var(--good); }.history-list .timeline-dot { border-color: var(--good); }.empty-copy { padding: 1.5rem; border: 1px dashed #ccd5e2; border-radius: 12px; color: var(--muted); text-align: center; }
footer { min-height: 90px; display: flex; align-items: center; gap: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; } footer span:first-child { color: var(--ink); font-weight: 750; } footer a { margin-left: auto; }
@media (max-width: 680px) { body { padding-bottom: env(safe-area-inset-bottom); }.site-header { min-height: 64px; padding-top: env(safe-area-inset-top); }.site-header nav { display: none; }.hero { padding: 2.5rem 0 2.25rem; }.hero-heading { align-items: flex-start; gap: 1rem; }.hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.5rem); overflow-wrap: anywhere; }.global-indicator { width: 54px; height: 54px; border-radius: 17px; }.global-indicator span { width: 17px; height: 17px; border-width: 5px; }.freshness { align-items: flex-start; line-height: 1.4; }.incidents, .components, .history { margin-bottom: 3.25rem; }.component-row { padding: 1rem; }.component-top { align-items: flex-start; }.component-metrics { flex-direction: column-reverse; align-items: flex-end; gap: .25rem; text-align: right; }.component-lower { align-items: flex-start; }.uptime-bars { gap: .5px; height: 28px; }.history-axis { font-size: .57rem; }.incident-heading { display: grid; gap: .5rem; }.incident-timeline { padding-left: 1rem; padding-right: 1rem; } footer { flex-wrap: wrap; padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); } footer a { min-height: 44px; margin-left: 0; display: inline-flex; align-items: center; } }
@media (max-width: 380px) { main, footer, .site-header { width: min(100% - 1.25rem, 900px); }.hero-heading { display: grid; }.global-indicator { grid-row: 1; }.component-top { display: grid; }.component-metrics { align-items: flex-start; text-align: left; }.uptime-value { min-width: 52px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Preserve navigation, legibility, and long names on phones as well as desktop. */
[hidden] { display: none !important; }
.site-identity, .component-name, .hero-heading > div:first-child { min-width: 0; }
.site-identity { min-height: 44px; }
.status-logo, .freshness-dot { flex-shrink: 0; }
#page-name, .component-name, .group-heading h3, .incident-card, footer { overflow-wrap: anywhere; }
.site-header { gap: 1rem; }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.component-metrics { flex-shrink: 0; }
.group-heading { gap: 1rem; }
.group-heading span { flex-shrink: 0; }
.eyebrow { color: #596b82; }
@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; gap: 0; padding-bottom: .3rem; }
  .site-identity { width: 100%; }
  .site-header nav { display: flex; gap: 1.5rem; }
  .component-top { gap: .75rem; }
  .history-axis { gap: .6rem; font-size: .65rem; }
  .history-axis span:last-child { text-align: right; }
}
.history-inspector { margin-top: .6rem; }
.history-detail { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Outages become major only after 30 minutes of continuous confirmed downtime. */
.global-indicator.state-outage { background: #fff0e5; }
.global-indicator.state-outage span { border-color: #c4510a; }
.component-outage .component-status { color: #b54708; }
.component-major-outage .component-status { color: var(--danger); }
.bar.component-outage { background: #c4510a; }
.bar.component-major-outage { background: var(--danger); }