:root { color-scheme: dark; --bg: #140F22; --card: #1F1833; --line: #33294F; --text: #F2EEFA; --dim: #B4ABC9; --accent: #8E6FE6; --accent-hi: #B9A2FF; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 Manrope, system-ui, sans-serif; }
a { color: var(--accent-hi); }
.wrap { max-width: 860px; margin: 0 auto; padding: 20px 16px 56px; }
.brand { display: inline-block; margin-bottom: 24px; color: var(--dim); font-weight: 700; text-decoration: none; }
h1 { margin: 0 0 6px; font: 700 clamp(26px, 6vw, 36px)/1.15 Lora, Georgia, serif; }
h2 { margin: 36px 0 12px; font: 600 20px/1.3 Lora, Georgia, serif; }
.en, .meta { color: var(--dim); }
.en { margin: 0 0 8px; }
.meta { margin: 0 0 16px; font-size: 14px; }
.head { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.cover { width: 100%; height: auto; aspect-ratio: 420 / 596; object-fit: cover; border-radius: 10px; background: var(--card); display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-block; padding: 11px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.btn.main { background: var(--accent); color: #fff; }
.btn.other { border: 1px solid var(--line); color: var(--text); }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.chapters a { display: block; padding: 9px 12px; border-radius: 8px; background: var(--card); color: var(--text); text-decoration: none; }
.titles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
.titles a { color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.3; }
.titles .cover { margin-bottom: 8px; }
.titles span { display: block; }
footer { margin-top: 44px; color: var(--dim); font-size: 14px; }
@media (max-width: 560px) { .head { grid-template-columns: 1fr; gap: 18px; } .head .cover { max-width: 210px; } }