.libraries-page {
    --lib-bg: #080808;
    --lib-panel: #111;
    --lib-border: rgba(255,255,255,.1);
    --lib-text: #f3f3f3;
    --lib-muted: #999;
    --lib-red: #d9363e;
    background: var(--lib-bg);
    color: var(--lib-text);
    overflow: hidden;
}

.libraries-page * { box-sizing: border-box; }
.libraries-page .container { width: min(1160px, calc(100% - 44px)); margin-inline: auto; }
.libraries-page .section { padding-block: 100px; }

.libraries-hero {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--lib-border);
    background:
        radial-gradient(ellipse at 80% 45%, rgba(217,54,62,.12), transparent 38%),
        #080808;
}

.libraries-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to right, black, transparent 90%);
}

.libraries-hero-content { position: relative; z-index: 1; padding-block: 90px; }
.libraries-eyebrow, .libraries-kicker {
    color: #aaa;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .16em;
}
.libraries-eyebrow { display: flex; align-items: center; gap: 11px; }
.libraries-eyebrow > span {
    width: 25px;
    height: 2px;
    background: var(--lib-red);
}
.libraries-hero h1 {
    max-width: 850px;
    margin: 27px 0 22px;
    font-size: clamp(2.7rem, 6.6vw, 5.6rem);
    line-height: 1.03;
    letter-spacing: -.075em;
}
.libraries-hero h1 span, .libraries-intro h2 span,
.libraries-section-heading h2 span { color: #999; }
.libraries-hero-content > p {
    max-width: 670px;
    color: #aaa;
    font-size: 1rem;
    line-height: 1.9;
}
.libraries-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.libraries-button {
    min-height: 49px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    text-decoration: none;
    font-size: .83rem;
    font-weight: 700;
    transition: transform .2s, background .2s, border-color .2s;
}
.libraries-button:hover { transform: translateY(-2px); }
.libraries-button-light { background: #f1f1f1; color: #090909; }
.libraries-button-light:hover { background: white; }
.libraries-button-outline { border: 1px solid #454545; color: #eee; }
.libraries-button-outline:hover { border-color: #aaa; }
.libraries-hero-meta { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 38px; color: #999; font-size: .76rem; }
.libraries-hero-meta span { display: inline-flex; gap: 8px; align-items: center; }
.libraries-hero-meta i { color: #ddd; }
.libraries-hero-index {
    position: absolute;
    right: max(22px, calc((100% - 1160px) / 2));
    bottom: 35px;
    color: #555;
    font-size: .65rem;
    letter-spacing: .15em;
}

.libraries-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}
.libraries-intro h2, .libraries-section-heading h2 {
    margin: 17px 0 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: -.065em;
    line-height: 1.13;
}
.libraries-intro-copy { color: #aaa; font-size: .91rem; line-height: 1.95; }
.libraries-intro-copy p { margin: 0 0 17px; }

.libraries-categories { background: #0d0d0d; border-block: 1px solid var(--lib-border); }
.libraries-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 37px;
}
.libraries-section-heading > p { max-width: 350px; margin: 0; color: #999; font-size: .86rem; line-height: 1.8; }
.libraries-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.libraries-category {
    position: relative;
    min-height: 220px;
    padding: 25px 21px;
    border: 1px solid var(--lib-border);
    background: #111;
    transition: transform .25s, border-color .25s;
}
.libraries-category:hover { transform: translateY(-4px); border-color: rgba(217,54,62,.55); }
.libraries-category-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #333; color: #e2e2e2; }
.libraries-category-number { position: absolute; top: 28px; right: 21px; color: #555; font-size: .7rem; }
.libraries-category h3 { margin: 25px 0 9px; font-size: 1.05rem; }
.libraries-category p { margin: 0; color: #929292; font-size: .79rem; line-height: 1.8; }

.libraries-search {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 56px;
    padding: 0 17px;
    border: 1px solid #303030;
    background: #101010;
    color: #888;
    margin-bottom: 22px;
}
.libraries-search:focus-within { border-color: #777; }
.libraries-search input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; color: white; font: inherit; font-size: .85rem; }
.libraries-search input::placeholder { color: #777; }
.libraries-search > span { white-space: nowrap; font-size: .72rem; }

.libraries-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.library-card { min-width: 0; padding: 27px; border: 1px solid var(--lib-border); background: linear-gradient(145deg, #141414, #0d0d0d); transition: border-color .25s, transform .25s; }
.library-card:hover { border-color: rgba(217,54,62,.55); transform: translateY(-3px); }
.library-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.library-card-logo { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #333; background: #191919; font-size: 1.5rem; }
.library-status { display: inline-flex; align-items: center; gap: 7px; color: #b6b6b6; font-size: .63rem; font-weight: 700; letter-spacing: .08em; }
.library-status span { width: 6px; height: 6px; border-radius: 50%; background: #d9363e; }
.library-card-type { display: block; margin-top: 27px; color: #999; font-size: .65rem; letter-spacing: .14em; }
.library-card h3 { margin: 10px 0; font-size: 2rem; letter-spacing: -.05em; }
.library-card > p { min-height: 78px; color: #a2a2a2; font-size: .86rem; line-height: 1.85; }
.library-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.library-tags span { padding: 7px 9px; border: 1px solid #303030; color: #bbb; font-size: .68rem; }
.library-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; padding-top: 18px; border-top: 1px solid var(--lib-border); }
.library-version { color: #777; font-size: .65rem; letter-spacing: .1em; }
.library-card-bottom a { display: inline-flex; align-items: center; gap: 10px; color: #f1f1f1; font-size: .8rem; font-weight: 700; text-decoration: none; }
.library-card-bottom a:hover { color: #f08a8f; }
.libraries-empty { grid-column: 1 / -1; padding: 40px; border: 1px dashed #333; text-align: center; color: #999; }
.libraries-empty h3 { color: #eee; }

.libraries-responsibility { padding: 34px 0; background: #111; border-top: 1px solid var(--lib-border); }
.libraries-responsibility-inner { display: flex; align-items: start; gap: 22px; }
.libraries-responsibility-inner > i { margin-top: 5px; color: #e4e4e4; font-size: 1.4rem; }
.libraries-responsibility h2 { margin: 0 0 9px; font-size: 1.05rem; }
.libraries-responsibility p { max-width: 850px; margin: 0; color: #999; font-size: .8rem; line-height: 1.85; }

@media (max-width: 850px) {
    .libraries-page .section { padding-block: 72px; }
    .libraries-intro-grid { grid-template-columns: 1fr; gap: 24px; }
    .libraries-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .libraries-section-heading { align-items: start; flex-direction: column; gap: 15px; }
}
@media (max-width: 560px) {
    .libraries-page .container { width: calc(100% - 32px); }
    .libraries-hero { min-height: auto; }
    .libraries-hero-content { padding-block: 75px; }
    .libraries-hero h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
    .libraries-hero-index { display: none; }
    .libraries-category-grid, .libraries-card-grid { grid-template-columns: 1fr; }
    .libraries-category { min-height: 190px; }
    .library-card { padding: 21px; }
    .library-card > p { min-height: 0; }
    .libraries-responsibility-inner { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .libraries-page *, .libraries-page *::before, .libraries-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}