:root { --paper:#f4f6f5; --surface:#fff; --ink:#1f2926; --muted:#6f7c77; --line:#dfe6e3; --brand:#27a684; --brand-dark:#168069; --brand-soft:#e7f7f2; --sand:#f2e9db; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
.directory-nav { min-height:70px; padding:0 max(24px,calc((100vw - 1280px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); }
.brand { display:flex; align-items:center; gap:4px; font-size:21px; font-weight:600; }
.brand img { width:32px; height:32px; object-fit:contain; }
.back-link { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.directory-hero { max-width:1280px; margin:0 auto; padding:78px 24px 66px; display:grid; grid-template-columns:1.4fr .6fr; gap:8vw; align-items:end; }
.kicker { margin:0 0 18px; color:var(--brand-dark); font-size:11px; font-weight:800; letter-spacing:.18em; }
.directory-hero h1 { margin:0; max-width:850px; font-family:"Songti SC","STSong",serif; font-size:clamp(42px,5vw,70px); line-height:1.2; font-weight:600; letter-spacing:-.045em; }
.directory-intro>p { margin:0; color:var(--muted); font-size:14px; line-height:1.9; }
.directory-count { display:flex; align-items:center; gap:16px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.directory-count strong { font-family:"Songti SC",serif; font-size:44px; font-weight:500; line-height:1; }
.directory-count span { color:var(--muted); font-size:11px; line-height:1.65; }
.directory-tools { position:sticky; top:0; z-index:10; border-block:1px solid var(--line); background:rgba(244,246,245,.95); backdrop-filter:blur(16px); }
.directory-search { max-width:1280px; height:70px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:15px; border-bottom:1px solid var(--line); }
.directory-search>span { color:var(--brand-dark); font-family:serif; font-size:29px; transform:rotate(-18deg); }
.directory-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-family:"Songti SC","STSong",serif; font-size:20px; }
.directory-search input::placeholder { color:#96a09c; }
.directory-search input::-webkit-search-cancel-button { cursor:pointer; }
.filter-row { max-width:1280px; min-height:65px; margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:22px; }
.filter-group { display:flex; gap:4px; }
.filter-group button { padding:8px 13px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font-size:12px; }
.filter-group button.active { background:var(--ink); color:#fff; }
.format-filter { padding-left:22px; border-left:1px solid var(--line); }
.format-filter button.active { border-color:#9ed9c9; background:var(--brand-soft); color:var(--brand-dark); }
.select-wrap { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; letter-spacing:.06em; }
.select-wrap+.select-wrap { margin-left:0; }
.select-wrap select { max-width:150px; padding:8px 25px 8px 10px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font-size:11px; }
.directory-results { max-width:1280px; margin:0 auto; padding:27px 24px 90px; }
.results-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.results-meta button { padding:0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); font-size:11px; }
.language-group { margin-top:52px; }
.language-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.language-heading h2 { margin:0; font-family:"Songti SC","STSong",serif; font-size:29px; font-weight:600; }
.language-heading span { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--muted); font-size:11px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.resource-card { position:relative; min-height:430px; padding:27px; display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.5); transition:background .2s,transform .2s,box-shadow .2s; }
.resource-card:hover { z-index:1; background:#fff; box-shadow:0 18px 38px rgba(31,41,38,.08); transform:translateY(-2px); }
.resource-rank { color:#98a19d; font-size:10px; letter-spacing:.1em; }
.resource-formats { position:absolute; top:21px; right:23px; display:flex; gap:5px; }
.resource-formats span { padding:5px 8px; border-radius:3px; background:var(--brand-soft); color:var(--brand-dark); font-size:9px; }
.resource-formats span:nth-child(2) { background:#edf2e8; color:#58704f; }
.resource-formats span:nth-child(3) { background:var(--sand); color:#755f43; }
.resource-card h3 { margin:44px 0 10px; max-width:92%; font-family:"Songti SC","STSong",serif; font-size:26px; line-height:1.3; font-weight:600; letter-spacing:-.025em; }
.resource-host { margin:0; font-size:12px; font-weight:700; }
.resource-host span { display:block; margin-top:5px; color:var(--muted); font-size:10px; font-weight:400; }
.resource-description { margin:23px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.resource-topics { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:17px; }
.resource-topics span { color:var(--brand-dark); font-size:10px; }
.resource-footer { margin-top:auto; padding-top:22px; display:flex; align-items:end; justify-content:space-between; gap:18px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.resource-footer a { color:var(--ink); font-size:11px; font-weight:700; white-space:nowrap; }
.directory-empty { margin:65px 0; padding:65px 20px; border:1px solid var(--line); text-align:center; background:rgba(255,255,255,.5); }
.directory-empty b { font-family:"Songti SC",serif; font-size:27px; }
.directory-empty p { margin:10px 0 0; color:var(--muted); font-size:13px; }
.directory-method { padding:70px max(24px,calc((100vw - 1232px)/2)); display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; background:#176e5c; color:#fff; }
.section-number { margin:0; color:rgba(255,255,255,.62); font-size:10px; font-weight:800; letter-spacing:.13em; }
.directory-method h2 { margin:10px 0 0; font-family:"Songti SC","STSong",serif; font-size:37px; font-weight:500; }
.method-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px 38px; }
.method-grid p { margin:0; color:rgba(255,255,255,.7); font-size:12px; line-height:1.85; }
.method-grid b { display:block; margin-bottom:8px; color:#fff; font-size:11px; }
.directory-page-footer { padding:24px max(24px,calc((100vw - 1180px)/2)); display:block; border-top:1px solid var(--line); color:var(--muted); background:var(--paper); font-size:10px; line-height:1.7; }
.directory-page-footer span { display:block; }
@media(max-width:900px){.directory-hero{grid-template-columns:1fr;gap:36px}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-row{overflow-x:auto}.select-wrap{flex:0 0 auto}.select-wrap:first-of-type{margin-left:0}.directory-method{grid-template-columns:1fr;gap:40px}}
@media(max-width:620px){.directory-nav{padding:0 18px}.directory-hero{max-height:20svh;padding:16px 18px 28px;grid-template-columns:1fr;gap:6px;overflow:hidden}.kicker{margin-bottom:6px;font-size:8px}.directory-hero h1{font-size:26px;line-height:1.08}.directory-hero h1 br{display:none}.directory-intro>p{display:-webkit-box;overflow:hidden;font-size:10px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.directory-count{display:none}.directory-search{height:54px;padding:0 18px}.directory-search input{font-size:15px}.filter-row{padding:10px 18px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}.filter-group{grid-column:1/-1;width:100%;display:grid;gap:4px}.filter-group[data-language-filter]{grid-template-columns:repeat(3,minmax(0,1fr))}.format-filter{grid-template-columns:repeat(4,minmax(0,1fr));padding-left:0;border-left:0}.filter-group button{padding:7px 4px;font-size:10px}.select-wrap,.select-wrap:first-of-type,.select-wrap+.select-wrap{min-width:0;margin-left:0;display:grid;gap:4px;align-items:stretch}.select-wrap span{font-size:8px}.select-wrap select{width:100%;max-width:none;padding:8px 22px 8px 8px;font-size:10px}.directory-results{padding:18px 18px 65px}.language-group{margin-top:30px}.resource-grid{grid-template-columns:1fr}.resource-card{min-height:0;padding:14px 16px}.resource-formats{top:12px;right:14px}.resource-formats span{padding:4px 6px;font-size:8px}.resource-card h3{margin:27px 0 5px;font-size:22px}.resource-host{font-size:10px}.resource-host span{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.resource-description{display:-webkit-box;margin-top:9px;overflow:hidden;font-size:10px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.resource-topics{max-height:14px;margin-top:8px;overflow:hidden;flex-wrap:nowrap}.resource-topics span{font-size:8px;white-space:nowrap}.resource-footer{margin-top:10px;padding-top:9px}.resource-footer>span{display:none}.directory-method{padding:45px 18px}.method-grid{grid-template-columns:1fr;gap:24px}.directory-page-footer{padding:22px 18px;display:block;line-height:1.7}.directory-page-footer span{display:block}}