:root { color-scheme: light; --bg: #f7f8fa; --surface: #fff; --ink: #19232c; --muted: #596773; --border: #dde3e8; --accent: #15668e; --good: #17603d; --good-bg: #edf8f1; --warn: #805000; --warn-bg: #fff5de; --bad: #a72735; --bad-bg: #fff0f1; }
[data-theme=dark] { color-scheme: dark; --bg: #11171c; --surface: #1a232b; --ink: #edf2f6; --muted: #a5b2bd; --border: #34424d; --accent: #8cc9ee; --good: #8ddcb0; --good-bg: #193629; --warn: #ffd180; --warn-bg: #3d3019; --bad: #ffabb3; --bad-bg: #41252c; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 system-ui, sans-serif; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.shell { max-width: 960px; margin: auto; padding: 0 24px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0; }
header { border-bottom: 1px solid var(--border); }
nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: .875rem; }
.brand { font-size: 1.25rem; font-weight: 750; color: var(--ink); text-decoration: none; }
.brand span { font-size: .8rem; color: var(--muted); font-weight: 500; margin-left: 8px; }
main { padding: 48px 0; }
.heading { margin-bottom: 28px; }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-weight: 700; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.04em; line-height: 1.2; margin: 12px 0; }
h2 { font-size: 1rem; margin: 0; }
p { margin: 8px 0 0; }
.heading p, .meta, time, small, .footnote { color: var(--muted); }
.summary { display: flex; gap: 16px; align-items: center; padding: 24px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 32px; background: var(--surface); }
.summary h2 { font-size: 1.125rem; }
.summary p { font-size: .8125rem; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.summary > .dot { width: 13px; height: 13px; }
.operational { color: var(--good); background: var(--good-bg); }
.degraded, .maintenance { color: var(--warn); background: var(--warn-bg); }
.outage { color: var(--bad); background: var(--bad-bg); }
.unknown { color: var(--muted); background: var(--surface); }
.services { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.service { padding: 18px 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.service + .service { border-top: 1px solid var(--border); }
small { display: block; font-size: .75rem; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 650; border-radius: 20px; padding: 5px 10px; white-space: nowrap; }
.section-title { font-size: 1.125rem; margin: 0 0 16px; }
.footnote { font-size: .75rem; margin-top: 12px; }
#history { margin-top: 44px; scroll-margin-top: 20px; }
.history-heading, .incident-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.meta, time { font-size: .75rem; }
.incident { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; padding: 20px 24px; }
.incident.active { border-inline-start: 4px solid var(--warn); }
summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; align-items: center; }
summary::after { content: '+'; color: var(--muted); }
details[open] summary::after { content: '−'; }
summary > span:first-child { flex: 1; }
.timeline { list-style: none; padding: 0 0 0 16px; margin: 24px 0 0; border-left: 2px solid var(--border); }
.timeline li + li { margin-top: 24px; }
.timeline p { white-space: normal; overflow-wrap: anywhere; font-size: .875rem; }
.update-heading { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; }
.update-heading strong { font-size: .8125rem; }
.empty, .notice { padding: 24px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); }
footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; padding: 12px; background: var(--surface); }
@media(max-width: 540px) { .shell { padding: 0 16px; } main { padding: 32px 0; } .service { align-items: flex-start; flex-direction: column; padding: 16px; gap: 8px; } .incident { padding: 18px; } summary { flex-wrap: wrap; } }

html, body * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
.observation-history { margin-top: 28px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
h3 { font-size: .875rem; margin: 0; }
.history-service { margin-top: 18px; font-size: .8125rem; }
.day-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.day { height: 28px; border-radius: 3px; position: relative; border: 1px solid currentColor; }
.day.operational { background: var(--good); }
.day.degraded { background: var(--warn); }
.day.outage { background: var(--bad); }
.day.unknown { background: var(--border); color: var(--border); }
.day:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 2; }
.day:hover::after, .day:focus::after { content: attr(data-label); position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 160px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); z-index: 3; font-size: .7rem; }
.history-scale, .legend { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; margin-top: 10px; }
.legend { justify-content: flex-start; flex-wrap: wrap; }
.legend .dot { background: currentColor; }
#maintenance { margin-top: 40px; }
@media(max-width: 540px) { .observation-history { padding: 14px; } .day-bars { gap: 1px; } .day { border-radius: 1px; height: 22px; } }