:root{--bg:#0b0e14;--surface:#151b28;--surface2:#1c2436;--line:#222b3e;--txt:#eef1f8;--mut:#94a0b8;--faint:#5f6b82;--accent:#8b5cf6;--accent2:#ec4899;--gold:#f5c451}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none}a:hover{color:var(--gold)}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);padding:22px 0;background:linear-gradient(180deg,rgba(139,92,246,.06),transparent)}
header.site .wrap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand{font-weight:800;font-size:24px;color:var(--txt)}header.site h1.brand{font-size:30px}
header.site .tag,header.site .brand{color:var(--txt)}
.tag{color:var(--mut);font-size:14px}
header.hero{text-align:center;padding:48px 0 32px}header.hero .wrap{flex-direction:column;align-items:center}
header.hero p.tag{margin-top:8px;font-size:16px}
.grid{max-width:1100px;margin:28px auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:0 20px 50px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface2)} .card .thumb img{width:100%;height:100%;object-fit:cover}
.card .noimg{width:100%;height:100%;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:.25}
.card .info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .ctitle{font-weight:600;font-size:16px;line-height:1.35;color:var(--txt)}
.card .cdesc{font-size:13.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .cdate{font-size:12px;color:var(--faint);margin-top:auto;padding-top:6px}
main.article{max-width:760px;margin:0 auto;padding:36px 20px 60px}
main.article h1{font-size:30px;line-height:1.25;margin-bottom:8px;font-weight:800}
main.article .meta{color:var(--faint);font-size:14px;margin-bottom:22px}
main.article figure.cover{margin:0 0 22px;border-radius:14px;overflow:hidden}
main.article figure.cover img,figure img{width:100%;height:auto;border-radius:10px;display:block;margin:14px 0}
main.article p{margin:0 0 16px}main.article a{color:var(--accent2)}
main.article .source{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.back{margin-top:30px;font-size:14px}
footer.site{border-top:1px solid var(--line);padding:24px 0;color:var(--mut);font-size:14px;text-align:center}
@media(max-width:560px){main.article h1{font-size:24px}.grid{gap:16px}}