:root{--ink:#000;--paper:#fff;--gold:#d4af37;--muted:#666}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at 1px 1px,#ececec 1px,transparent 1px) 0 0/12px 12px var(--paper);color:var(--ink);font-family:Inter,Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.65}
a{color:var(--ink);text-decoration:underline}
a.btn{display:inline-block;border:1px solid var(--ink);padding:.7rem 1rem;border-radius:10px;text-decoration:none}
a.btn:hover{background:var(--ink);color:var(--paper)}
.container{max-width:980px;margin:0 auto;padding:24px}
.hero{padding:72px 0}
.hero h1{font-size:42px;margin:0 0 12px}
.hero p{max-width:720px;font-size:18px;margin:0 0 20px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid-4{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid #ddd;border-radius:12px;padding:16px}
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #eee}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav a{margin:0 8px}
.highlight{background:linear-gradient(120deg,var(--gold),var(--gold));background-repeat:no-repeat;background-size:100% .25em;background-position:0 92%;transition:background-size .25s}
.highlight:hover{background-size:100% 80%}
.footer{border-top:1px solid #eee;margin-top:48px;padding:24px 0;color:var(--muted);font-size:14px}
.tag{display:inline-block;font-size:12px;border:1px solid #000;border-radius:999px;padding:2px 8px;margin-right:6px}
.small{font-size:14px;color:#333}