.resource-nav { position: sticky; top: 0; z-index: 20; height: 58px; border-bottom: 1px solid rgb(0 0 0 / 8%); background: rgb(255 255 255 / 88%); backdrop-filter: blur(18px); }
.resource-nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.status { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }.status i { width: 7px; height: 7px; border-radius: 50%; background: #1e9d4b; box-shadow: 0 0 0 4px rgb(30 157 75 / 12%); }
.resource-hero { min-height: 490px; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; padding-top: 90px; padding-bottom: 85px; }
.resource-hero h1 { max-width: 900px; margin: 12px 0 24px; font-size: clamp(52px, 8vw, 92px); line-height: .96; letter-spacing: -.06em; }.resource-hero h1 span { color: #8a8a8f; }.resource-hero p:last-child { max-width: 680px; color: var(--muted); font-size: 21px; line-height: 1.45; }
.resource-count { min-width: 170px; padding: 28px; border-radius: 25px; background: #fff; box-shadow: 0 20px 50px rgb(0 0 0 / 7%); }.resource-count strong { display: block; font-size: 54px; letter-spacing: -.06em; }.resource-count span { color: var(--muted); font-size: 13px; }
.directory { padding-bottom: 120px; }
.directory-head { display: grid; grid-template-columns: 1fr minmax(280px, 390px); gap: 40px; align-items: end; padding: 58px 0 26px; border-top: 1px solid var(--line); }.directory-head h2 { margin: 10px 0 0; font-size: 48px; letter-spacing: -.05em; }
.search { position: relative; display: block; }.search svg { position: absolute; left: 17px; top: 50%; width: 21px; height: 21px; transform: translateY(-50%); fill: none; stroke: #6e6e73; stroke-width: 1.8; stroke-linecap: round; }.search input { width: 100%; min-height: 52px; padding: 0 18px 0 50px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }.search input::placeholder { color: #77777c; }
.filters { display: flex; gap: 10px; padding: 14px 0 42px; overflow-x: auto; scrollbar-width: none; }.filters::-webkit-scrollbar { display: none; }.filter { flex: none; min-height: 44px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px; color: #4d4d52; background: #fff; cursor: pointer; }.filter:hover { border-color: #999; }.filter[aria-pressed="true"] { color: #fff; border-color: var(--ink); background: var(--ink); }
.section { margin-bottom: 60px; }.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 18px; }.section h3 { margin: 0; font-size: 27px; letter-spacing: -.035em; }.section-count { color: var(--muted); font-size: 13px; }
.resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.resource-link { position: relative; min-height: 96px; display: grid; grid-template-columns: 46px 1fr 26px; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid transparent; border-radius: 20px; background: #fff; text-decoration: none; box-shadow: 0 1px 0 rgb(0 0 0 / 4%); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }.resource-link:hover { transform: translateY(-2px); border-color: #dadade; box-shadow: 0 12px 30px rgb(0 0 0 / 8%); }.resource-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--blue); background: #edf6ff; }.resource-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.resource-text { min-width: 0; }.resource-text strong { display: block; line-height: 1.35; }.resource-text small { display: block; margin-top: 5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.resource-arrow { color: #8c8c91; font-size: 19px; }
.empty { padding: 70px 0; color: var(--muted); text-align: center; }
footer { padding: 27px 0; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; }footer .shell { display: flex; justify-content: space-between; gap: 20px; }footer a { color: var(--blue); text-decoration: none; }
@media (max-width: 760px) { .resource-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 60px; }.resource-count { width: fit-content; }.directory-head { grid-template-columns: 1fr; }.resource-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .resource-hero h1 { font-size: 50px; }.resource-hero p:last-child { font-size: 18px; }.status { display: none; }.resource-link { grid-template-columns: 42px 1fr 20px; padding: 16px; }.resource-icon { width: 42px; height: 42px; }footer .shell { flex-direction: column; } }