:root{--bg:#0E1116;--surface:#171B22;--text:#F6F1E7;--dim:#BDB7A9;--accent:#F5AE4B;--border:#2A2F38}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);
font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent)}main{max-width:1080px;margin:0 auto;padding:24px 16px 64px}
header{display:flex;align-items:center;gap:12px;padding:16px;max-width:1080px;margin:0 auto}
header img{width:40px;height:40px;border-radius:10px}header a{color:var(--text);text-decoration:none;font-weight:800;font-size:20px}
.hero{padding:32px 0 8px}.hero h1{font-size:40px;line-height:1.15;margin:0 0 12px}
.hero p{color:var(--dim);font-size:18px;max-width:640px}
.pill{display:inline-block;margin-top:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--border);color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:24px}
.card{text-decoration:none;color:var(--text)}.card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;
border:1px solid var(--border);background:var(--surface)}.card b{display:block;font-size:14px;line-height:1.3;margin-top:6px}
.card span{color:var(--dim);font-size:13px}.book{display:grid;grid-template-columns:240px 1fr;gap:32px;margin-top:16px}
.book img{width:100%;border-radius:12px;border:1px solid var(--border)}.book h1{margin:0;font-size:32px;line-height:1.2}
.by{color:var(--dim);margin:6px 0 16px}.ai{color:var(--dim);font-size:13px;border-left:3px solid var(--accent);padding-left:10px}
ul{padding-left:20px}.soon{columns:2 320px;column-gap:32px;padding-left:24px}.soon li{break-inside:avoid;margin:4px 0}
.soon b{font-weight:600}.age{display:inline-block;font-size:12px;font-weight:800;padding:1px 6px;border-radius:5px;
border:1px solid var(--border);color:var(--text);margin-left:6px;vertical-align:middle}.cover{position:relative;display:block}
.cover .age{position:absolute;left:6px;top:6px;margin:0;font-size:12px;background:rgba(0,0,0,.65);border-color:rgba(255,255,255,.55);color:#fff}footer{max-width:1080px;margin:0 auto;padding:24px 16px;color:var(--dim);font-size:14px;border-top:1px solid var(--border)}
@media(max-width:640px){.book{grid-template-columns:1fr}.book img{max-width:240px}.hero h1{font-size:30px}}