:root{
    --bg:#ffffff;
    --fg:#1f2933;
    --muted:#5b6770;
    --brand:#1a5fb4;
    --line:#e3e8ee;
    --card:#f6f8fb
}

    @media (prefers-color-scheme:dark){
    :root{
    --bg:#12161b;
    --fg:#e6eaee;
    --muted:#9aa6b1;
    --brand:#6ea8fe;
    --line:#2a323b;
    --card:#1a2027
}}

*{box-sizing:border-box}

body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

header,main,footer{
    max-width:820px;
    margin:0 auto;
    padding:20px 20px
}

header{
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line)
}

header a.brand{
    font-weight:700;
    font-size:1.25rem;
    color:var(--fg);
    text-decoration:none
}

nav a{
    margin-right:16px;
    color:var(--brand);
    text-decoration:none
}

nav a:hover{
    text-decoration:underline
}

h1{
    font-size:2rem;
    line-height:1.25;
    margin:.6em 0 .3em
}

h2{
    font-size:1.25rem;
    margin:1.8em 0 .4em
}

p,li{
    color:var(--fg)
}

.muted{
    color:var(--muted);
    font-size:.95rem
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 18px;
    margin:14px 0
}

ul{
    padding-left:1.2em
}

a{
    color:var(--brand)
}

footer{
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.9rem;
    margin-top:32px
}