*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

body{
    background:white;
    color:#050816;
}

.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

main.docs{
    max-width: 980px;
    margin: 0 auto;
    padding: 64px 40px;
}

a{
    color: inherit;
}

.docs-hero{
    margin-bottom: 26px;
}

.docs-hero h1{
    font-size: 2.6rem;
    line-height: 1.1;
}

.lead{
    margin-top: 10px;
    color:#64748b;
    line-height:1.6;
}

.card{
    border:1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    background:#fff;
    margin-top: 14px;
}

.card h2{
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.card p{
    color:#475569;
    line-height: 1.6;
}

.card ul{
    margin-left: 18px;
    color:#475569;
    line-height: 1.7;
}

pre{
    margin-top: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px;
    overflow:auto;
    line-height: 1.6;
    font-size: 0.95rem;
}

pre code{
    white-space: pre;
}

.mini{
    margin-top: 10px;
    color:#64748b;
    font-size: .95rem;
    line-height:1.6;
}

@media(max-width:768px){
    main.docs{ padding: 40px 24px; }
    .docs-hero h1{ font-size: 2.1rem; }
}