@open330/kiwimu 0.4.0 → 0.7.1

package/bin/kiwimu

@@ -1,2 +1,2 @@
 #!/usr/bin/env bun
-await import("../src/index.ts");
+import "../src/index.ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open330/kiwimu",
-  "version": "0.4.0",
+  "version": "0.7.1",
   "description": "Turn textbooks, PDFs, and web content into your own interlinked learning wiki powered by LLM",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   "files": [
     "bin/**/*",
     "src/**/*",
+    "personas/**/*",
     "assets/**/*",
     "README.md",
     "LICENSE"
@@ -48,6 +49,7 @@
     "mammoth": "^1.12.0",
     "marked": "^15.0.0",
     "pdf-parse": "1.1.1",
+    "sanitize-html": "^2.17.2",
     "smol-toml": "^1.3.1",
     "turndown": "^7.2.0"
   },
@@ -58,6 +60,7 @@
   "devDependencies": {
     "@types/bun": "latest",
     "@types/pdf-parse": "^1.1.5",
+    "@types/sanitize-html": "^2.16.1",
     "@types/turndown": "^5.0.5"
   }
 }

package/personas/namuwiki.json

@@ -0,0 +1,6 @@
+{
+  "name": "나무위키",
+  "description": "나무위키 특유의 문체와 스타일로 문서를 작성합니다",
+  "system_prompt": "당신은 나무위키 스타일의 위키 편집자입니다. 다음 특징을 반드시 지켜주세요:\n\n1. **문체**: 해요체(~입니다/~합니다)를 기본으로 하되, 가끔 반말(~이다/~한다)을 섞어 사용\n2. **유머**: 적절한 곳에 ~~취소선 드립~~, (괄호 안의 부연설명), [1] 각주 스타일의 코멘트를 삽입\n3. **강조**: 중요한 키워드는 **굵게** 처리하고, 핵심 개념은 반복 강조\n4. **서술 톤**: 백과사전적이면서도 친근한 톤. \"~라고 한다\", \"~라고 카더라\" 등의 표현 활용\n5. **구조**: 목차가 잘 정리된 체계적 구조. 소제목을 적극 활용\n6. **부가 정보**: \"여담으로~\", \"참고로~\", \"사실~\" 등의 표현으로 부가 정보 추가\n7. **링크**: 관련 개념에 적극적으로 [[위키 링크]]를 사용\n\n절대 딱딱한 교과서 문체로 쓰지 마세요. 읽는 사람이 재미있게 학습할 수 있도록 작성해주세요.",
+  "content_style": "Write in Korean 나무위키 style:\n- Use 해요체 with occasional 반말 mix\n- Add ~~strikethrough humor~~ and (parenthetical asides)\n- Bold **key terms** generously\n- Use phrases like \"~라고 한다\", \"여담으로~\", \"참고로~\"\n- Be encyclopedic yet friendly and entertaining\n- Structure with clear subsections\n- Use [[wiki links]] actively for related concepts"
+}

package/src/build/renderer.ts

@@ -1,10 +1,11 @@
 import { mkdirSync, rmSync, cpSync, existsSync } from "fs";
 import { join, dirname } from "path";
 import { marked } from "marked";
+import sanitizeHtml from "sanitize-html";
 import type { KiwiConfig } from "../config";
 import type { Store } from "../store";
 import { buildGraphData } from "../pipeline/graph";
-import { renderPage, renderIndex, renderGraph } from "./templates";
+import { renderPage, renderIndex, renderGraph, renderQuizPage } from "./templates";
 
 // Fix internal wiki links: /wiki/slug → /wiki/slug.html
 function fixWikiLinks(html: string): string {
@@ -68,14 +69,28 @@ export async function buildSite(store: Store, config: KiwiConfig, projectRoot: s
   const sourcePages = store.listSourcePages();
   const conceptPages = store.listConceptPages();
   const wikiName = config.project.name;
+  const backlinksMap = store.getAllBacklinksGrouped();
 
   for (const page of pages) {
     let htmlContent = await marked(page.content);
+    htmlContent = sanitizeHtml(htmlContent, {
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+        'img', 'details', 'summary', 'kbd', 'del', 's', 'sup', 'sub',
+        'span', 'div', 'section', 'figure', 'figcaption', 'mark'
+      ]),
+      allowedAttributes: {
+        ...sanitizeHtml.defaults.allowedAttributes,
+        '*': ['id', 'class', 'style'],
+        'img': ['src', 'alt', 'title', 'width', 'height'],
+        'a': ['href', 'title', 'target', 'rel'],
+      },
+      allowedSchemes: ['http', 'https', 'mailto'],
+    });
     htmlContent = fixWikiLinks(htmlContent);
 
     const { body, externalRefs } = extractExternalRefs(htmlContent);
     const toc = generateToc(page.content);
-    const backlinks = store.getBacklinks(page.id).map((bl) => ({
+    const backlinks = (backlinksMap.get(page.id) || []).map((bl) => ({
       slug: bl.slug,
       title: bl.title,
       pageType: bl.page_type,
@@ -116,6 +131,38 @@ export async function buildSite(store: Store, config: KiwiConfig, projectRoot: s
     })
   );
 
+  // Quiz page
+  const quizzes = store.getAllQuizzes();
+  await Bun.write(
+    join(outputDir, "quiz.html"),
+    renderQuizPage({
+      wikiName,
+      quizzes: quizzes.map((q) => ({
+        id: q.id,
+        question: q.question,
+        answer: q.answer,
+        quiz_type: q.quiz_type,
+        page_title: q.page_title,
+        page_slug: q.page_slug,
+      })),
+      sourcePages: sourcePages.map((p) => ({ slug: p.slug, title: p.title })),
+      conceptPages: conceptPages.map((p) => ({ slug: p.slug, title: p.title })),
+    })
+  );
+
+  // Random page redirect
+  mkdirSync(join(wikiDir), { recursive: true });
+  await Bun.write(
+    join(wikiDir, "random.html"),
+    `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>임의 문서</title></head><body><script>
+fetch('/search-index.json').then(r=>r.json()).then(pages=>{
+  const p = pages[Math.floor(Math.random()*pages.length)];
+  if(p) location.href='/wiki/'+p.slug+'.html';
+  else location.href='/';
+});
+</script></body></html>`
+  );
+
   const searchData = pages.map((p) => ({
     slug: p.slug,
     title: p.title,

package/src/build/static/search.js

@@ -5,6 +5,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     if (!input || !dropdown) return;
 
     let searchData = [];
+    let selectedIndex = -1;
     try {
         const resp = await fetch("/search-index.json");
         searchData = await resp.json();
@@ -12,6 +13,12 @@ document.addEventListener("DOMContentLoaded", async () => {
         return;
     }
 
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
     function fuzzyMatch(query, text) {
         query = query.toLowerCase();
         text = text.toLowerCase();
@@ -31,6 +38,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
 
     input.addEventListener("input", () => {
+        selectedIndex = -1;
         const results = search(input.value);
         if (results.length === 0) {
             dropdown.classList.remove("active");
@@ -39,8 +47,8 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
         dropdown.innerHTML = results.map(r =>
             `<a href="/wiki/${r.slug}.html">
-                <strong>${r.title}</strong>
-                <div style="font-size:12px;color:#6c757d;margin-top:2px;">${r.preview.slice(0, 80)}...</div>
+                <strong>${escapeHtml(r.title)}</strong>
+                <div style="font-size:12px;color:#6c757d;margin-top:2px;">${escapeHtml(r.preview.slice(0, 80))}...</div>
             </a>`
         ).join("");
         dropdown.classList.add("active");
@@ -61,6 +69,29 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (e.key === "Escape") {
             dropdown.classList.remove("active");
             input.blur();
+        } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            const items = dropdown.querySelectorAll("a");
+            selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
+            items.forEach((a, i) => a.classList.toggle("selected", i === selectedIndex));
+            items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+        } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            const items = dropdown.querySelectorAll("a");
+            selectedIndex = Math.max(selectedIndex - 1, 0);
+            items.forEach((a, i) => a.classList.toggle("selected", i === selectedIndex));
+        } else if (e.key === "Enter" && selectedIndex >= 0) {
+            e.preventDefault();
+            dropdown.querySelectorAll("a")[selectedIndex]?.click();
+        }
+    });
+
+    // Global "/" shortcut to focus search
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        if (e.key === '/') {
+            e.preventDefault();
+            input.focus();
         }
     });
 });

package/src/build/static/style.css

@@ -6,31 +6,41 @@
     --bg-hover: #eaeaea;
     --text: #1a1a1a;
     --text-muted: #6b6b6b;
-    --link: #0067a3;
-    --link-hover: #004b7a;
+    --link: #0275d8; /* NamuWiki blue link */
+    --link-hover: #0050a0; /* Darker blue for hover */
     --border: #dcdcdc;
-    --accent: #00a495;
+    --accent: #00a495; /* NamuWiki green */
     --accent-dark: #008c7e;
-    --accent-light: #e0f5f3;
+    --accent-light: #e0f5f3; /* Light green for backgrounds */
     --namu-green: #00a495;
     --namu-green-dark: #007a6e;
     --namu-heading-bg: #00a495;
     --sidebar-width: 250px;
     --topbar-height: 44px;
-    --radius: 4px;
+    /* --radius variable removed as all corners are sharp */
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    box-shadow: none; /* Enforce no shadows */
+}
+
+/* Targeted border-radius reset for kiwimu elements only */
+.topbar, .sidebar, .content, .page-card, .toc-box,
+.search-dropdown, .backlinks li a, .stat-card, .quick-link,
+.file-drop, .add-form input, .add-form button,
+.config-card, .badge, .page-type-badge, .page-body table,
+.page-body blockquote, .page-body pre {
+    border-radius: 0;
 }
 
 body {
     font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
     color: var(--text);
     background: var(--bg);
-    line-height: 1.7;
+    line-height: 1.65; /* Updated line-height */
     font-size: 15px;
 }
 
@@ -57,7 +67,7 @@ a:hover {
     padding: 0 16px;
     z-index: 100;
     gap: 12px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+    /* box-shadow: none; -> Handled by global reset */
 }
 
 .topbar-brand {
@@ -92,7 +102,7 @@ a:hover {
     width: 100%;
     padding: 5px 12px;
     border: none;
-    border-radius: 3px;
+    /* border-radius: 3px; -> Handled by global reset */
     font-size: 14px;
     outline: none;
     background: rgba(255,255,255,0.9);
@@ -101,7 +111,7 @@ a:hover {
 
 .topbar-search input:focus {
     background: #ffffff;
-    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
+    /* box-shadow: none; -> Handled by global reset */
 }
 
 .search-dropdown {
@@ -112,8 +122,8 @@ a:hover {
     right: 0;
     background: var(--bg);
     border: 1px solid var(--border);
-    border-radius: var(--radius);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    /* border-radius: var(--radius); -> Handled by global reset */
+    /* box-shadow: none; -> Handled by global reset */
     max-height: 300px;
     overflow-y: auto;
     z-index: 200;
@@ -135,6 +145,10 @@ a:hover {
     text-decoration: none;
 }
 
+.search-dropdown a.selected {
+    background: var(--accent-light);
+}
+
 .search-dropdown .search-highlight {
     color: var(--namu-green);
     font-weight: 600;
@@ -149,7 +163,7 @@ a:hover {
 .btn-graph {
     padding: 4px 10px;
     border: 1px solid rgba(255,255,255,0.3);
-    border-radius: 3px;
+    /* border-radius: 3px; -> Handled by global reset */
     font-size: 13px;
     color: #ffffff;
     white-space: nowrap;
@@ -238,7 +252,7 @@ a:hover {
 }
 
 .page-body {
-    line-height: 1.8;
+    /* line-height: 1.8; -> Removed to inherit from body's 1.65 */
 }
 
 .page-body h2 {
@@ -248,7 +262,7 @@ a:hover {
     padding: 4px 10px;
     background: var(--namu-green);
     color: #ffffff;
-    border-radius: 2px;
+    /* border-radius: 2px; -> Handled by global reset */
 }
 
 .page-body h3 {
@@ -257,7 +271,7 @@ a:hover {
     margin: 22px 0 8px;
     padding: 3px 8px;
     border-left: 4px solid var(--namu-green);
-    background: var(--accent-light);
+    background: none; /* Removed background */
     color: var(--text);
 }
 
@@ -293,14 +307,14 @@ a:hover {
     padding: 8px 14px;
     margin: 10px 0;
     background: #f0faf9;
-    border-radius: 0 var(--radius) var(--radius) 0;
+    /* border-radius: 0 var(--radius) var(--radius) 0; -> Handled by global reset */
     font-size: 14px;
 }
 
 .page-body code {
     background: #f0f0f0;
     padding: 2px 5px;
-    border-radius: 2px;
+    /* border-radius: 2px; -> Handled by global reset */
     font-size: 13px;
     font-family: "JetBrains Mono", "D2Coding", monospace;
 }
@@ -309,7 +323,7 @@ a:hover {
     background: #2b2b2b;
     color: #e0e0e0;
     padding: 14px;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     overflow-x: auto;
     margin: 10px 0;
 }
@@ -322,7 +336,7 @@ a:hover {
 
 .page-body img {
     max-width: 100%;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     margin: 10px 0;
 }
 
@@ -351,11 +365,11 @@ a:hover {
     font-weight: 800;
 }
 
-/* TOC - namuwiki style */
+/* TOC - namuwiki style with counters */
 .toc-box {
     background: #f5f5f5;
     border: 1px solid var(--border);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     padding: 10px 14px;
     margin-bottom: 20px;
 }
@@ -367,29 +381,81 @@ a:hover {
     color: var(--namu-green-dark);
 }
 
-.toc-box .toc ul {
+.toc-box .toc {
+    counter-reset: h2; /* Reset counter for top-level headings */
+}
+
+.toc-box .toc ul { /* Use ul as the base, then li for items */
     list-style: none;
     margin: 6px 0 0 0;
     padding-left: 0;
 }
 
-.toc-box .toc ul ul {
-    padding-left: 16px;
+.toc-box .toc ul ul { /* Nested lists */
+    padding-left: 18px; /* Indent for sub-levels */
 }
 
 .toc-box .toc li {
-    margin: 1px 0;
+    margin: 2px 0; /* Slightly more space */
+    position: relative; /* For counter positioning */
 }
 
-.toc-box .toc a {
+.toc-box .toc li a {
     font-size: 13px;
     color: var(--link);
+    display: block; /* Make link clickable over full line */
+    padding-left: 20px; /* Space for counter */
 }
 
-.toc-box .toc a:hover {
+.toc-box .toc li a:hover {
     color: var(--link-hover);
 }
 
+/* Counter for h2 equivalent */
+.toc-box .toc > ul > li {
+    counter-increment: h2;
+    counter-reset: h3; /* Reset h3 counter for each new h2 */
+}
+.toc-box .toc > ul > li > a::before {
+    content: counter(h2) ". ";
+    position: absolute;
+    left: 0;
+    color: var(--text-muted);
+    font-weight: 400;
+    width: 20px; /* Fixed width for alignment */
+    text-align: right;
+}
+
+/* Counter for h3 equivalent */
+.toc-box .toc > ul > li > ul > li {
+    counter-increment: h3;
+    counter-reset: h4; /* Reset h4 counter for each new h3 */
+}
+.toc-box .toc > ul > li > ul > li > a::before {
+    content: counter(h2) "." counter(h3) ". ";
+    position: absolute;
+    left: 0;
+    color: var(--text-muted);
+    font-weight: 400;
+    width: 20px;
+    text-align: right;
+}
+
+/* Counter for h4 equivalent */
+.toc-box .toc > ul > li > ul > li > ul > li {
+    counter-increment: h4;
+}
+.toc-box .toc > ul > li > ul > li > ul > li > a::before {
+    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
+    position: absolute;
+    left: 0;
+    color: var(--text-muted);
+    font-weight: 400;
+    width: 20px;
+    text-align: right;
+}
+
+
 /* Backlinks */
 .backlinks {
     margin-top: 36px;
@@ -416,7 +482,7 @@ a:hover {
     padding: 3px 10px;
     background: var(--accent-light);
     border: 1px solid var(--namu-green);
-    border-radius: 3px;
+    /* border-radius: 3px; -> Handled by global reset */
     font-size: 13px;
     color: var(--namu-green-dark);
 }
@@ -463,7 +529,7 @@ a:hover {
     padding: 4px 10px;
     background: var(--namu-green);
     color: #ffffff;
-    border-radius: 2px;
+    /* border-radius: 2px; -> Handled by global reset */
 }
 
 .page-cards {
@@ -473,12 +539,22 @@ a:hover {
     margin-bottom: 28px;
 }
 
+.empty-state {
+    grid-column: 1 / -1;
+    padding: 32px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 14px;
+    border: 2px dashed var(--border);
+    margin: 8px 0;
+}
+
 .page-card {
     display: block;
     padding: 10px 14px;
     background: var(--bg);
     border: 1px solid var(--border);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     color: var(--text);
     transition: all 0.15s;
 }
@@ -488,7 +564,7 @@ a:hover {
     border-color: var(--namu-green);
     text-decoration: none;
     transform: translateY(-1px);
-    box-shadow: 0 2px 6px rgba(0,164,149,0.15);
+    /* box-shadow: none; -> Handled by global reset */
 }
 
 .card-title {
@@ -506,7 +582,7 @@ a:hover {
     padding: 10px 18px;
     background: var(--accent-light);
     border: 1px solid var(--namu-green);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     font-size: 14px;
     color: var(--namu-green-dark);
     font-weight: 600;
@@ -539,7 +615,7 @@ a:hover {
     width: 100%;
     height: calc(100vh - 200px);
     border: 1px solid var(--border);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     background: #fafafa;
 }
 
@@ -577,7 +653,7 @@ h4 .headerlink {
     font-size: 11px;
     font-weight: 700;
     padding: 2px 8px;
-    border-radius: 2px;
+    /* border-radius: 2px; -> Handled by global reset */
     margin-bottom: 6px;
     letter-spacing: 0.03em;
 }
@@ -656,7 +732,7 @@ h4 .headerlink {
     padding: 14px;
     background: #f0f7ff;
     border: 1px solid #bdd7ee;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
 }
 
 .external-refs h3 {
@@ -678,7 +754,7 @@ h4 .headerlink {
 
 .external-refs a {
     font-size: 13px;
-    color: #1565c0;
+    color: #1565c0; /* Specific blue for external refs */
 }
 
 /* Backlink type indicators */
@@ -715,7 +791,7 @@ h4 .headerlink {
     padding: 5px 14px;
     border: 1px solid var(--border);
     background: var(--bg-alt);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     font-size: 13px;
     cursor: pointer;
     transition: all 0.15s;
@@ -744,7 +820,7 @@ h4 .headerlink {
     justify-content: center;
     padding: 18px;
     border: 2px dashed var(--border);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     cursor: pointer;
     transition: all 0.15s;
     text-align: center;
@@ -778,7 +854,7 @@ h4 .headerlink {
     flex: 1;
     padding: 8px 12px;
     border: 1px solid var(--border);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     font-size: 14px;
     outline: none;
     transition: border-color 0.2s;
@@ -786,7 +862,7 @@ h4 .headerlink {
 
 .add-form input:focus {
     border-color: var(--namu-green);
-    box-shadow: 0 0 0 2px var(--accent-light);
+    /* box-shadow: none; -> Handled by global reset */
 }
 
 .add-form button {
@@ -794,7 +870,7 @@ h4 .headerlink {
     background: var(--namu-green);
     color: white;
     border: none;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
@@ -813,7 +889,7 @@ h4 .headerlink {
 
 .add-status {
     padding: 8px 12px;
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     font-size: 14px;
 }
 
@@ -849,7 +925,7 @@ h4 .headerlink {
     padding: 10px 14px;
     background: var(--bg-alt);
     border: 1px solid var(--border);
-    border-radius: var(--radius);
+    /* border-radius: var(--radius); -> Handled by global reset */
     text-align: center;
 }
 
@@ -879,7 +955,7 @@ h4 .headerlink {
     display: inline-block;
     width: 12px;
     height: 12px;
-    border-radius: 50%;
+    border-radius: 50%; /* Keep for circular dot */
     vertical-align: middle;
     margin-right: 4px;
 }
@@ -892,11 +968,49 @@ h4 .headerlink {
     background: var(--namu-green);
 }
 
+/* Hamburger menu button */
+.topbar-menu-btn {
+    display: none;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 22px;
+    cursor: pointer;
+    padding: 0 8px;
+}
+
+/* Sidebar overlay */
+.sidebar-overlay {
+    display: none;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
+    .topbar-menu-btn { display: flex; align-items: center; }
+
     .sidebar {
+        position: fixed;
+        left: -260px;
+        top: 46px;
+        bottom: 0;
+        width: 260px;
+        z-index: 99;
+        transition: left 0.25s ease;
+        background: var(--bg);
+        display: block !important;
+    }
+    .sidebar.open { left: 0; }
+
+    .sidebar-overlay {
         display: none;
+        position: fixed;
+        inset: 0;
+        top: 46px;
+        background: rgba(0,0,0,0.4);
+        z-index: 98;
     }
+    .sidebar-overlay.active { display: block; }
+
     .content {
         margin-left: 0;
         padding: 16px 14px;
@@ -905,3 +1019,26 @@ h4 .headerlink {
         max-width: 180px;
     }
 }
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #1a1a2e;
+        --bg-alt: #16213e;
+        --bg-hover: #0f3460;
+        --text: #e0e0e0;
+        --text-muted: #8e8e8e;
+        --text-dark: #ffffff;
+        --border: #2a2a4a;
+        --accent-light: #1a3a3a;
+        --namu-green: #00b4a6;
+        --namu-green-dark: #008c7e;
+    }
+
+    .topbar { background: #004d40; }
+    .page-body h2 { background: #006050; }
+    .page-card { background: var(--bg-alt); }
+    .toc-box { background: var(--bg-alt); }
+    .sidebar { background: var(--bg); border-right-color: var(--border); }
+    img { opacity: 0.9; }
+}