.library-page { background: #09080c; }
.library-header { background: rgba(8,7,11,.82); backdrop-filter: blur(16px); }
.library-header nav a[aria-current="page"] { color: var(--purple); }
.library-hero { min-height: 750px; padding: 190px 6vw 90px; display: grid; grid-template-columns: 1.55fr .65fr; gap: 10vw; align-items: end; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.library-hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px), radial-gradient(circle at 78% 34%,rgba(117,49,216,.4),transparent 27%); background-size: 25% 100%,auto; pointer-events: none; }
.library-hero-copy, .library-principles { position: relative; z-index: 1; }
.library-hero h1 { font-size: clamp(62px,7vw,118px); max-width: 900px; }
.library-hero-copy > p:last-child { color: #aaa4b0; max-width: 700px; font-size: 17px; line-height: 1.75; }
.library-principles { display: grid; grid-template-columns: 38px 1fr; border-top: 1px solid var(--line); }
.library-principles span, .library-principles p { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.library-principles span { color: var(--lime); }
.library-principles p { color: #b8b2bd; }
.library-notice { padding: 28px 6vw; display: grid; grid-template-columns: 140px 1fr; gap: 5vw; background: var(--purple-2); align-items: start; }
.library-notice strong { color: var(--lime); text-transform: uppercase; letter-spacing: .17em; font: 600 10px Manrope; }
.library-notice p { margin: 0; color: #e2d9ef; max-width: 1050px; font-size: 13px; line-height: 1.65; }
.library-browser { padding: 120px 6vw; background: #0d0b11; }
.library-toolbar { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8vw; align-items: end; }
.library-toolbar h2 { margin: 24px 0 0; }
.library-toolbar h2 em, .library-closing h2 em { color: var(--purple); font-family: Georgia,serif; font-weight: 400; }
.library-search-wrap label { display: block; color: #8d8792; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; }
.library-search-wrap input { width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); background: transparent; color: white; padding: 16px 0; font: 400 18px "DM Sans"; border-radius: 0; }
.library-search-wrap input::placeholder { color: #6f6873; }
.library-search-wrap input:focus { outline: 0; border-color: var(--purple); }
.library-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 55px 0 24px; }
.library-filter { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #a7a0aa; border-radius: 30px; padding: 10px 15px; cursor: pointer; font: 500 10px Manrope; letter-spacing: .08em; text-transform: uppercase; }
.library-filter:hover, .library-filter:focus-visible { color: white; border-color: var(--purple); outline: 0; }
.library-filter.is-active { background: var(--purple); border-color: var(--purple); color: var(--ink); }
.library-count { color: #746e78; font-size: 11px; margin-bottom: 28px; }
.library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.library-card { min-height: 350px; background: #111016; padding: 30px; display: flex; flex-direction: column; transition: background .2s; }
.library-card:hover { background: #17131d; }
.library-card-top { display: flex; justify-content: space-between; gap: 12px; color: #726b76; font: 500 9px Manrope; letter-spacing: .12em; text-transform: uppercase; }
.library-card-top span:last-child { color: var(--purple); text-align: right; }
.library-card h3 { margin: 66px 0 18px; font: 500 31px/1.05 Manrope; letter-spacing: -.04em; }
.library-summary { color: #99939f; font-size: 13px; line-height: 1.7; margin-bottom: 25px; }
.library-card details { margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; }
.library-card summary { list-style: none; color: #d8d2dc; font-size: 11px; cursor: pointer; letter-spacing: .06em; display: flex; justify-content: space-between; }
.library-card summary::-webkit-details-marker { display: none; }
.library-card summary:after { content: "+"; color: var(--purple); font-size: 16px; }
.library-card details[open] summary:after { content: "−"; }
.library-detail { color: #aca6b1; font-size: 12px; line-height: 1.75; padding-top: 18px; margin: 0; }
.library-disclaimer { display: block; margin-top: 15px; color: #675f6a; font: 500 8px Manrope; letter-spacing: .1em; text-transform: uppercase; }
.library-profile-link { margin-top: 18px; color: var(--lime); font: 600 10px Manrope; letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: space-between; text-decoration: none; }
.library-profile-link:hover { color: white; }
.library-empty { text-align: center; padding: 90px 20px; border: 1px solid var(--line); }
.library-empty h3 { font: 500 30px Manrope; }
.library-empty p { color: #8e8792; }
.library-closing { padding: 130px 6vw; background: radial-gradient(circle at 75% 50%,#4e218d 0,#17101f 30%,#09080c 65%); }
.library-closing h2 { margin: 28px 0; }
.library-closing > p:not(.eyebrow) { max-width: 620px; color: #aaa4b0; line-height: 1.7; }
.library-closing .button { margin-top: 24px; }
@media (max-width: 1000px) { .library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .library-hero { grid-template-columns: 1fr; padding-top: 160px; } .library-toolbar { grid-template-columns: 1fr; } }
@media (max-width: 580px) { .library-hero { min-height: auto; padding: 145px 20px 70px; } .library-hero h1 { font-size: 52px; } .library-hero-copy > p:last-child { font-size: 15px; } .library-notice { grid-template-columns: 1fr; padding: 24px 20px; gap: 10px; } .library-browser { padding: 75px 20px; } .library-grid { grid-template-columns: 1fr; } .library-card { min-height: 320px; } .library-card h3 { margin-top: 48px; } .library-closing { padding: 80px 20px; } }
