:root{--paper:#eef1f6;--paper2:#dfe4ee;--ink:#141c33;--ink2:#36405e;--mute:#6b738c;--red:#9a3b2e;--gold:#b8912f;--line:color-mix(in srgb,var(--ink) 18%,transparent);--card:rgba(255,255,255,.9)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Serif TC","PingFang TC","Microsoft JhengHei",serif;color:var(--ink);background:var(--paper);background-image:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.55),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(181,138,60,.14),transparent 50%),repeating-linear-gradient(0deg,transparent 0 23px,rgba(31,27,22,.025) 23px 24px);min-height:100vh;overflow-x:hidden;position:relative}
.ink{position:fixed;border-radius:50%;filter:blur(60px);opacity:.14;pointer-events:none;z-index:0;background:#2a3a7a}
.ink-a{width:52vw;height:52vw;top:-18vw;left:-14vw}
.ink-b{width:38vw;height:38vw;bottom:-12vw;right:-10vw;opacity:.1}
.ink-c{width:22vw;height:22vw;top:45vh;right:12vw;opacity:.06}
#ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#ambient img{position:absolute;width:150px;opacity:.26;filter:saturate(.75) contrast(.95);animation:drift 16s ease-in-out infinite alternate;mix-blend-mode:multiply}
@keyframes drift{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-26px) rotate(2deg)}}
.hero{position:relative;z-index:1;text-align:center;padding:72px 20px 24px;max-width:960px;margin:0 auto}
.seal{display:inline-grid;place-items:center;width:52px;height:52px;border:3px solid var(--red);color:var(--red);font-weight:900;font-size:26px;border-radius:6px;transform:rotate(-6deg);margin-bottom:10px;background:rgba(255,255,255,.4)}
h1{margin:0;font-size:clamp(40px,8vw,74px);line-height:1.1;letter-spacing:.08em}
.brush{font-family:"Cinzel","Noto Serif TC",serif;font-weight:700;color:var(--ink);text-shadow:2px 2px 0 rgba(181,138,60,.25)}
.sub{color:var(--ink2);font-size:17px;max-width:620px;margin:14px auto 22px;line-height:1.7}
.hero-actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.count{color:var(--mute);font-size:14px}
.btn{font:inherit;cursor:pointer;border-radius:999px;padding:10px 20px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:.15s;font-size:15px}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(31,27,22,.15)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-sm{padding:7px 14px;font-size:14px}
.btn-red{border-color:var(--red);color:var(--red)}
.toc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.toc a{text-decoration:none;color:var(--ink2);border:1px solid var(--line);background:rgba(255,255,255,.5);padding:6px 14px;border-radius:999px;font-size:14px}
.toc a:hover{border-color:var(--gold);color:var(--ink)}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:10px 20px 60px}
.cat{margin:48px 0 0}
.cat-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:22px}
.cat-head h2{margin:0;font-size:28px;letter-spacing:.06em}
.cat-head h2::before{content:"▋";color:var(--red);margin-right:6px}
.cat-head .note{color:var(--mute);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px 18px;display:grid;grid-template-columns:104px 1fr;gap:16px;box-shadow:0 2px 0 rgba(31,27,22,.06),0 10px 24px -14px rgba(31,27,22,.35);transition:.18s;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0% 100%,rgba(31,27,22,.08),transparent 45%);pointer-events:none}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(31,27,22,.06),0 18px 30px -14px rgba(31,27,22,.45)}
.card img{width:104px;height:139px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:var(--paper2);padding:4px;transition:.25s}
.card:hover img{transform:scale(1.04) rotate(-1.5deg)}
.guard{font-size:12px;color:var(--mute);text-align:center;margin-top:4px}
.card h3{margin:0 0 2px;font-size:21px;line-height:1.25}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--red)}
.card .s{color:var(--mute);font-size:13px;margin-bottom:6px}
.card p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.tags span{font-size:11px;color:var(--gold);border:1px solid rgba(181,138,60,.45);border-radius:4px;padding:1px 6px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.url{font-size:11px;color:var(--mute);word-break:break-all;margin-top:6px;font-family:ui-monospace,Menlo,monospace}
.mirror{font-size:12px;color:var(--mute)}
.mirror a{color:var(--mute)}
.foot{position:relative;z-index:1;text-align:center;color:var(--mute);font-size:13px;padding:30px 20px 50px;border-top:1px solid var(--line)}
.foot a{color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:999px;opacity:0;transition:.25s;z-index:9;pointer-events:none;font-size:14px}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){.card{grid-template-columns:84px 1fr;gap:12px;padding:14px}.card img{width:84px;height:112px}#ambient img{width:100px;opacity:.18}.hero{padding-top:48px}}
@media(prefers-reduced-motion:reduce){#ambient img{animation:none}}