:root { --page:#f7f6f2; --white:#fff; --ink:#202833; --muted:#748091; --line:#e8e4db; --green:#0e9a84; --green-dark:#087561; --max:1160px; --serif:"Iowan Old Style","Songti SC","STSong","Noto Serif SC",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--page); font-family:var(--sans); line-height:1.65; }
a { color:inherit; text-decoration:none; }
.container { width:min(var(--max),calc(100% - 48px)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.header-content { min-height:82px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#0db39a,#07937e); box-shadow:0 8px 18px rgba(14,154,132,.25); font:700 22px/1 var(--serif); }
.brand strong { display:block; font:700 22px/1 var(--serif); white-space:nowrap; }
.brand small { display:block; margin-top:5px; color:#83909f; font-size:9px; font-weight:750; letter-spacing:2.1px; }
.search-box { min-width:220px; flex:1; max-width:490px; display:flex; align-items:center; gap:11px; height:48px; padding:0 18px; border:1px solid #e5e1d8; border-radius:999px; background:#fffefa; color:#87909d; font-size:14px; }
.search-box svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.search-box:focus-within { border-color:#9bd9cd; box-shadow:0 0 0 4px rgba(14,154,132,.1); }.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; }.search-box input::placeholder { color:#87909d; }
nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
nav a { padding:7px 9px; color:#657182; font-size:14px; font-weight:700; white-space:nowrap; }
nav a:hover { color:var(--green); }
.header-status { padding:10px 18px; border-radius:999px; background:linear-gradient(135deg,#0db39a,#07937e); color:#fff; box-shadow:0 7px 15px rgba(14,154,132,.23); font-size:14px; font-weight:800; white-space:nowrap; }
main { padding:35px 0 72px; }
.breadcrumb { margin:0 0 19px; color:#8490a0; font-size:13px; }
.breadcrumb span { margin:0 7px; color:#c7cdd5; }
.section-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.section-caption p,.resource-heading p,.about-card p:first-child { margin:0; color:var(--green); font-size:10px; font-weight:850; letter-spacing:1.7px; }
.section-caption span { color:#929aa4; font-size:12px; }
h1 { margin:6px 0 24px; font:700 clamp(30px,3.4vw,43px)/1.2 var(--serif); letter-spacing:-.035em; }
.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.category-card { min-height:185px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:0 11px 25px rgba(30,42,49,.06); cursor:pointer; transition:.2s ease; }
.category-card:hover { transform:translateY(-4px); box-shadow:0 18px 31px rgba(30,42,49,.11); }
.category-card[data-selected="true"] { border-color:var(--green); box-shadow:0 0 0 3px rgba(14,166,134,.14),0 15px 30px rgba(30,42,49,.1); }
.category-card:focus-visible { outline:3px solid rgba(14,166,134,.35); outline-offset:3px; }
.category-icon { width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px; border-radius:17px; color:#fff; font:700 23px/1 var(--serif); box-shadow:0 7px 15px rgba(34,48,65,.18); }
.blue{background:#347cf1}.green{background:#08b981}.gold{background:#f5a009}.pink{background:#ec3b95}.purple{background:#8352ee}.cyan{background:#09aec5}
.category-card h2 { margin:0; font:700 17px/1.3 var(--serif); }.category-card p { margin:5px 0 0; color:#98a1ab; font-size:11px; }
.resources-section { margin-top:58px; }
.resource-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.resource-heading h2 { position:relative; margin:4px 0 0; padding-left:14px; font:700 clamp(27px,3vw,36px)/1.2 var(--serif); letter-spacing:-.03em; }.resource-heading h2::before { content:""; position:absolute; inset:3px auto 3px 0; width:5px; border-radius:5px; background:linear-gradient(#10aa91,#f3ad18); }.resource-heading h2 span { margin:0 6px; color:#7d8995; }.sort-note { color:#8792a0; font-size:12px; font-weight:700; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resource-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(30,42,49,.045); cursor:pointer; transition:.2s ease; }.resource-card:hover { transform:translateY(-4px); box-shadow:0 18px 35px rgba(30,42,49,.09); }.resource-card:focus-visible { outline:3px solid rgba(14,166,134,.35); outline-offset:3px; }
.resource-cover { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; padding:24px; color:rgba(255,255,255,.96); text-align:center; }.resource-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 58%); pointer-events:none; }.resource-cover-title { position:relative; z-index:1; display:-webkit-box; max-width:88%; overflow:hidden; font:700 clamp(20px,2.2vw,27px)/1.2 var(--serif); letter-spacing:.01em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.resource-cover b { position:absolute; z-index:1; top:13px; left:13px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:#26313d; font:750 11px/1 var(--sans); letter-spacing:0; }.cover-blue{background:linear-gradient(135deg,#377ae5,#6aa0f5)}.cover-green{background:linear-gradient(135deg,#138a6d,#4db190)}.cover-gold{background:linear-gradient(135deg,#ca8a29,#efbd6e)}
.resource-body { display:flex; flex-direction:column; min-height:200px; padding:17px; }.resource-meta { margin:0 0 8px; color:var(--green); font-size:11px; font-weight:800; }.resource-body h3 { margin:0; font:700 19px/1.35 var(--serif); }.resource-body > p:not(.resource-meta) { margin:9px 0 16px; color:#788391; font-size:13px; }.resource-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }.resource-tags span,.access-code { padding:3px 8px; border-radius:999px; background:#edf6f2; color:var(--green-dark); font-size:10.5px; font-weight:750; }.resource-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }.resource-link { padding:6px 10px; border-radius:8px; background:var(--green); color:#fff; font-size:12px; font-weight:800; }.resource-link:hover { background:var(--green-dark); }.empty-results { grid-column:1/-1; padding:30px; border:1px dashed #c9d4cc; border-radius:16px; color:#758078; text-align:center; }
.included-people { margin-top:14px; border:1px solid #d7e7e2; border-radius:11px; background:#f7fbf9; }.included-people summary { padding:8px 10px; color:var(--green-dark); cursor:pointer; font-size:11px; font-weight:800; list-style:none; }.included-people summary::-webkit-details-marker { display:none; }.included-people summary::after { content:"＋"; float:right; font-size:15px; line-height:.85; }.included-people[open] summary::after { content:"−"; }.people-note { margin:0 10px 8px; color:#7d8987; font-size:10.5px; }.people-list { display:flex; flex-wrap:wrap; gap:5px; padding:0 10px 10px; }.people-list span { padding:3px 7px; border:1px solid #d7e7e2; border-radius:999px; background:#fff; color:#566460; font-size:10.5px; }
.about-card { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:58px; padding:30px 34px; border:1px solid #cfe7df; border-radius:18px; background:linear-gradient(135deg,#e9f5ef,#f9f2de); }.about-card h2 { margin:5px 0 0; font:700 25px/1.35 var(--serif); }.about-card > p { margin:0; color:#65736d; font-size:14px; }
.floating-rail { position:fixed; top:50%; right:16px; z-index:20; display:grid; gap:12px; transform:translateY(-50%); }.rail-entry { position:relative; }.rail-item { width:50px; height:50px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; color:#fff; font:700 14px/1 var(--serif); box-shadow:0 6px 18px rgba(30,42,49,.22); transition:transform .2s ease,box-shadow .2s ease; }.rail-wechat { position:relative; z-index:2; padding:0; background:#20bf62; cursor:pointer; font-family:var(--sans); }.rail-wechat:hover,.rail-wechat[aria-expanded="true"] { transform:translateY(-2px); box-shadow:0 11px 24px rgba(32,191,98,.34); }.rail-about { padding:0; background:#3f83ee; cursor:pointer; }.rail-about:hover { transform:translateY(-2px); }.wechat-panel { position:absolute; top:50%; right:calc(100% + 12px); width:340px; padding:28px 30px 26px; transform:translate(14px,-50%) scale(.98); border:1px solid #e9e4da; border-radius:24px; background:#fff; box-shadow:0 22px 55px rgba(30,42,49,.18); text-align:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,transform .24s ease,visibility .2s ease; }.wechat-panel::after { content:""; position:absolute; top:50%; right:-10px; width:20px; height:20px; transform:translateY(-50%) rotate(45deg); border-top:1px solid #e9e4da; border-right:1px solid #e9e4da; background:#fff; }.rail-entry:hover:not([data-dismissed="true"]) :is(.wechat-panel,.about-panel),.rail-entry[data-open="true"] :is(.wechat-panel,.about-panel) { transform:translate(0,-50%) scale(1); opacity:1; visibility:visible; pointer-events:auto; }.wechat-panel h2 { margin:0; font:700 25px/1.3 var(--serif); }.wechat-subtitle { margin:7px 0 18px; color:#7f8a98; font-size:15px; }.wechat-qr { width:210px; height:210px; display:block; margin:0 auto; padding:8px; border:1px solid #eef0f2; background:#fff; }.wechat-tip { margin:12px 0 0; color:#a7afb9; font-size:12px; }.about-panel { position:absolute; top:50%; right:calc(100% + 12px); width:270px; padding:20px 22px; transform:translate(14px,-50%) scale(.98); border:1px solid #e9e4da; border-radius:18px; background:#fff; box-shadow:0 18px 42px rgba(30,42,49,.16); text-align:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,transform .24s ease,visibility .2s ease; }.about-panel::after { content:""; position:absolute; top:50%; right:-8px; width:16px; height:16px; transform:translateY(-50%) rotate(45deg); border-top:1px solid #e9e4da; border-right:1px solid #e9e4da; background:#fff; }.about-panel h2 { margin:0; font:700 22px/1.3 var(--serif); }.about-panel p { margin:7px 0 15px; color:#7f8a98; font-size:15px; }.about-panel a { color:var(--green); font-size:15px; font-weight:800; }
.updates-main { padding-bottom:90px; }.updates-intro { max-width:680px; padding:28px 0 24px; }.updates-intro > p:first-child { margin:0; color:var(--green); font-size:10px; font-weight:850; letter-spacing:1.7px; }.updates-intro h1 { margin:7px 0 8px; }.updates-intro > p:last-child { margin:0; color:#788391; font-size:14px; }.update-groups { display:grid; gap:24px; max-width:860px; }.update-group { padding:25px 28px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 25px rgba(30,42,49,.045); }.update-month { margin:0 0 14px; padding-left:13px; border-left:4px solid var(--green); font:700 24px/1.3 var(--serif); }.update-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }.update-item { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; border-top:1px solid #f0eee8; }.update-item:first-child { border-top:0; }.update-link { color:#2b70bd; font-size:15px; font-weight:650; }.update-link:hover { color:var(--green-dark); text-decoration:underline; }.update-category { flex:0 0 auto; padding:3px 9px; border-radius:999px; background:#edf6f2; color:var(--green-dark); font-size:11px; font-weight:750; }
footer { padding:25px 0; border-top:1px solid var(--line); background:#fff; color:#87909c; font-size:12px; } footer .container { display:flex; justify-content:space-between; gap:16px; }
@media (max-width:1000px) { .header-content{gap:15px}.search-box{max-width:none}nav{display:none}.category-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px) { .container{width:min(var(--max),calc(100% - 32px))}.header-content{min-height:69px}.brand-mark{width:36px;height:36px;border-radius:11px;font-size:19px}.brand strong{font-size:19px}.brand small{font-size:7.5px}.search-box,.header-status{display:none}main{padding-top:25px}.section-caption{display:block}.section-caption span{display:block;margin-top:5px}.category-grid{grid-template-columns:repeat(2,1fr);gap:13px}.category-card{min-height:160px}.resources-section{margin-top:43px}.resource-heading{display:block}.sort-note{display:block;margin-top:9px}.resource-grid{grid-template-columns:1fr}.about-card{grid-template-columns:1fr;gap:16px;padding:26px}.about-card h2{font-size:23px}.update-group{padding:20px 17px}.update-month{font-size:21px}.update-item{align-items:flex-start}.update-link{font-size:14px}.update-category{font-size:10px}footer .container{display:block}footer .container span:last-child{display:block;margin-top:6px} }
@media (max-width:640px) { .floating-rail{right:4px;gap:10px}.rail-item{width:48px;height:48px;border-width:2px;font-size:14px}.wechat-panel{right:calc(100% + 8px);width:min(290px,calc(100vw - 80px));padding:22px 18px 20px;border-radius:20px}.wechat-panel h2{font-size:22px}.wechat-subtitle{margin-bottom:14px;font-size:13px}.wechat-qr{width:min(190px,70vw);height:auto}.about-panel{right:calc(100% + 8px);width:min(260px,calc(100vw - 80px));padding:18px 16px;border-radius:16px}.about-panel h2{font-size:20px}.about-panel p,.about-panel a{font-size:13px} }