main {
    .site-block {
        .content {
            article {
                display: flex;
                flex-direction: column;
                gap: 20px;
                margin-bottom: 40px;
                h2 {
                    font-size: 24px;
                    font-weight: 700;
                    color: var(--text-12);
                    margin-top: 20px;
                    scroll-margin-top: 110px;
                }
                h3 {
                    font-weight: 700;
                    color: var(--text-12);
                }
                p {
                    font-size: 20px;
                    font-size: 14px;
                    color: var(--text-12);
                }
                code {
                    padding: 2px 4px;
                    border-radius: 4px;
                    background: var(--bg-23);
                    color: var(--text-2);
                    font-size: 14px;
                    display: inline-flex;
                    font-family: pt-mono;
                    * {
                        font-family: pt-mono;
                        font-size: 14px;
                    }
                }
                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    padding-left: 8px;
                    list-style: none;
                    li {
                        font-size: 14px;
                        color: var(--text-5);
                        position: relative;
                        padding-left: 20px;
                        &::before {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 20px;
                            height: 20px;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            content: '';
                            background: url(../images/marker.svg);
                            background-size: 20px;
                            margin-right: 4px;
                        }
                    }
                }
                ol {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    padding-left: 30px;
                    li {
                        font-size: 14px;
                        color: var(--text-5);
                        position: relative;
                        &::marker {
                            color: var(--text-2);
                            font-size: 12px;
                        }
                    }
                }
                pre {
                    margin-bottom: 20px;
                    padding: 20px;
                    background: var(--bg-27);
                    border-radius: 0 0 12px 12px;
                    border-top: var(--border-6);
                    code {
                        width: 100%;
                        color: var(--text-8);
                        display: block;
                        background: var(--bg-27);
                        overflow-x: auto;
                        .token-variable {
                            color: var(--text-14);
                        }
                        .token-operator {
                            color: var(--text-15);
                        }
                        .token-keyword {
                            color: var(--text-16);
                        }
                        .token-punctuation {
                            color: var(--text-15);
                        }
                        .token-string {
                            color: var(--text-17);
                        }
                        .token-number {
                            color: var(--text-13);
                        }
                        .token-comment {
                            color: var(--text-10);
                        }
                        .token-tag, .token-important {
                            color: var(--text-18);
                        }
                        .token-at-rule, .token-selector {
                            color: var(--text-19);
                        }
                        .token-property, .token-attribute {
                            color: var(--text-20);
                        }
                        .token-function {
                            color: var(--text-21);
                        }
                        .token-color {
                            color: var(--text-22);
                        }
                    }
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                    border-radius: 8px 8px 12px 12px;
                    overflow: hidden;
                    background: var(--bg-19);
                    thead {
                        tr {
                            background: var(--bg-27);
                            border: none;
                            th {
                                padding: 13px 20px;
                                font-size: 14px;
                                color: var(--text-4);
                                text-transform: uppercase;
                                text-align-last: left;
                            }
                        }
                    }
                    tbody {
                        tr {
                            border-top: var(--border-7);
                            &:nth-child(odd) {
                                background: var(--bg-29);
                            }
                            td {
                                padding: 10px 20px;
                                font-size: 14px;
                                color: var(--text-5);
                            }
                        }
                    }
                }
                .head {
                    border-radius: 16px;
                    box-shadow: var(--shadow-7);
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    h1 {
                        font-size: 36px;
                    }
                    hr {
                        border: none;
                        height: 1px;
                        background: var(--bg-22);
                    }
                    .version {
                        padding: 6px 12px;
                        border-radius: 6px;
                        width: max-content;
                        background: var(--bg-1);
                        font-size: 12px;
                        font-weight: 700;
                        color: var(--text-12);
                        span {
                            font-size: 12px;
                            font-weight: 700;
                            color: var(--text-2);
                        }
                        .items {
                            a {
                                font-size: 12px;
                                font-weight: 700;
                                color: var(--text-2);
                                &.removed {
                                    color: var(--text-18);
                                }
                                &.updated {
                                    color: var(--text-9);
                                }
                                &.deprecated {
                                    color: var(--text-13);
                                }
                            }
                        }
                    }
                    .info {
                        display: flex;
                        padding: 12px 20px;
                        align-items: center;
                        gap: 16px;
                        background: var(--bg-1);
                        border-radius: 8px;
                        &.deprecated {
                            border-left: var(--border-5);
                            &::before {
                                color: var(--text-13);
                            }
                        }
                        &.removed {
                            border-left: var(--border-9);
                            &::before {
                                color: var(--text-18);
                            }
                        }
                        &::before {
                            font-family: icon;
                            content: '\f009';
                            font-size: 20px;
                        }
                        .text {
                            font-size: 12px;
                             b, a {
                                font-size: 12px;
                                font-weight: 700;
                            }
                        }
                    }
                    .desc {
                        font-size: 14px;
                        line-height: 16.8px;
                        color: var(--text-5);
                        margin-bottom: 0;  
                    }
                }
                .support {
                    border-radius: 16px;
                    box-shadow: var(--shadow-7);
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    h2 {
                        font-size: 16px;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        margin: 0;
                        &::before {
                            content: '\f008';
                            font-family: icon;
                            width: 28px;
                            height: 28px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: var(--text-2);
                            border-radius: 6px;
                            background: var(--bg-23);
                        }
                    }
                }
                .docs-content {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                }
                .docs-image {
                    display: flex;
                    justify-content: center;
                    img {
                        max-width: 100%;
                        border-radius: 8px;
                        border: var(--border-10);
                    }
                }
                .code-block {
                    .top {
                        border-radius: 20px 20px 0 0;
                        background: var(--bg-27);
                        padding: 10px 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span {
                            font-size: 12px;
                            text-transform: uppercase;
                            font-weight: 700;
                        }
                        button {
                            padding: 4px 8px;
                            border-radius: 6px;
                            background: var(--bg-28);
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            span {
                                font-weight: 500;
                                color: var(--text-4);
                                font-size: 12px;
                                text-transform: none;
                            }
                            &::after {
                                content: unset;
                                color: var(--text-4);
                            }
                            &::before {
                                position: unset;
                                width: 16px;
                                height: 16px;
                                font-size: 16px;
                                font-family: icon;
                                content: '\f00a';
                                background: none;
                                color: var(--text-4);
                            }
                            &:hover {
                                background: var(--bg-6);
                            }
                        }
                    }
                }
            }
            .navigation {
                display: flex;
                gap: 24px;
                div {
                    width: 100%;
                    border-radius: 12px;
                    background: var(--bg-1);
                    padding: 20px;
                    &.next {
                        text-align: right;
                    }
                    p {
                        font-size: 12px;
                        font-weight: 700;
                        color: var(--text-10);
                        margin-bottom: 4px;
                        text-transform: uppercase;
                    }
                    a {
                        color: var(--text-2);
                        font-size: 15px;
                        font-weight: 700;
                    }
                }
            }
            .sections-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                .section {
                    padding: 12px 20px;
                    flex-direction: column;
                    gap: 10px;
                    border-radius: 12px;
                    background: var(--bg-19);
                    &:hover {
                        background: var(--bg-20);
                    }
                    a {
                        font-size: 12px;
                        font-weight: 500;
                        color: var(--text-1);
                        text-transform: uppercase;
                    }
                }
            }
            .sections-list-2 {
                display: flex;
                flex-direction: column;
                gap: 10px;
                background: var(--bg-19);
                border-radius: 12px;
                padding: 10px;
                .back {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    a {
                        color: var(--text-10);
                        transform: rotate(180deg);
                    }
                    p {
                        font-size: 12px;
                        font-weight: 500;
                        color: var(--text-2);
                        text-transform: uppercase;
                    }
                }
                .section {
                    padding: 10px;
                    flex-direction: column;
                    gap: 10px;
                    border-radius: 8px;
                    background: var(--bg-7);
                    &.status-deprecated {
                        .block {
                            &::before {
                                background: var(--bg-16);
                            }
                        }
                    }
                    &.status-removed {
                        .block {
                            &::before {
                                background: var(--bg-15);
                            }
                        }
                    }
                    &.status-stable {
                        .block {
                            &::before {
                                background: var(--bg-17);
                            }
                        }
                    }
                    .block {
                        padding: 4px;
                        padding-left: 23px;
                        position: relative;
                        &::before {
                            content: '';
                            position: absolute;
                            top: 5px;
                            bottom: 5px;
                            left: 10px;
                            width: 3px;
                            border-radius: 2px;
                            background: var(--bg-21);
                        }
                        &:hover {
                            border-radius: 8px;
                            background: var(--bg-19);
                        }
                        a {
                            font-size: 14px;
                            font-weight: 500;
                            color: var(--text-5);
                            margin-bottom: 4px;
                            &:hover {
                                color: var(--text-2);
                            }
                        }
                        p {
                            font-size: 12px;
                            color: var(--text-10);
                        }
                    }
                    
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    main {
        .site-block {
            .content {
                padding: 10px;
                article {
                    h2 {
                        font-size: 20px;
                    }
                    pre {
                        padding: 10px;
                    }
                    .code-block {
                        .top {
                            padding: 10px;
                        }
                    }
                    .table {
                        overflow-x: auto;
                        table {
                            min-width: 600px;
                            thead {
                                tr {
                                    th {
                                        padding: 10px;
                                        font-size: 12px;
                                    }
                                }
                            }
                            tbody {
                                tr {
                                    td {
                                        padding: 10px;
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                    }
                    .head {
                        padding: 10px;
                        h1 {
                            font-size: 24px;
                        }
                        .info  {
                            padding: 10px;
                        }
                        .version {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}