:root{--bg:#f6f7fb;--ink:#1b2340;--muted:#5d6682;--card:#fff;--line:#e3e6f0;--accent:#2f5bff;--sun:#ffc93c}
@media (prefers-color-scheme:dark){:root{--bg:#10131f;--ink:#eef0f8;--muted:#a3abc4;--card:#1a1f31;--line:#2b3250;--accent:#6f8dff}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.top{padding:48px 20px 32px;text-align:center;border-bottom:4px solid var(--sun)}
.top h1{margin:0;font-size:clamp(2rem,6vw,3.5rem);letter-spacing:-.02em}
.top p{margin:8px 0 0;color:var(--muted)}
main{max-width:1000px;margin:0 auto;padding:32px 20px 64px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card:hover{border-color:var(--accent)}
.card:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent),var(--sun));display:flex;align-items:center;justify-content:center;font-size:3rem}
.thumb img{width:100%;height:100%;object-fit:cover}
.card h2{margin:0;padding:14px 16px 4px;font-size:1.15rem}
.card p{margin:0;padding:0 16px 16px;color:var(--muted);font-size:.95rem}
.back{display:inline-block;margin-bottom:20px;color:var(--accent);font-weight:600}
.detail{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.detail .body{padding:24px}
.detail h1{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.4rem)}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);margin:16px 0 24px;padding:0;list-style:none}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:14px 28px;border-radius:10px;font-weight:700;font-size:1.05rem}
.btn:hover{filter:brightness(1.1)}
footer{text-align:center;padding:24px;color:var(--muted);font-size:.9rem}