:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202942; background: #f8f9fc; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #4c4db4; }
.site-header { background: #fff; border-bottom: 1px solid #e2e6ee; padding: 20px max(24px, calc((100vw - 960px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.site-header a { text-decoration: none; }
.brand { color: #202942; font-weight: 760; font-size: 1.18rem; }
main { max-width: 850px; margin: 0 auto; padding: 80px 24px 100px; }
.eyebrow { color: #4c4db4; font-size: 12px; font-weight: 700; letter-spacing: .13em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.1; margin: 14px 0 18px; letter-spacing: -.04em; }
.intro, .method { color: #5d6880; line-height: 1.7; max-width: 720px; }
.summary { display: flex; align-items: center; gap: 18px; padding: 24px; margin: 40px 0; background: #fff; border: 1px solid #e2e6ee; border-radius: 14px; }
.summary h2 { margin: 0 0 5px; font-size: 1.35rem; }
.summary p { margin: 0; color: #5d6880; font-size: .9rem; }
.status-dot { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: #8a96a6; }
.status-dot[data-state="operational"] { background: #198754; }
.status-dot[data-state="check_failed"] { background: #bd6b16; }
section > h2 { margin: 42px 0 16px; font-size: 1.45rem; }
.components { background: #fff; border: 1px solid #e2e6ee; border-radius: 14px; overflow: hidden; }
.component { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.component + .component { border-top: 1px solid #e2e6ee; }
.component-status { color: #5d6880; text-align: right; }
.component[data-state="operational"] .component-status { color: #198754; }
.component[data-state="check_failed"] .component-status { color: #a25a12; }
.history { line-height: 1.7; }
.history p { color: #5d6880; }
.history ul { padding-left: 22px; }
.method { margin-top: 40px; font-size: .9rem; }
footer { border-top: 1px solid #e2e6ee; padding: 24px; text-align: center; color: #5d6880; font-size: .9rem; }
@media (max-width: 560px) { main { padding-top: 52px; } .component { padding: 16px; } }