:root { --bg:#0b0d11; --fg:#e7eaf0; --mut:#9aa3b2; --br:#1d222b; --acc:#7aa2ff; --crit:#ff6b6b; --warn:#f4b740; --ok:#54c79a }
* { box-sizing:border-box }
html,body { background:var(--bg); color:var(--fg); margin:0; font:17px/1.65 ui-sans-serif, system-ui, -apple-system, "SF Pro Text", Segoe UI, sans-serif }
a { color:var(--acc); text-decoration:none } a:hover { text-decoration:underline }
article { max-width:720px; margin:0 auto; padding:48px 24px 96px }
header { display:flex; align-items:center; justify-content:space-between; padding:24px; max-width:720px; margin:0 auto }
.logo { font-weight:700; letter-spacing:-0.01em; font-size:18px } .logo span { color:var(--acc) } .logo a { color:inherit; text-decoration:none }
h1 { font-size:36px; line-height:1.15; letter-spacing:-0.02em; margin:0 0 16px; font-weight:700 }
@media(max-width:520px){ h1 { font-size:30px } }
h2 { font-size:24px; margin:40px 0 12px; letter-spacing:-0.01em; font-weight:700 }
h3 { font-size:18px; margin:28px 0 10px; font-weight:600 }
.byline { color:var(--mut); font-size:14px; margin:0 0 32px; padding-bottom:24px; border-bottom:1px solid var(--br) }
.lede { font-size:20px; color:var(--mut); line-height:1.55; margin:24px 0 32px }
.quick-answer { background:rgba(122,162,255,.06); border:1px solid rgba(122,162,255,.2); border-left:3px solid var(--acc); border-radius:6px; padding:16px 20px; margin:20px 0 36px; font-size:16px; line-height:1.55 }
.quick-answer strong { display:block; color:var(--acc); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px }
p { margin:14px 0 } article ul, article ol { padding-left:24px; line-height:1.65 } article li { margin:6px 0 }
code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.92em; background:#10141b; padding:2px 6px; border-radius:4px; white-space:nowrap }
pre { background:#0f131a; border:1px solid var(--br); border-radius:10px; padding:14px 16px; overflow:auto; font-size:13px; line-height:1.5; color:#cfd6e2 }
pre code { white-space:pre; background:transparent; padding:0 }
blockquote { border-left:3px solid var(--mut); padding:4px 16px; margin:20px 0; color:var(--mut) }
.cta { display:inline-block; background:var(--acc); color:#0b0d11; padding:14px 22px; font-size:16px; font-weight:600; border-radius:10px; cursor:pointer; margin:32px 0 16px; text-decoration:none }
.cta:hover { filter:brightness(1.1); text-decoration:none }
.cta.ghost { background:transparent; color:var(--acc); border:1px solid var(--acc) }
.faq { margin:32px 0 }
.faq details { background:#0f131a; border:1px solid var(--br); border-radius:8px; padding:14px 18px; margin:8px 0 }
.faq summary { cursor:pointer; font-weight:600; list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq summary::before { content:"+ "; color:var(--mut); font-weight:400; margin-right:6px }
.faq details[open] summary::before { content:"− " }
.faq details > p { margin:12px 0 0 0; color:var(--fg) }
.callout { background:#0f131a; border:1px solid var(--br); border-radius:8px; padding:14px 18px; margin:20px 0 }
.callout.warn { background:rgba(244,183,64,.06); border-color:rgba(244,183,64,.25); border-left:3px solid var(--warn) }
.callout.crit { background:rgba(255,107,107,.06); border-color:rgba(255,107,107,.25); border-left:3px solid var(--crit) }
hr { border:none; border-top:1px solid var(--br); margin:48px 0 }
.related { background:#0f131a; border:1px solid var(--br); border-radius:10px; padding:20px 24px; margin:48px 0 0 }
.related h3 { margin-top:0; color:var(--mut); text-transform:uppercase; font-size:12px; letter-spacing:.08em }
.related ul { list-style:none; padding:0; margin:0 } .related li { padding:6px 0 }
footer { color:var(--mut); font-size:13px; max-width:720px; margin:48px auto 24px; padding:0 24px }