:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #160d09; color: #fff7dc; }
* { box-sizing: border-box; }
body { width: min(100% - 2rem, 48rem); margin: 0 auto; background: radial-gradient(circle at top, #4b2c1d, #160d09 25rem); }
a { color: #f2c65d; }
header, main, footer { padding: 1.2rem; }
.status-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.status-header img { display: block; width: 3rem; height: 3rem; }
.status-brand, .status-home { display: inline-flex; align-items: center; }
.status-home { min-height: 2.75rem; padding: 0.65rem 1.15rem; border: 1px solid #b58a3b; border-radius: 0.55rem; color: #fff7dc; font-weight: 800; text-decoration: none; }
.status-home:hover { background: #4b2c1d; }
.status-brand:focus-visible, .status-home:focus-visible { outline: 3px solid #f2c65d; outline-offset: 3px; }
h1 { margin: 1rem 0 0.3rem; font: 700 clamp(2rem, 8vw, 3.5rem)/1.05 Georgia, serif; }
.lede { color: #e6d2a9; }
.summary, .incident, .services { margin-block: 1.2rem; padding: clamp(1rem, 4vw, 1.6rem); border: 1px solid #8b6a35; border-radius: 0.8rem; background: rgb(29 17 12 / 90%); }
.overall { display: flex; gap: 0.75rem; align-items: center; font-size: 1.25rem; font-weight: 800; }
.overall::before, .service-state::before { content: ""; display: inline-block; width: 0.78rem; height: 0.78rem; margin-inline-end: 0.5rem; border-radius: 50%; background: #8f969c; }
[data-status="Operational"]::before { background: #42c77a; }
[data-status="Degraded"]::before { background: #e2b84c; }
[data-status="Partial Outage"]::before { background: #ed8b3a; }
[data-status="Major Outage"]::before { background: #e65353; }
.services { list-style: none; padding-inline: clamp(1rem, 4vw, 1.6rem); }
.services li { display: flex; gap: 1rem; justify-content: space-between; padding-block: 0.8rem; border-block-end: 1px solid #493624; }
.services li:last-child { border: 0; }
.service-state { white-space: nowrap; }
.timestamp { color: #cbb990; font-size: 0.92rem; }
footer { color: #bdaa83; font-size: 0.9rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; }
@media (max-width: 32rem) { .services li { align-items: flex-start; flex-direction: column; gap: 0.35rem; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .summary, .incident, .services { border: 2px solid CanvasText; } }
.status-support { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin-top: 1.25rem; padding: 0.6rem; color: #f2c65d; opacity: 0.85; text-align: center; text-decoration: none; }
.status-support:hover, .status-support:focus-visible { opacity: 1; }
.status-support span:first-child { font-weight: 800; font-size: 0.86rem; }
.status-support__url { font-size: 0.8rem; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 0.2em; }
.status-support:focus-visible { outline: 3px solid #f2c65d; outline-offset: 3px; }