:root { --ink:#142034; --muted:#647188; --line:#dde4ef; --paper:#f7f9fc; --blue:#1e4bd8; --blue-dark:#15399f; --yellow:#ffcf5c; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
header { background:var(--white); border-bottom:1px solid var(--line); }
.topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:flex; align-items:center; font-size:1.15rem; font-weight:850; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; margin-right:10px; color:#fff; background:var(--blue); border-radius:11px; font-size:1.15rem; box-shadow:4px 4px 0 #c7d4ff; }
nav { display:flex; gap:22px; font-size:.92rem; font-weight:650; color:#4f5e74; }
nav a:hover { color:var(--blue); }
.notice { border-bottom:1px solid var(--line); background:#eef3ff; color:#345090; font-size:.82rem; text-align:center; padding:9px 18px; }
main { padding:48px 0 70px; }
.intro { display:grid; grid-template-columns:1.12fr .88fr; gap:38px; align-items:end; margin-bottom:36px; }
h1 { margin:0 0 14px; max-width:700px; font-size:clamp(2.15rem,6vw,4.35rem); line-height:1.02; letter-spacing:-.07em; }
h1 em { font-style:normal; color:var(--blue); }
.intro p { max-width:600px; margin:0; color:var(--muted); font-size:1.02rem; line-height:1.75; }
.notebook { position:relative; min-height:150px; padding:23px 25px 22px 37px; overflow:hidden; border:1px solid #d4dff8; border-radius:16px; background:#fff; box-shadow:10px 10px 0 #e1eaff; transform:rotate(1.3deg); }
.notebook:before { content:""; position:absolute; left:19px; top:0; bottom:0; width:2px; background:#ffcf5c; }
.notebook:after { content:""; position:absolute; inset:25px 0 0 0; background:repeating-linear-gradient(to bottom, transparent 0 23px, #e8eef8 24px 25px); pointer-events:none; }
.notebook strong,.notebook span { position:relative; z-index:1; display:block; }
.notebook strong { font-size:1.05rem; margin-bottom:21px; }
.notebook span { color:#58667b; font-size:.88rem; }
.search-panel { display:grid; grid-template-columns:1fr auto; gap:14px; padding:14px; margin-bottom:28px; background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 32px rgba(24,43,80,.06); }
.search { display:flex; align-items:center; gap:10px; min-width:0; padding:0 12px; }
.search svg { flex:none; color:#8492aa; }
input { width:100%; padding:10px 0; border:0; outline:0; color:var(--ink); font:inherit; font-size:1rem; }
input::placeholder { color:#95a1b5; }
.count { align-self:center; padding:9px 13px; border-radius:10px; background:#edf2ff; color:#4160a8; white-space:nowrap; font-size:.83rem; font-weight:700; }
.filters { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:27px; }
.filter { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:#5c6a80; cursor:pointer; font:inherit; font-size:.88rem; font-weight:700; transition:.18s; }
.filter:hover,.filter.active { color:#fff; border-color:var(--blue); background:var(--blue); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 15px; }
.section-head h2 { margin:0; font-size:1.12rem; letter-spacing:-.03em; }
.section-head span { color:#8390a4; font-size:.8rem; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.card { position:relative; display:flex; flex-direction:column; min-height:222px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--white); transition:transform .18s,box-shadow .18s,border-color .18s; }
.card:hover { border-color:#b8c8f5; box-shadow:0 10px 26px rgba(26,57,120,.10); transform:translateY(-3px); }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#eff3ff; color:#214ccb; font-size:1.22rem; }
.tag { padding:5px 8px; border-radius:7px; background:#f2f5f9; color:#718099; font-size:.72rem; font-weight:750; }
.card h3 { margin:18px 0 7px; font-size:1.1rem; letter-spacing:-.025em; }
.card p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.65; }
.card footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:18px; color:#52617a; font-size:.78rem; }
.go { color:var(--blue); font-weight:780; }
.go:after { content:" ↗"; }
.empty { display:none; padding:38px; border:1px dashed #c4cfdf; border-radius:16px; text-align:center; color:#68768b; background:#fff; }
.rule { display:grid; grid-template-columns:auto 1fr; gap:13px; margin-top:38px; padding:19px 20px; border-radius:15px; background:#172642; color:#dce5f6; }
.rule b { color:var(--yellow); }
.rule p { margin:0; color:#c7d2e8; font-size:.86rem; line-height:1.7; }
footer.site-footer { margin-top:32px; color:#77849a; font-size:.8rem; text-align:center; }
@media (max-width:760px) { .wrap{padding:0 16px} .topbar{min-height:64px} nav{display:none} main{padding-top:32px} .intro{grid-template-columns:1fr;gap:23px}.notebook{min-height:120px}.grid{grid-template-columns:1fr}.search-panel{grid-template-columns:1fr}.count{justify-self:start}.card{min-height:194px} }