.library-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);padding:var(--space-md) 0}@media(min-width:640px){.library-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.library-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}}@media(min-width:1440px){.library-grid{grid-template-columns:repeat(4,1fr)}}.work-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out),border-color var(--duration-normal) var(--ease-out);animation:fadeUp var(--duration-slow) var(--ease-out) both}.work-card:nth-child(2){animation-delay:50ms}.work-card:nth-child(3){animation-delay:.1s}.work-card:nth-child(4){animation-delay:.15s}.work-card:nth-child(5){animation-delay:.2s}.work-card:nth-child(6){animation-delay:.25s}.work-card:nth-child(n+7){animation-delay:.3s}.genre-card:nth-child(2){animation-delay:60ms}.genre-card:nth-child(3){animation-delay:.12s}.genre-card:nth-child(4){animation-delay:.18s}.genre-card:nth-child(5){animation-delay:.24s}.genre-card:nth-child(6){animation-delay:.3s}.genre-card:nth-child(7){animation-delay:.36s}.genre-card:nth-child(8){animation-delay:.42s}.genre-card:nth-child(n+9){animation-delay:.48s}.work-card:before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-accent-subtle),transparent 60%);opacity:0;transition:opacity var(--duration-normal) var(--ease-out);pointer-events:none}.work-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--color-accent)}.work-card:hover:before{opacity:1}.work-card__genre{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--color-text-secondary);font-weight:600;margin-bottom:.5rem}.work-card__title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:.6rem;line-height:1.3}.work-card__title a{color:var(--color-text);transition:color var(--duration-fast) var(--ease-out)}.work-card__title a:hover{color:var(--color-accent);text-decoration:none}.work-card__meta{display:flex;align-items:center;gap:.75rem;font-size:.8rem;color:var(--color-text-secondary);margin-bottom:.75rem}.work-card__meta .work-card__rating{display:flex;align-items:center;gap:.25rem}.work-card__meta .work-card__rating:before{content:"★";color:var(--color-star)}.work-card__meta .work-card__time:before{content:"";display:inline-block;width:3px;height:3px;background:var(--color-text-secondary);border-radius:50%;vertical-align:middle;margin-right:.5rem}.work-card__synopsis{font-family:var(--font-reading);font-size:.9rem;color:var(--color-text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);padding:var(--space-md) 0}@media(min-width:640px){.genre-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.genre-grid{grid-template-columns:repeat(4,1fr)}}.genre-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3 / 2;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-lg);color:#fff;text-decoration:none;transition:transform var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out);animation:scaleIn var(--duration-slow) var(--ease-out) both}.genre-card:hover{transform:scale(1.02) translateY(-2px);box-shadow:var(--shadow-xl);text-decoration:none}.genre-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}.genre-card:hover .genre-card__img{transform:scale(1.08)}.genre-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,#140c08d9,#140c0866,#140c0826);transition:background var(--duration-normal) var(--ease-out)}.genre-card:hover .genre-card__overlay{background:linear-gradient(to top,#140c08e6,#140c0859,#140c081a)}.genre-card__content{position:relative;z-index:1}.genre-card__name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.4)}.genre-card__count{font-family:var(--font-ui);font-size:.82rem;opacity:.8;margin-top:.15rem;font-weight:500;letter-spacing:.02em}.filter-bar{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) 0;border-bottom:1px solid var(--color-border)}.filter-pill{display:inline-flex;align-items:center;padding:.4rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);font-family:var(--font-ui);font-size:.8rem;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);text-decoration:none;background:transparent}.filter-pill:hover{background:var(--color-accent-subtle);color:var(--color-accent);border-color:var(--color-accent);text-decoration:none}.filter-pill.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.page-banner{position:relative;overflow:hidden;border-radius:0 0 var(--radius-xl) var(--radius-xl);margin-bottom:var(--space-xl)}.page-banner__img{width:100%;height:280px;object-fit:cover;display:block}@media(min-width:768px){.page-banner__img{height:360px}}.page-banner__overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--color-bg) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.15) 100%)}.page-banner__content{position:absolute;bottom:0;left:0;right:0;padding:var(--space-xl) var(--space-lg);max-width:1200px;margin:0 auto}.page-banner__content h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.3);margin-bottom:.25rem}.page-banner__content p{color:#ffffffd9;font-size:1rem;max-width:50ch}