:root { color-scheme:dark; font-family:Inter,system-ui,sans-serif; background:#101319; color:#eef0f4; }
* { box-sizing:border-box; }
body { margin:0; }
body > header { height:58px; display:flex; align-items:center; gap:18px; padding:0 24px; background:#191e28; border-bottom:1px solid #313949; }
body > header a { font-weight:800; letter-spacing:.08em; color:#f1be55; text-decoration:none; }
body > header span { color:#aeb7c6; font-size:14px; }
main { min-height:calc(100vh - 58px); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; background:#e5a93a; color:#17120a; border:0; min-height:42px; padding:9px 14px; border-radius:8px; font-weight:750; }
button.secondary { background:#303949; color:#e8ebf0; }
button:hover { filter:brightness(1.08); }
.page { max-width:980px; padding:30px; margin:auto; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.page-intro { margin-bottom:26px; }
.page-intro h1,.article-page h1,.tree-heading h1 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.03em; }
.page-intro p:last-child { color:#aeb7c6; max-width:620px; line-height:1.55; }
.eyebrow { color:#e5a93a; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; }
.catalog-filters { display:grid; grid-template-columns:1fr 220px; gap:10px; margin:22px 0 10px; }
.catalog-filters input,.catalog-filters select,.comment-form input,.comment-form textarea { width:100%; background:#1c222d; color:#f0f2f6; border:1px solid #3d4657; border-radius:8px; padding:11px; }
.catalog-filters input:focus,.catalog-filters select:focus,.comment-form input:focus,.comment-form textarea:focus { outline:2px solid #e5a93a; outline-offset:1px; }
.result-count,.article-updated { color:#aeb7c6; font-size:13px; }
.list-toolbar,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-heading h2 { margin-bottom:0; }
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:9px; color:#aeb7c6; font-size:13px; }
.pagination button { min-height:34px; padding:6px 10px; font-size:12px; }
.pagination button:disabled { opacity:.45; cursor:default; filter:none; }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.article-card { display:grid; gap:7px; color:inherit; text-decoration:none; padding:18px; border:1px solid #303847; border-radius:12px; background:#1c222d; min-height:150px; }
.article-card:hover { border-color:#e5a93a; transform:translateY(-1px); }
.article-card strong { font-size:18px; }.article-card small,.article-card time { color:#aeb7c6; }.article-card span { color:#c7cfdb; line-height:1.45; }.article-card time { margin-top:auto; font-size:12px; }
.back-link { display:inline-block; color:#f1be55; text-decoration:none; margin:-10px 0 22px; }.article-page > header { margin-bottom:20px; }.article-summary { font-size:18px; line-height:1.55; color:#d7dce6; }.content { line-height:1.7; font-size:17px; }.content > :first-child { margin-top:0; }.content > :last-child { margin-bottom:0; }.content p { margin:0 0 1.15em; }.content h2,.content h3,.content h4 { margin:1.65em 0 .55em; line-height:1.2; letter-spacing:-.02em; }.content h2 { font-size:1.45em; }.content h3 { font-size:1.2em; }.content h4 { font-size:1.05em; }.content ul,.content ol { margin:0 0 1.2em; padding-left:1.3em; }.content li+li { margin-top:.35em; }.content blockquote { margin:1.25em 0; padding:.15em 0 .15em 1em; border-left:3px solid #e5a93a; color:#c7cfdb; }.content figure { margin:1.35em 0; }.content figure img { display:block; width:100%; max-width:760px; height:auto; border-radius:10px; background:#1c222d; }.content figcaption { margin-top:.45em; color:#8e98aa; font-size:12px; line-height:1.45; }.content a { color:#f1be55; }.content hr { border:0; border-top:1px solid #303847; margin:1.5em 0; }
.lineage { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:14px 0; color:#aeb7c6; font-size:14px; }.lineage a { color:#f1be55; text-decoration:none; }.lineage a:hover { text-decoration:underline; }.lineage strong { color:#eef0f4; }.lineage-arrow { color:#657086; }
.descendants-section { margin:16px 0; border-top:1px solid #303847; border-bottom:1px solid #303847; }
.descendants-section summary { display:flex; align-items:center; gap:7px; min-height:40px; padding:0 2px; color:#dce1ea; font-size:14px; font-weight:750; cursor:pointer; list-style:none; }
.descendants-section summary::-webkit-details-marker { display:none; }.descendants-section summary::before { content:'›'; color:#8e98aa; font-size:20px; font-weight:400; transition:transform .15s ease; }.descendants-section[open] summary::before { transform:rotate(90deg); }.descendants-section summary span { color:#8e98aa; font-size:12px; font-weight:600; }
.descendants-content { padding:2px 0 8px; }.descendants-content .pagination { margin:0 0 6px; }
.descendants-list { display:grid; gap:1px; }
.descendant { display:flex; align-items:center; gap:7px; min-height:30px; padding:4px 6px 4px calc(6px + var(--depth) * 14px); border-radius:6px; color:#dce1ea; text-decoration:none; }
.descendant:hover { background:#202735; }.descendant-branch { flex:0 0 7px; height:1px; background:#657086; position:relative; }.descendant-branch::before { content:''; position:absolute; left:0; bottom:0; width:1px; height:8px; background:#657086; }
.descendant strong { display:block; font-size:13px; }.descendant small { display:block; margin-top:1px; color:#8e98aa; font-size:11px; }
.comments-section,.activity-section { margin-top:40px; padding-top:24px; border-top:1px solid #303847; }.comments-section h2,.activity-section h2 { margin:0 0 16px; }.comment-form,.comment-edit-form { display:grid; gap:12px; max-width:680px; padding:18px; border:1px solid #303847; border-radius:12px; background:#151a22; }.comment-form label,.comment-edit-form label { display:grid; gap:5px; color:#c7cfdb; }.comment-form label span { color:#8e98aa; font-size:12px; }.comment-form textarea,.comment-form input,.comment-edit-form textarea,.comment-edit-form input { width:100%; background:#1c222d; color:#f0f2f6; border:1px solid #3d4657; border-radius:8px; padding:11px; }.comment-form textarea,.comment-edit-form textarea { min-height:120px; resize:vertical; }.comment-form button { justify-self:start; }.comment-edit-form > div { display:flex; gap:8px; flex-wrap:wrap; }.error { color:#ff9b9b; margin:0; }.comments-list,.activity-list { display:grid; gap:10px; margin-top:22px; }.comment,.activity { padding:14px; border:1px solid #303847; border-radius:10px; background:#1c222d; }.comment-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; color:#aeb7c6; font-size:12px; }.comment-meta strong { color:#eef0f4; font-size:14px; }.comment-edit { margin-left:auto; min-height:28px; width:28px; padding:0; border-radius:6px; background:transparent; color:#aeb7c6; font-size:18px; line-height:1; }.comment-edit:hover { background:#303949; color:#f1be55; }.comment-status { padding:3px 7px; border-radius:999px; font-size:11px; font-weight:700; }.comment-status.pending { color:#f5cf79; background:#4a3b1e; }.comment-status.processing { color:#a9d4ff; background:#1b3d61; }.comment-status.processed { color:#9fdbb2; background:#1e4930; }.comment-content { white-space:pre-wrap; line-height:1.55; margin-top:8px; }.history-tabs { display:flex; gap:8px; border-bottom:1px solid #303847; padding-bottom:12px; }.history-tabs button.active { background:#e5a93a; color:#17120a; }.activity { display:flex; justify-content:space-between; gap:18px; line-height:1.45; }.activity-link { color:inherit; text-decoration:none; }.activity-link:hover { border-color:#e5a93a; }.activity time { flex:0 0 auto; color:#aeb7c6; font-size:12px; }.empty-comments { color:#aeb7c6; }
.tree-page { height:calc(100dvh - 58px); box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; padding:22px; }.tree-heading { display:flex; justify-content:space-between; align-items:baseline; gap:18px; margin-bottom:16px; }.tree-heading h1 { font-size:28px; }.tree-heading p { color:#aeb7c6; font-size:13px; }.canvas-wrap { position:relative; overflow:hidden; flex:1 1 auto; min-height:0; border:1px solid #303847; border-radius:12px; background:radial-gradient(#283040 1px,transparent 1px); background-size:24px 24px; }.mindmap { width:100%; height:100%; cursor:grab; touch-action:none; }.mindmap:active { cursor:grabbing; }.tree-export-actions { position:fixed; z-index:20; left:24px; bottom:24px; display:flex; gap:8px; }.tree-export { box-shadow:0 5px 20px #0008; }.edge { stroke:#657086; stroke-width:2; }.node rect { fill:#202837; stroke:#657086; stroke-width:1.5; rx:7; }.node:hover rect { stroke:#f1be55; stroke-width:2; }.node text { fill:#f6f7fb; font-size:14px; pointer-events:none; }.node .universe { fill:#adb7c9; font-size:11px; }.mindmap,.mindmap * { user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
@media (max-width:720px) { body > header { padding:0 16px; } body > header span { display:none; }.page { padding:20px 16px 92px; }.toolbar { position:fixed; z-index:5; bottom:0; left:0; right:0; margin:0; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); justify-content:space-around; flex-wrap:nowrap; background:#191e28ee; border-top:1px solid #313949; backdrop-filter:blur(10px); }.toolbar button { min-width:0; min-height:44px; padding:8px 9px; font-size:12px; }.catalog-filters { grid-template-columns:1fr; }.list-toolbar,.section-heading { align-items:flex-start; flex-direction:column; gap:8px; }.pagination { width:100%; justify-content:space-between; }.article-grid { grid-template-columns:1fr; }.content { font-size:16px; }.comment-form { padding:14px; }.activity { display:grid; gap:6px; }.tree-page { height:calc(100dvh - 58px); min-height:0; padding:16px 0 82px; }.tree-page .toolbar { left:0; }.tree-heading { padding:0 16px; display:block; }.tree-heading p { margin:8px 0; }.canvas-wrap { min-height:0; height:auto; border-radius:0; border-left:0; border-right:0; }.tree-export-actions { left:16px; bottom:76px; }.lineage { font-size:13px; } }

.themed { --universe-color:#273247; --article-color:#657086; }
.article-card.themed { background:var(--universe-surface); border-color:var(--article-color); }
.article-page.themed { background:var(--universe-surface); border-left:3px solid var(--article-color); }
.article-color-form { display:flex; align-items:center; gap:8px; margin:12px 0; }.article-color-form label { display:flex; align-items:center; gap:7px; color:#aeb7c6; font-size:13px; }.article-color-form input { width:34px; height:28px; padding:1px; border:0; background:transparent; }
.universes-list { display:grid; gap:10px; max-width:720px; }
.universe-row { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #303847; border-radius:10px; background:#1c222d; }
.universe-row strong { flex:1; }.universe-row input[type="color"] { width:46px; height:34px; padding:2px; border:0; background:transparent; }.universe-row input[name="name"] { flex:1; min-width:150px; padding:8px; border:1px solid #3d4657; border-radius:7px; background:#151a22; color:#eef0f4; }.universe-row small { color:#8e98aa; white-space:nowrap; }.universe-swatch { width:18px; height:18px; border-radius:50%; border:1px solid #fff5; }

/* The universe colour is user-defined, so select text dynamically in JS. */
.themed { color:var(--theme-text); }
.article-card.themed strong,.article-card.themed small,.article-card.themed span,.article-card.themed time { color:var(--theme-text); }
.article-page.themed .eyebrow,.article-page.themed h1,.article-page.themed .article-summary,.article-page.themed .content,.article-page.themed .content h2,.article-page.themed .content h3,.article-page.themed .content h4,.article-page.themed .lineage,.article-page.themed .lineage strong,.article-page.themed .article-updated,.article-page.themed .lineage a,.article-page.themed .content a,.article-page.themed .back-link { color:var(--theme-text); }
.node text,.node .universe { fill:var(--theme-text); }