:root {
  color-scheme: light dark;
  --background: #f5f5f3;
  --surface: #ffffff;
  --ink: #111112;
  --muted: #57575c;
  --line: #cacacd;
  --diagram: #88888c;
  --unknown: #66666b;
  --operational: #287449;
  --degraded: #865b17;
  --partial: #865b17;
  --outage: #842d26;
  --maintenance: #326780;
  --accent: var(--unknown);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #030305;
    --surface: #101012;
    --ink: #f4f4f5;
    --muted: #a8a8b0;
    --line: #343438;
    --diagram: #797982;
    --unknown: #a8a8b0;
    --operational: #76ba91;
    --degraded: #d7a84a;
    --partial: #d7a84a;
    --outage: #ffaea5;
    --maintenance: #82b8d2;
  }
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--background); }
body { min-width: 280px; min-height: 100vh; margin: 0; background: var(--background); }
[hidden] { display: none !important; }
.page { min-height: 100svh; overflow: clip; --accent: var(--unknown); }
.page[data-status="operational"] { --accent: var(--operational); }
.page[data-status="degraded"] { --accent: var(--degraded); }
.page[data-status="partial"] { --accent: var(--partial); }
.page[data-status="outage"] { --accent: var(--outage); }
.page[data-status="maintenance"] { --accent: var(--maintenance); }
.wrap { width: min(100%, 1360px); margin-inline: auto; padding-inline: clamp(24px, 7vw, 96px); }

.header {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark { width: fit-content; display: flex; flex-direction: column; gap: 8px; }
.wordmark strong { font-size: 25px; font-weight: 700; letter-spacing: .28em; line-height: 1; }
.wordmark span { font-size: 9px; letter-spacing: .205em; line-height: 1.2; text-transform: uppercase; }
.header-context { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.header-context span { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }

.summary {
  min-height: 530px;
  position: relative;
  display: flex;
  align-items: center;
  padding-block: 68px 92px;
}
.summary-copy { width: min(100%, 790px); position: relative; z-index: 1; }
.status-label { margin: 0 0 26px; display: flex; align-items: center; gap: 13px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-mark, .component-mark { width: 9px; height: 9px; flex: 0 0 auto; border: 1px solid currentColor; background: currentColor; transform: rotate(45deg); }
h1 { max-width: 12.5ch; margin: 0; font-size: clamp(55px, 7.2vw, 98px); font-weight: 700; letter-spacing: -.057em; line-height: .96; text-wrap: balance; }
.summary-message { max-width: 51ch; margin: 29px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.summary-meta { min-height: 28px; margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; color: var(--muted); font-size: 12px; }
.backup-badge { padding: 7px 11px; color: var(--operational); border: 1px solid color-mix(in srgb, var(--operational) 58%, var(--line)); font-weight: 700; }

.signal-field { width: min(61vw, 730px); aspect-ratio: 1; position: absolute; top: 50%; right: -60px; transform: translateY(-52%); color: var(--diagram); opacity: .61; pointer-events: none; }
.signal-field svg { width: 100%; height: 100%; }
.signal-field .signal-core, .signal-field .signal-pulse, .orbit-motion ellipse:last-child { color: var(--accent); }
.signal-pulse { opacity: .55; }

.maintenance { padding-block: 25px; display: grid; grid-template-columns: minmax(180px, .38fr) 1fr; gap: 40px; border-block: 1px solid var(--maintenance); }
.maintenance .section-kicker { color: var(--maintenance); }
.maintenance h2 { margin: 0; font-size: 17px; line-height: 1.4; }
.maintenance div p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.components { padding-block: clamp(76px, 10vw, 132px); }
.section-heading { display: grid; grid-template-columns: minmax(250px, .7fr) 1fr; gap: 40px; margin-bottom: 39px; }
.section-heading h2, .history-heading h2, .availability h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.1; }
.section-heading p { max-width: 42ch; margin: 3px 0 0 auto; color: var(--muted); font-size: 14px; line-height: 1.7; }
.component-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.component-row {
  --row-status: var(--unknown);
  min-height: 91px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(145px, auto);
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.component-row[data-status="operational"] { --row-status: var(--operational); }
.component-row[data-status="degraded"] { --row-status: var(--degraded); }
.component-row[data-status="partial"] { --row-status: var(--partial); }
.component-row[data-status="outage"] { --row-status: var(--outage); }
.component-row[data-status="maintenance"] { --row-status: var(--maintenance); }
.component-mark { width: 8px; height: 8px; color: var(--row-status); }
.component-copy { min-width: 0; display: grid; grid-template-columns: minmax(190px, .55fr) 1fr; align-items: baseline; gap: 24px; }
.component-copy strong { font-size: 16px; line-height: 1.4; }
.component-detail { color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.component-state { color: var(--row-status); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: right; }

.observations { padding-block: clamp(72px, 9vw, 122px); display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(55px, 9vw, 132px); border-top: 1px solid var(--line); }
.section-kicker { margin: 0 0 19px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.availability h2 { max-width: 12ch; }
.availability-value { margin: 45px 0 7px; font-size: clamp(48px, 6vw, 76px); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.availability-detail { max-width: 34ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.monitoring-since { margin: 29px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.6; }
.history-heading { min-height: 49px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.history-heading h2 { font-size: 24px; }
.history-heading span { color: var(--muted); font-size: 11px; }
.history-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.history-item { --event-status: var(--unknown); display: grid; grid-template-columns: 10px 1fr; gap: 17px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.history-item[data-status="operational"] { --event-status: var(--operational); }
.history-item[data-status="degraded"] { --event-status: var(--degraded); }
.history-item[data-status="partial"] { --event-status: var(--partial); }
.history-item[data-status="outage"] { --event-status: var(--outage); }
.history-item[data-status="maintenance"] { --event-status: var(--maintenance); }
.history-marker { width: 7px; height: 7px; margin-top: 5px; background: var(--event-status); transform: rotate(45deg); }
.history-item strong { font-size: 14px; line-height: 1.45; }
.history-item p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.history-empty { margin: 0; padding: 27px 0; color: var(--muted); border-block: 1px solid var(--line); font-size: 13px; line-height: 1.65; }
.noscript { margin-bottom: 70px; padding-block: 24px; border-block: 1px solid var(--outage); }
.noscript strong { color: var(--outage); }
.noscript p { max-width: 70ch; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.footer { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; }
.footer p { margin: 0; }
.theme-note { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.theme-note svg { width: 14px; height: 14px; }

@media (max-width: 1000px) {
  .signal-field { width: 710px; right: -245px; opacity: .2; }
  .summary-copy { max-width: 660px; }
  .observations { gap: 60px; }
  .component-copy { grid-template-columns: minmax(190px, .72fr) 1fr; }
}

@media (max-width: 700px) {
  .header { min-height: 92px; }
  .wordmark strong { font-size: 22px; }
  .wordmark span { font-size: 8px; }
  .header-context { display: none; }
  .summary { min-height: 500px; align-items: flex-start; padding-block: 67px 74px; }
  .signal-field { top: 10px; right: -405px; width: 590px; transform: none; opacity: .15; }
  .status-label { margin-bottom: 22px; font-size: 10px; }
  h1 { max-width: 10ch; font-size: clamp(48px, 13.8vw, 72px); }
  .summary-message { margin-top: 24px; font-size: 15px; }
  .summary-meta { align-items: flex-start; flex-direction: column; }
  .maintenance, .section-heading, .observations { grid-template-columns: 1fr; }
  .maintenance { gap: 4px; }
  .section-heading { gap: 13px; margin-bottom: 28px; }
  .section-heading p { margin-left: 0; }
  .component-row { min-height: 110px; grid-template-columns: 10px minmax(0, 1fr); gap: 16px; padding-block: 18px; }
  .component-copy { display: block; }
  .component-copy strong, .component-detail { display: block; }
  .component-detail { margin-top: 5px; }
  .component-state { grid-column: 2; text-align: left; }
  .observations { gap: 76px; }
  .availability-value { margin-top: 35px; }
  .footer { min-height: 132px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
}

@media (max-width: 359px) {
  .wrap { padding-inline: 22px; }
  h1 { font-size: 46px; }
}

@media (forced-colors: active) {
  .signal-field { display: none; }
  .status-mark, .component-mark, .history-marker { color: CanvasText; background: CanvasText; }
  .backup-badge { color: CanvasText; border-color: CanvasText; }
}

:root[data-motion="subtle"] .summary-copy { animation: content-arrival 520ms cubic-bezier(.2, .65, .3, 1) both; }
:root[data-motion="subtle"] .orbit-motion { transform-box: view-box; transform-origin: 370px 340px; animation: orbit-breathe 20s ease-in-out infinite alternate; }
:root[data-motion="subtle"] .signal-field svg > circle:nth-child(2) { animation: orbit-dashes 18s linear infinite; }
:root[data-motion="subtle"] .signal-pulse { transform-box: fill-box; transform-origin: center; animation: signal-breathe 3.6s ease-in-out infinite; }
@keyframes content-arrival { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbit-breathe { from { transform: rotate(-.65deg); } to { transform: rotate(.65deg); } }
@keyframes orbit-dashes { to { stroke-dashoffset: -26; } }
@keyframes signal-breathe { 0%, 100% { opacity: .18; transform: scale(.82); } 50% { opacity: .62; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }