*{
    box-sizing:border-box
}
body{
    font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial; 
    margin:0;
    --bg-color: #ffffff;
    --title-color: #333;
    --light-grey: #ccc;
    --muted: #666;
    --accent: #0066cc;
    --card-bg: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    --card-border: rgba(0,0,0,0.06);
    --tab-active-bg: rgba(0,0,0,0.03);
    --tab-active-border: rgba(0,102,204,0.12);
    --pre-bg: #f5f5f5;
    --code-color: #333;
    --btn-border: rgba(0,0,0,0.08);
    --btn-primary-bg: linear-gradient(90deg, rgba(0,102,204,0.08), rgba(0,102,204,0.05));
    --btn-primary-border: rgba(0,102,204,0.12);

    color:var(--title-color);
    background: var(--bg-color);
}
body.dark {
    --bg-color: linear-gradient(180deg,#071023 0%, #071827 100%);
    --title-color: #ddd;
    --light-grey: #555;
    --muted: #93a3bd;
    --accent: #7dd3fc;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    --card-border: rgba(255,255,255,0.03);
    --tab-active-bg: rgba(255,255,255,0.03);
    --tab-active-border: rgba(125,211,252,0.12);
    --pre-bg: #041023;
    --code-color: #cde8f7;
    --btn-border: rgba(255,255,255,0.04);
    --btn-primary-bg: linear-gradient(90deg, rgba(125,211,252,0.08), rgba(99,102,241,0.05));
    --btn-primary-border: rgba(125,211,252,0.12);
}
.container{
    max-width:980px;
    margin:36px auto;
    padding:24px
}
header{
    display:flex;
    align-items:center;
    gap:16px
}
h1{
    margin:0;
    font-size:1.6rem
}
p.lead{
    margin:6px 0 18px;
    color:var(--muted)
}
.card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    padding:18px;
    border-radius:10px
}

/* Tabs */
.tabs{
    display:flex;
    gap:8px;
    margin:16px 0
}
.tab{
    padding:8px 12px;
    border-radius:8px;
    background:transparent;
    border:1px solid transparent;
    color:var(--muted);cursor:pointer
}
.tab.active{
    background:var(--tab-active-bg);
    color:var(--accent);
    border-color:var(--tab-active-border)
}

pre{
    background:var(--pre-bg);
    padding:14px;
    border-radius:8px;
    overflow:auto;
    font-size:0.92rem
}
code{
    font-family:SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
    color:var(--code-color)
}
.meta{
    font-size:0.9rem;
    color:var(--muted)
}
.section{
    margin-bottom:14px
}
.btn{
    display:inline-block;
    padding:8px 12px;border-radius:8px;
    text-decoration:none;
    border:1px solid var(--btn-border)
}
.btn.primary{
    background:var(--btn-primary-bg);
    color:var(--accent);
    border-color:var(--btn-primary-border)
}

footer{
    margin-top:28px;
    color:var(--muted);
    font-size:0.85rem
}

.dl-button{
    display:inline-block;
    padding:10px 16px;
    margin-bottom:12px;
    background:var(--btn-primary-bg);
    color:var(--accent);
    border:1px solid var(--btn-primary-border);
    border-radius:8px;
    text-decoration:none;
}
.tutow-image {
    display:flex; 
    align-items: center; 
    margin-top: 15px;
}
.tutow-image img {
    max-width: 40%
}
.tutow-image p {
    margin-left: 30px; 
    font-weight: bold;
}

@media (max-width:900px){
    .grid{
        grid-template-columns:1fr;
    }
}