:root { --canvas:#0a0a0d; --raised:#14151b; --text:#f7f7fb; --secondary:#a5a7b2; --accent:#6e87f2; --line:#292b35; }
* { box-sizing:border-box; }
html { background:var(--canvas); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0%,rgba(110,135,242,.18),transparent 28rem),var(--canvas); }
a { color:inherit; }
.site-header { max-width:920px; margin:0 auto; padding:28px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; gap:9px; align-items:center; text-decoration:none; font-size:20px; font-weight:700; }
.brand span,.eyebrow { color:var(--accent); }
nav { display:flex; gap:18px; flex-wrap:wrap; }
nav a { color:var(--secondary); text-decoration:none; }
nav a:hover,nav a:focus-visible { color:var(--text); }
.document { width:min(100% - 40px,760px); margin:48px auto 80px; }
.eyebrow { font-size:12px; font-weight:750; letter-spacing:.14em; }
h1 { margin:12px 0 8px; font-size:clamp(40px,8vw,68px); line-height:1.02; letter-spacing:-.04em; }
.updated { color:var(--secondary); margin:0 0 38px; }
.introduction { font-size:20px; line-height:1.65; color:#d8d9e0; padding:24px; border:1px solid var(--line); border-radius:22px; background:rgba(20,21,27,.75); }
section { padding:28px 0; border-bottom:1px solid var(--line); }
h2 { font-size:21px; margin:0 0 10px; }
p { color:var(--secondary); line-height:1.75; margin:0; }
.external { margin-top:32px; }
.external a,.support-card a { color:var(--accent); font-weight:650; }
.hero { padding:72px 0 40px; }
.hero p { max-width:590px; font-size:20px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }
.card,.support-card { display:block; padding:22px; border:1px solid var(--line); background:var(--raised); border-radius:20px; text-decoration:none; }
.card strong { display:block; font-size:18px; margin-bottom:7px; }
.card span { color:var(--secondary); font-size:14px; }
.support-card { margin-top:30px; }
footer { width:min(100% - 40px,920px); margin:0 auto; padding:30px 0 44px; border-top:1px solid var(--line); color:var(--secondary); font-size:13px; }
footer a { color:var(--secondary); }
@media (max-width:650px) { .site-header { align-items:flex-start; flex-direction:column; } .document { margin-top:24px; } .cards { grid-template-columns:1fr; } }