.library-intro { padding-block: 30px 50px; }
.library-intro > .eyebrow { color: var(--orange); margin-bottom: 22px; }
.library-intro h1 { max-width: 1000px; font-size: clamp(44px, 5.06vw, 70px); font-weight: 500; line-height: 1.1; letter-spacing: -2.5px; }
.library-intro h1 > span { color: #80858a; }
.library-lead { font-size: 19px; color: var(--muted); line-height: 1.8; max-width: 750px; margin-top: 26px; }
.library-search { display: grid; grid-template-columns: minmax(0, 1fr) 230px auto; align-items: end; gap: 18px; padding: 28px; margin-top: 35px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.library-field { min-width: 0; }
.library-field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 11px; }
.library-field input, .library-field select { width: 100%; min-height: 54px; padding: 14px 15px; color: var(--ink); border: 1px solid #b9c0c0; border-radius: 4px; background: var(--paper); font-size: 18px; }
.library-field input::placeholder { color: #70767b; }
.library-search-help { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.library-results { padding-block: 5px 70px; }
.library-results-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; padding-bottom: 25px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.library-results-heading .eyebrow { color: var(--muted); margin-bottom: 12px; }
.library-results-heading h2 { font-size: 34px; letter-spacing: -.9px; }
.library-result-query { margin-bottom: 25px; font-size: 17px; color: var(--muted); overflow-wrap: anywhere; }
.code-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.code-card { display: flex; flex-direction: column; align-items: start; padding: 28px; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.code-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; width: 100%; margin-bottom: 30px; }
.code-number { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 34px; letter-spacing: -1.1px; font-weight: 500; }
.code-system { font-size: 13px; letter-spacing: .7px; color: var(--muted); padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; }
.code-card h3 { font-size: 24px; line-height: 1.35; letter-spacing: -.6px; font-weight: 500; margin-bottom: 18px; }
.code-card h3 a:hover { color: var(--orange); }
.code-card > p { color: var(--muted); font-size: 18px; margin-bottom: 25px; }
.code-card > .link-arrow { margin-top: auto; width: 100%; border-color: var(--line); }
.library-empty { grid-column: 1 / -1; padding: 35px; max-width: 820px; background: var(--soft); border-radius: var(--radius); }
.library-empty h3 { font-size: 28px; font-weight: 500; line-height: 1.4; margin-bottom: 18px; letter-spacing: -.6px; }
.library-empty p { color: var(--muted); margin-bottom: 20px; }
.library-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 25px; margin-top: 30px; font-size: 16px; }
.library-method { background: var(--soft); padding-block: 60px; }
.library-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.library-method-grid h2 { font-size: 44px; }
.library-method-grid > div > p:not(.eyebrow) { font-size: 18px; color: var(--muted); margin-bottom: 18px; }
.code-article { padding-top: 30px; }
.code-article-heading { padding-bottom: 38px; margin-bottom: 45px; border-bottom: 1px solid var(--line); }
.code-article-heading .eyebrow { color: var(--orange); margin-bottom: 18px; }
.code-display { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(48px, 5.72vw, 76px); line-height: 1.2; letter-spacing: -2.5px; margin-bottom: 17px; }
.code-article-heading h1 { max-width: 950px; font-size: clamp(32px, 3.3vw, 46px); font-weight: 500; line-height: 1.25; letter-spacing: -1.3px; }
.code-article-heading .library-lead { max-width: 820px; }
.code-review { font-size: 14px; color: var(--muted); margin-top: 23px; }
.code-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 95px; }
.code-content { min-width: 0; max-width: 780px; overflow-wrap: anywhere; }
.code-content section { margin-bottom: 40px; }
.code-content h2 { font-size: 28px; letter-spacing: -.6px; line-height: 1.3; margin-bottom: 18px; }
.code-content p, .code-content li { font-size: 18px; color: var(--muted); line-height: 1.85; }
.code-content ul, .code-content ol { padding-left: 22px; margin-block: 0; }
.code-content li { padding-left: 5px; margin-bottom: 13px; }
.code-content li::marker { color: var(--ink); }
.code-content .code-context { padding: 28px 30px; background: var(--soft); border-left: 2px solid var(--orange); border-radius: 0 5px 5px 0; }
.code-content .code-context .eyebrow { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.code-content .code-note { font-size: 16px; margin-top: 20px; }
.code-sidebar { position: sticky; top: 115px; }
.code-contents { margin-bottom: 32px; padding: 0 5px; }
.code-contents .eyebrow { margin-bottom: 14px; color: var(--muted); }
.code-contents a { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 15px; min-height: 42px; border-bottom: 1px solid var(--line); }
.code-contents a:hover { color: var(--orange); }
.code-contents a span { color: var(--muted); }
.code-contact { background: var(--soft); border: 1px solid var(--line); padding: 28px; border-radius: var(--radius); }
.code-contact .eyebrow { font-size: 13px; letter-spacing: 1.3px; color: var(--muted); margin-bottom: 18px; }
.code-contact h2 { font-size: 30px; letter-spacing: -.9px; margin-bottom: 20px; }
.code-contact > p:not(.eyebrow) { font-size: 17px; color: var(--muted); }
.code-contact .button { width: 100%; margin-top: 23px; font-size: 17px; }
.code-contact .link-arrow { margin-top: 15px; gap: 12px; font-size: 14px; }
.code-contact .code-contact-address { padding-top: 18px; margin-top: 25px; border-top: 1px solid #c9ceca; font-size: 14px !important; }
.code-sources { padding-top: 30px; border-top: 1px solid var(--line); }
.code-sources > p { margin-bottom: 20px; }
.code-sources a { font-size: 17px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.code-sources li > p { font-size: 15px; margin-top: 10px; }
.library-back { padding-block: 5px 60px; }
@media (max-width: 1100px) {
    .library-search { grid-template-columns: minmax(0, 1fr) 200px; }
    .library-search > .button { grid-column: 1 / -1; justify-content: center; }
    .code-article-grid { gap: 45px; grid-template-columns: minmax(0, 1fr) 270px; }
    .code-contact { padding: 23px; }
    .code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .code-article-grid { grid-template-columns: 1fr; gap: 10px; }
    .code-sidebar { position: static; margin-bottom: 40px; }
    .code-contents { display: none; }
    .code-contact { padding: 30px; }
    .code-contact .button { max-width: 300px; }
    .code-contact .link-arrow { display: flex; max-width: 300px; font-size: 16px; }
    .code-contact .eyebrow { font-size: 13px; }
    .code-contact > p:not(.eyebrow) { font-size: 18px; }
    .library-method-grid { gap: 35px; }
}
@media (max-width: 700px) {
    .library-intro { padding-block: 25px 35px; }
    .library-intro > .eyebrow { font-size: 13px; margin-bottom: 20px; }
    .library-intro h1 { font-size: 44px; letter-spacing: -1.7px; line-height: 1.12; }
    .library-lead { margin-top: 22px; font-size: 18px; }
    .library-search { margin-top: 27px; padding: 22px; gap: 20px; }
    .library-search-help { font-size: 15px; }
    .library-results { padding-bottom: 50px; }
    .library-results-heading { align-items: start; flex-direction: column; gap: 16px; margin-bottom: 25px; padding-bottom: 22px; }
    .library-results-heading h2 { font-size: 32px; }
    .code-grid { grid-template-columns: 1fr; gap: 20px; }
    .code-card { padding: 25px; }
    .code-card-top { margin-bottom: 25px; }
    .code-card h3 { font-size: 27px; }
    .code-card > p { font-size: 18px; }
    .code-system { font-size: 13px; }
    .code-number { font-size: 36px; }
    .library-method { padding-block: 45px; }
    .library-method-grid { grid-template-columns: 1fr; gap: 25px; }
    .library-method-grid h2 { font-size: 38px; }
    .library-method-grid > div > p:not(.eyebrow) { font-size: 18px; }
    .library-empty { padding: 25px; }
    .library-empty h3 { font-size: 27px; }
    .code-article { padding-top: 25px; }
    .code-article-heading { padding-bottom: 28px; margin-bottom: 32px; }
    .code-display { font-size: 52px; letter-spacing: -1.7px; }
    .code-article-heading h1 { font-size: 34px; letter-spacing: -.9px; }
    .code-review { font-size: 14px; }
    .code-content h2 { font-size: 28px; }
    .code-content .code-context { padding: 25px 23px; }
    .code-content section { margin-bottom: 35px; }
    .code-contact { padding: 25px; }
    .code-contact h2 { font-size: 34px; }
    .code-sources a { font-size: 18px; }
    .code-sources li > p { font-size: 16px; }
    .library-back { padding-bottom: 45px; }
}
@media (max-width: 540px) {
    .library-search { grid-template-columns: 1fr; padding: 22px; }
    .library-intro h1 { font-size: 40px; }
}