:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #07121f; color: #e8f0f7; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #153b55, #07121f 60%); line-height: 1.65; }
.card { box-sizing: border-box; width: min(900px, calc(100% - 32px)); margin: 48px auto; padding: 32px; background: rgba(10, 27, 43, .92); border: 1px solid rgba(180, 220, 240, .18); border-radius: 20px; box-shadow: 0 20px 70px rgba(0,0,0,.3); }
h1, h2, h3 { line-height: 1.25; color: #ffffff; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { margin-top: 2.2rem; font-size: 1.35rem; }
h3 { margin-top: 1.5rem; font-size: 1.05rem; }
a { color: #8ed8ff; }
li { margin: .35rem 0; }
.draft { padding: 12px 14px; border-left: 4px solid #f4c96b; background: rgba(244, 201, 107, .12); color: #ffe4a3; }
.button { display: inline-block; margin: 8px 8px 8px 0; padding: 10px 16px; border-radius: 999px; background: #218bc0; color: #fff; text-decoration: none; }
.contact { margin-top: 2rem; color: #b8c9d7; }
.doc-nav { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid rgba(180, 220, 240, .18); padding-bottom: 16px; }
.meta { color: #b8c9d7; }
@media (max-width: 600px) { .card { margin: 16px auto; padding: 22px; } }