*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #222; background: #fafafa; line-height: 1.55; }
.container { max-width: 920px; margin: 0 auto; padding: 0 20px; }
header { background: #1e293b; color: #fff; padding: 14px 0; border-bottom: 3px solid #0ea5e9; }
header h1 { margin: 0; font-size: 1.3rem; display: inline-block; }
header h1 a { color: #fff; text-decoration: none; }
header nav { float: right; margin-top: 4px; }
header nav a { color: #cbd5e1; text-decoration: none; margin-left: 18px; font-size: 0.95rem; }
header nav a:hover { color: #fff; }
main { padding: 40px 0; }
h2 { font-size: 1.8rem; margin-top: 0; }
h3 { margin-top: 32px; color: #0f172a; }
.hero { margin-bottom: 48px; }
.hero .lead { font-size: 1.15rem; color: #475569; max-width: 640px; }
.button { display: inline-block; background: #0ea5e9; color: #fff; padding: 10px 22px; text-decoration: none; border-radius: 4px; font-weight: 500; }
.button:hover { background: #0284c7; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.feature { background: #fff; padding: 22px; border-radius: 6px; border: 1px solid #e5e7eb; }
.feature h3 { margin-top: 0; font-size: 1.05rem; }
.feature p { color: #475569; margin-bottom: 0; font-size: 0.95rem; }
pre { background: #0f172a; color: #e2e8f0; padding: 14px 18px; border-radius: 4px; overflow-x: auto; font-size: 0.88rem; }
code { background: #eef2ff; padding: 1px 6px; border-radius: 3px; font-size: 0.9em; }
pre code { background: transparent; padding: 0; }
.status-list { list-style: none; padding: 0; }
.status-list li { padding: 10px 14px; background: #fff; margin-bottom: 6px; border-radius: 4px; border: 1px solid #e5e7eb; }
.status-list .up { color: #10b981; margin-right: 10px; font-size: 1.1em; }
footer { background: #1e293b; color: #cbd5e1; padding: 18px 0; font-size: 0.9rem; margin-top: 60px; }
footer a { color: #cbd5e1; }
@media (max-width: 640px) {
  header h1 { display: block; margin-bottom: 8px; }
  header nav { float: none; margin-top: 0; }
  header nav a { margin-left: 0; margin-right: 18px; }
}