:root {
    --hljh-page-ink: #20262b;
    --hljh-page-muted: #657079;
    --hljh-page-line: #dfe4e7;
    --hljh-page-surface: #ffffff;
    --hljh-page-soft: #f3f6f5;
    --hljh-page-green: #087a50;
    --hljh-page-green-dark: #05623f;
    --hljh-page-red: #cf3039;
    --hljh-page-gold: #a87414;
}

.dark-theme {
    --hljh-page-ink: #edf1f3;
    --hljh-page-muted: #a8b0b6;
    --hljh-page-line: #4a4d50;
    --hljh-page-surface: #323335;
    --hljh-page-soft: #292c2d;
    --hljh-page-green: #4fc28d;
    --hljh-page-green-dark: #66d19f;
    --hljh-page-red: #ef656c;
    --hljh-page-gold: #d8ae5b;
}

.hljh-info-page {
    background: var(--hljh-page-surface);
    color: var(--hljh-page-ink);
    font-size: 15px;
    line-height: 1.85;
    margin: 0 auto 30px;
    max-width: 1120px;
    overflow: hidden;
}

.hljh-info-page * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.hljh-info-page h1,
.hljh-info-page h2,
.hljh-info-page h3,
.hljh-info-page p {
    color: inherit;
}

.hljh-info-intro {
    border-bottom: 1px solid var(--hljh-page-line);
    padding: 58px 68px 48px;
    position: relative;
}

.hljh-info-intro::before {
    background: var(--hljh-page-green);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 5px;
}

.hljh-info-kicker {
    color: var(--hljh-page-green);
    font-size: 13px;
    font-weight: 750;
    margin-bottom: 8px;
}

.hljh-info-intro h1 {
    font-size: 38px;
    font-weight: 760;
    line-height: 1.3;
    margin: 0;
    max-width: 850px;
}

.hljh-info-lead {
    color: var(--hljh-page-muted) !important;
    font-size: 17px;
    line-height: 1.9;
    margin: 22px 0 0 !important;
    max-width: 900px;
}

.hljh-info-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.hljh-button {
    align-items: center;
    background: transparent;
    border: 1px solid var(--hljh-page-line);
    border-radius: 6px;
    color: var(--hljh-page-ink) !important;
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 8px;
    justify-content: center;
    min-height: 43px;
    padding: 0 18px;
    text-decoration: none !important;
}

.hljh-button:hover,
.hljh-button:focus {
    border-color: var(--hljh-page-green);
    color: var(--hljh-page-green) !important;
}

.hljh-button.is-primary {
    background: var(--hljh-page-red);
    border-color: var(--hljh-page-red);
    color: #fff !important;
}

.hljh-button.is-primary:hover,
.hljh-button.is-primary:focus {
    background: #b9252e;
    border-color: #b9252e;
    color: #fff !important;
}

.dark-theme .hljh-button.is-primary:hover,
.dark-theme .hljh-button.is-primary:focus {
    background: #d74b53;
    border-color: #d74b53;
}

.hljh-tutorial-search {
    align-items: center;
    background: var(--hljh-page-soft);
    border: 1px solid var(--hljh-page-line);
    border-radius: 6px;
    display: grid;
    gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    margin-top: 28px;
    max-width: 720px;
    padding: 6px 6px 6px 16px;
}

.hljh-tutorial-search > .fa {
    color: var(--hljh-page-muted);
    text-align: center;
}

.hljh-tutorial-search input[type="search"] {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--hljh-page-ink);
    font-size: 15px;
    height: 42px;
    min-width: 0;
    outline: 0;
    padding: 0;
    width: 100%;
}

.hljh-tutorial-search input[type="search"]::placeholder {
    color: var(--hljh-page-muted);
}

.hljh-tutorial-search button {
    background: var(--hljh-page-red);
    border: 0;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    height: 42px;
    padding: 0 20px;
}

.hljh-tutorial-search button:hover,
.hljh-tutorial-search button:focus {
    background: #b9252e;
}

.hljh-tutorial-stats {
    color: var(--hljh-page-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 10px 26px;
    margin-top: 18px;
}

.hljh-tutorial-stats strong {
    color: var(--hljh-page-ink);
    font-size: 16px;
    margin-right: 3px;
}

.hljh-category-index {
    align-items: flex-start;
    border-bottom: 1px solid var(--hljh-page-line);
    display: flex;
    gap: 22px;
    padding: 22px 68px;
}

.hljh-category-index > span {
    color: var(--hljh-page-muted);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 650;
    padding-top: 3px;
}

.hljh-category-index > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
}

.hljh-category-index a {
    color: var(--hljh-page-ink) !important;
    font-size: 13px;
    text-decoration: none;
}

.hljh-category-index a:hover,
.hljh-category-index a:focus {
    color: var(--hljh-page-green) !important;
}

.hljh-tutorial-featured,
.hljh-category-directory {
    border-bottom: 1px solid var(--hljh-page-line);
    padding: 44px 68px 50px;
}

.hljh-tutorial-section-title {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.hljh-tutorial-section-title span {
    color: var(--hljh-page-green);
    display: block;
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 4px;
}

.hljh-tutorial-section-title h2 {
    font-size: 24px;
    line-height: 1.4;
    margin: 0;
}

.hljh-tutorial-section-title p {
    color: var(--hljh-page-muted) !important;
    margin: 4px 0 0 !important;
}

.hljh-tutorial-section-title > a {
    color: var(--hljh-page-muted);
    font-size: 13px;
    text-decoration: none;
}

.hljh-tutorial-section-title > a .fa {
    margin-left: 7px;
}

.hljh-tutorial-section-title > a:hover,
.hljh-tutorial-section-title > a:focus {
    color: var(--hljh-page-green);
}

.hljh-tutorial-featured-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hljh-tutorial-featured-grid > a {
    aspect-ratio: 16 / 11;
    background: var(--hljh-page-soft);
    border-radius: 6px;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.hljh-tutorial-featured-grid img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.hljh-tutorial-featured-grid > a:hover img {
    transform: scale(1.025);
}

.hljh-tutorial-featured-grid > a > span {
    background: rgba(17, 21, 24, .86);
    bottom: 0;
    color: #fff;
    display: -webkit-box;
    font-size: 13px;
    left: 0;
    line-height: 1.5;
    overflow: hidden;
    padding: 9px 11px;
    position: absolute;
    right: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hljh-category-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hljh-category-card {
    --hljh-category-accent: #357a5b;
    border: 1px solid var(--hljh-page-line);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 23px;
    scroll-margin-top: 82px;
}

.hljh-category-card.is-violet { --hljh-category-accent: #7256b5; }
.hljh-category-card.is-red { --hljh-category-accent: #c4434d; }
.hljh-category-card.is-blue { --hljh-category-accent: #3275a8; }
.hljh-category-card.is-green { --hljh-category-accent: #16835b; }
.hljh-category-card.is-pink { --hljh-category-accent: #b64c79; }
.hljh-category-card.is-cyan { --hljh-category-accent: #187f8c; }
.hljh-category-card.is-gold { --hljh-category-accent: #9b7119; }
.hljh-category-card.is-teal { --hljh-category-accent: #24776f; }
.hljh-category-card.is-orange { --hljh-category-accent: #b25c24; }
.hljh-category-card.is-gray { --hljh-category-accent: #63717a; }

.dark-theme .hljh-category-card.is-violet { --hljh-category-accent: #aa91e8; }
.dark-theme .hljh-category-card.is-red { --hljh-category-accent: #ee7a81; }
.dark-theme .hljh-category-card.is-blue { --hljh-category-accent: #72afe0; }
.dark-theme .hljh-category-card.is-green { --hljh-category-accent: #4fc28d; }
.dark-theme .hljh-category-card.is-pink { --hljh-category-accent: #e485aa; }
.dark-theme .hljh-category-card.is-cyan { --hljh-category-accent: #65bcc7; }
.dark-theme .hljh-category-card.is-gold { --hljh-category-accent: #d8ae5b; }
.dark-theme .hljh-category-card.is-teal { --hljh-category-accent: #67b9b0; }
.dark-theme .hljh-category-card.is-orange { --hljh-category-accent: #e59b66; }
.dark-theme .hljh-category-card.is-gray { --hljh-category-accent: #aab4ba; }

.hljh-category-card-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.hljh-category-card-head > .fa {
    align-items: center;
    border: 1px solid var(--hljh-category-accent);
    border-radius: 5px;
    color: var(--hljh-category-accent);
    display: flex;
    font-size: 18px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.hljh-category-card-head > span {
    color: var(--hljh-page-muted);
    font-size: 12px;
}

.hljh-category-card h3 {
    font-size: 21px;
    line-height: 1.4;
    margin: 18px 0 7px;
}

.hljh-category-card h3 a {
    color: var(--hljh-page-ink) !important;
    text-decoration: none;
}

.hljh-category-card h3 a:hover,
.hljh-category-card h3 a:focus {
    color: var(--hljh-category-accent) !important;
}

.hljh-category-card > p {
    color: var(--hljh-page-muted) !important;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 !important;
    min-height: 45px;
}

.hljh-category-card ul {
    border-top: 1px solid var(--hljh-page-line);
    flex: 1 1 auto;
    list-style: none !important;
    margin: 18px 0 0 !important;
    padding: 10px 0 3px !important;
}

.hljh-category-card li {
    margin: 0 !important;
    padding: 6px 0 6px 13px;
    position: relative;
}

.hljh-category-card li::before {
    background: var(--hljh-category-accent);
    border-radius: 50%;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 17px;
    width: 4px;
}

.hljh-category-card li a {
    color: var(--hljh-page-ink) !important;
    display: -webkit-box;
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hljh-category-card li a:hover,
.hljh-category-card li a:focus {
    color: var(--hljh-category-accent) !important;
}

.hljh-category-enter {
    align-items: center;
    border-top: 1px solid var(--hljh-page-line);
    color: var(--hljh-category-accent) !important;
    display: flex;
    font-size: 13px;
    font-weight: 650;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 15px;
    text-decoration: none !important;
}

.hljh-category-enter:hover .fa,
.hljh-category-enter:focus .fa {
    transform: translateX(3px);
}

.hljh-category-enter .fa {
    transition: transform .2s ease;
}

.hljh-about-media {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 230px;
    overflow: hidden;
}

.hljh-about-media a {
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.hljh-about-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.hljh-about-media a:hover img {
    transform: scale(1.02);
}

.hljh-about-media span {
    background: rgba(17, 21, 24, .84);
    bottom: 0;
    color: #fff;
    display: block;
    left: 0;
    overflow: hidden;
    padding: 10px 12px;
    position: absolute;
    right: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hljh-info-section {
    border-bottom: 1px solid var(--hljh-page-line);
    padding: 50px 68px;
}

.hljh-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 17px;
    margin-bottom: 28px;
}

.hljh-section-heading > span {
    align-items: center;
    border: 1px solid var(--hljh-page-green);
    border-radius: 50%;
    color: var(--hljh-page-green);
    display: flex;
    flex: 0 0 38px;
    font-size: 12px;
    font-weight: 750;
    height: 38px;
    justify-content: center;
}

.hljh-section-heading h2 {
    font-size: 24px;
    line-height: 1.4;
    margin: 0;
}

.hljh-section-heading p {
    color: var(--hljh-page-muted) !important;
    margin: 4px 0 0 !important;
}

.hljh-text-columns {
    column-gap: 42px;
    columns: 2;
}

.hljh-text-columns p {
    break-inside: avoid;
    margin: 0 !important;
}

.hljh-principle-grid {
    border-left: 1px solid var(--hljh-page-line);
    border-top: 1px solid var(--hljh-page-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hljh-principle-grid > div {
    border-bottom: 1px solid var(--hljh-page-line);
    border-right: 1px solid var(--hljh-page-line);
    min-width: 0;
    padding: 25px 27px;
}

.hljh-principle-grid .fa {
    color: var(--hljh-page-green);
    font-size: 22px;
}

.hljh-principle-grid h3 {
    font-size: 17px;
    margin: 9px 0 4px;
}

.hljh-principle-grid p {
    color: var(--hljh-page-muted) !important;
    margin: 0 !important;
}

.hljh-info-band {
    background: var(--hljh-page-soft);
    border-bottom: 1px solid var(--hljh-page-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hljh-info-band > div {
    min-width: 0;
    padding: 38px 46px;
}

.hljh-info-band > div + div {
    border-left: 1px solid var(--hljh-page-line);
}

.hljh-info-band span {
    color: var(--hljh-page-gold);
    font-size: 12px;
    font-weight: 750;
}

.hljh-info-band h2 {
    font-size: 20px;
    line-height: 1.45;
    margin: 6px 0 10px;
}

.hljh-info-band p {
    color: var(--hljh-page-muted) !important;
    margin: 0 !important;
}

.hljh-values {
    border-top: 1px solid var(--hljh-page-line);
}

.hljh-values p {
    align-items: baseline;
    border-bottom: 1px solid var(--hljh-page-line);
    display: grid;
    gap: 20px;
    grid-template-columns: 80px minmax(0, 1fr);
    margin: 0 !important;
    padding: 17px 0;
}

.hljh-values strong {
    color: var(--hljh-page-green);
    font-size: 17px;
}

.hljh-info-footer {
    align-items: center;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    padding: 42px 68px 50px;
}

.hljh-info-footer > div {
    max-width: 760px;
}

.hljh-info-footer h2 {
    font-size: 21px;
    margin: 0 0 6px;
}

.hljh-info-footer p {
    color: var(--hljh-page-muted) !important;
    margin: 0 !important;
}

.hljh-info-footer > div > a {
    color: var(--hljh-page-green);
    display: inline-block;
    margin-top: 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hljh-action-status {
    color: var(--hljh-page-muted) !important;
    font-size: 13px;
    margin: 13px 0 0 !important;
}

.hljh-action-status .fa {
    color: var(--hljh-page-green);
    margin-right: 6px;
}

.hljh-eligibility {
    border-bottom: 1px solid var(--hljh-page-line);
    border-top: 1px solid var(--hljh-page-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hljh-eligibility > div {
    padding: 24px 28px;
}

.hljh-eligibility > div + div {
    border-left: 1px solid var(--hljh-page-line);
}

.hljh-eligibility h3 {
    font-size: 18px;
    margin: 0 0 5px;
}

.hljh-eligibility h3 .fa {
    color: var(--hljh-page-green);
    margin-right: 8px;
}

.hljh-eligibility p,
.hljh-note {
    color: var(--hljh-page-muted) !important;
    margin: 0 !important;
}

.hljh-note {
    border-left: 3px solid var(--hljh-page-gold);
    margin-top: 20px !important;
    padding: 9px 14px;
}

.hljh-process {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hljh-process li {
    align-items: flex-start;
    display: grid;
    gap: 20px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 0 0 25px;
    position: relative;
}

.hljh-process li:not(:last-child)::before {
    background: var(--hljh-page-line);
    content: "";
    height: calc(100% - 36px);
    left: 20px;
    position: absolute;
    top: 39px;
    width: 1px;
}

.hljh-process li > b {
    align-items: center;
    background: var(--hljh-page-green);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 42px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hljh-process h3 {
    font-size: 17px;
    margin: 1px 0 3px;
}

.hljh-process p {
    color: var(--hljh-page-muted) !important;
    margin: 0 !important;
}

.hljh-middle-cta {
    align-items: center;
    border-bottom: 1px solid var(--hljh-page-line);
    border-left: 5px solid var(--hljh-page-red);
    display: flex;
    gap: 30px;
    justify-content: space-between;
    padding: 32px 48px;
}

.hljh-middle-cta h2 {
    font-size: 22px;
    margin: 0;
}

.hljh-middle-cta p {
    color: var(--hljh-page-muted) !important;
    margin: 3px 0 0 !important;
}

.hljh-capability-list {
    border-top: 1px solid var(--hljh-page-line);
}

.hljh-capability-list > div {
    align-items: flex-start;
    border-bottom: 1px solid var(--hljh-page-line);
    display: grid;
    gap: 17px;
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 18px 4px;
}

.hljh-capability-list .fa {
    color: var(--hljh-page-green);
    font-size: 21px;
    padding-top: 3px;
    text-align: center;
}

.hljh-capability-list p {
    color: var(--hljh-page-muted) !important;
    margin: 0 !important;
}

.hljh-capability-list strong {
    color: var(--hljh-page-ink);
    display: block;
    font-size: 16px;
}

.hljh-faq details {
    border-bottom: 1px solid var(--hljh-page-line);
    padding: 16px 2px;
}

.hljh-faq details:first-of-type {
    border-top: 1px solid var(--hljh-page-line);
}

.hljh-faq summary {
    color: var(--hljh-page-ink);
    cursor: pointer;
    font-size: 16px;
    font-weight: 650;
    list-style-position: inside;
}

.hljh-faq details p {
    color: var(--hljh-page-muted) !important;
    margin: 10px 0 0 20px !important;
}

@media (max-width: 767px) {
    .hljh-info-page {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .hljh-info-intro,
    .hljh-info-section {
        padding: 34px 20px;
    }

    .hljh-info-intro h1 {
        font-size: 29px;
    }

    .hljh-info-lead {
        font-size: 15px;
    }

    .hljh-info-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hljh-tutorial-search {
        margin-top: 23px;
        padding-left: 12px;
    }

    .hljh-tutorial-search button {
        padding: 0 13px;
    }

    .hljh-tutorial-stats {
        gap: 8px 18px;
    }

    .hljh-category-index {
        display: block;
        padding: 20px;
    }

    .hljh-category-index > div {
        gap: 8px 16px;
        margin-top: 8px;
    }

    .hljh-tutorial-featured,
    .hljh-category-directory {
        padding: 34px 20px;
    }

    .hljh-tutorial-section-title h2 {
        font-size: 21px;
    }

    .hljh-tutorial-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .hljh-category-card {
        padding: 21px;
    }

    .hljh-button {
        width: 100%;
    }

    .hljh-about-media {
        grid-template-columns: 1fr 1fr;
        height: 180px;
    }

    .hljh-about-media a:nth-child(n+3) {
        display: none;
    }

    .hljh-section-heading {
        gap: 12px;
    }

    .hljh-section-heading > span {
        flex-basis: 34px;
        height: 34px;
    }

    .hljh-section-heading h2 {
        font-size: 21px;
    }

    .hljh-text-columns {
        columns: 1;
    }

    .hljh-text-columns p + p {
        margin-top: 16px !important;
    }

    .hljh-principle-grid,
    .hljh-info-band,
    .hljh-eligibility {
        grid-template-columns: 1fr;
    }

    .hljh-info-band > div,
    .hljh-eligibility > div {
        padding: 26px 20px;
    }

    .hljh-info-band > div + div,
    .hljh-eligibility > div + div {
        border-left: 0;
        border-top: 1px solid var(--hljh-page-line);
    }

    .hljh-principle-grid > div {
        padding: 21px 20px;
    }

    .hljh-values p {
        gap: 6px;
        grid-template-columns: 1fr;
    }

    .hljh-info-footer,
    .hljh-middle-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 30px 20px 36px;
    }

    .hljh-middle-cta {
        padding-left: 20px;
    }

    .hljh-process li {
        gap: 13px;
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .hljh-process li > b {
        height: 36px;
    }

    .hljh-process li:not(:last-child)::before {
        left: 17px;
        top: 35px;
    }
}