/* Runtime document page ownership. */

/* BEGIN source style.css:2896-3074 document-pages */
/* Document Pages */
body:has(.about) .page-shell {
    max-width: var(--layout-document-shell);
    padding: 34px 40px 48px;
}

.about {
    width: min(var(--layout-document), 100%);
    margin: 0 auto !important;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.72;
    overflow-wrap: anywhere;
}

.about header,
.about section,
.about > div {
    margin-top: 28px;
}

.about header:first-child,
.about section:first-child,
.about > div:first-child {
    margin-top: 0;
}

.about h1 {
    max-width: 820px;
    margin: 0 0 18px;
    color: var(--text);
    font-size: clamp(2rem, 3.4vw, 3.35rem);
    line-height: 1.08;
}

.about h2 {
    margin: 34px 0 12px;
    color: var(--text);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.18;
}

.about h3 {
    margin: 26px 0 10px;
    color: var(--text);
    font-size: 1.12rem;
}

.about p {
    margin: 0 0 16px;
    color: var(--muted);
}

.about strong {
    color: var(--text);
}

.about ul,
.about ol {
    display: grid;
    gap: 8px;
    margin: 12px 0 22px;
    padding-left: 1.35rem;
    color: var(--muted);
}

.about li::marker {
    color: var(--blue);
}

.about a {
    color: var(--blue);
    font-weight: 760;
}

.about img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.about a > img {
    width: auto;
    max-width: min(180px, 100%);
    max-height: 54px;
    margin: 0 10px 12px 0;
    border-radius: 0;
    vertical-align: middle;
}

.about .screen-shot {
    width: min(240px, 100%);
    margin: 0;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.about div:has(> .screen-shot) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 28px;
}

.about .social-link-row {
    display: block;
}

.about table {
    width: 100%;
    margin: 18px 0 26px;
    border-collapse: collapse;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.about pre {
    max-width: 100%;
    overflow-x: auto;
}

.about th,
.about td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    text-align: left;
    vertical-align: top;
}

.about th {
    color: var(--text);
    background: rgba(255, 255, 255, 0.055);
}

.about blockquote {
    margin: 22px 0;
    padding: 14px 18px;
    border-left: 3px solid var(--blue);
    background: rgba(47, 128, 255, 0.1);
    color: var(--muted);
}

@media (max-width: 760px) {
    body:has(.about) .page-shell {
        padding: 24px 16px 38px;
    }

    .about {
        padding: 22px;
        font-size: 0.96rem;
    }

    .about h1 {
        font-size: 2rem;
    }

    .about h2 {
        font-size: 1.35rem;
    }

    .about .btn,
    .about .filter-button {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .about div:has(> .screen-shot) {
        grid-template-columns: 1fr;
    }

    .about .screen-shot {
        width: 100%;
    }
}

/* END source style.css:2896-3074 document-pages */