:root{
    --bg:#0f0b17;
    --panel:#17132a;
    --panel2:#21193a;
    --accent:#b57aff;
    --accent-soft:#dcc2ff;
    --text:#f4efff;
    --muted:#b7abd1;
    --border:rgba(181,122,255,.22);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:2rem;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:radial-gradient(circle at top, #1c1535, #0f0b17 68%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.wrap{
    max-width:960px;
    margin:0 auto;
}

a{
    color:var(--accent-soft);
    text-decoration:none;
    transition:color .2s ease, text-decoration-color .2s ease;
}

a:hover{
    text-decoration:underline;
}

a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:4px;
}

.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:1.25rem;
}

.site-header{
    margin-bottom:1.5rem;
}

.eyebrow{
    color:var(--accent-soft);
    font-size:.82rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:.65rem;
}

.site-header h1{
    font-size:2rem;
    line-height:1.2;
    margin:0 0 .55rem;
}

.intro{
    color:var(--muted);
    line-height:1.65;
    margin:0 0 1rem;
}

.doc-meta{
    color:var(--muted);
    line-height:1.65;
    font-size:.95rem;
    margin:0;
}

.content{
    margin:0;
}

.content.panel{
    line-height:1.72;
}

.content p,
.content li{
    color:var(--muted);
}

.content p{
    margin:0 0 1rem;
}

.content h2{
    margin:1.4rem 0 .65rem;
    color:var(--text);
    font-size:1.15rem;
    line-height:1.35;
}

.content h3{
    margin:1rem 0 .5rem;
    color:var(--accent-soft);
    font-size:1rem;
    line-height:1.35;
}

.content ul{
    padding-left:1.2rem;
    margin:0 0 1rem;
}

.content li + li{
    margin-top:.35rem;
}

.notice{
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:14px;
    padding:1rem 1.1rem;
    color:var(--muted);
    line-height:1.65;
    margin-bottom:1.5rem;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
    gap:1rem;
}

.card{
    display:block;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:1rem;
    color:var(--text);
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.card:hover{
    transform:translateY(-2px);
    border-color:var(--accent);
    text-decoration:none;
}

.card:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.card h2{
    font-size:1.05rem;
    line-height:1.35;
    margin:0 0 .45rem;
}

.card p{
    color:var(--muted);
    line-height:1.55;
    font-size:.95rem;
    margin:0 0 .55rem;
}

.card p:last-child{
    margin-bottom:0;
}

.site-footer{
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--border);
    text-align:center;
}

.footer-nav{
    margin-bottom:.7rem;
}

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

.facts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:.75rem;
    margin:1rem 0 1.25rem;
}

.fact{
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:.85rem .95rem;
}

.fact-label{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--accent-soft);
    margin-bottom:.25rem;
}

.fact-value{
    color:var(--text);
    font-size:.95rem;
    line-height:1.4;
}

@media (max-width:640px){
    body{
        padding:1rem;
    }

    .panel,
    .notice,
    .card{
        padding:1rem;
    }

    .site-header h1{
        font-size:1.7rem;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .facts{
        grid-template-columns:1fr;
    }
}