: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 .brand { display:flex; align-items:center; gap:9px; }
body > header .brand img { display:block; width:28px; height:28px; }
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; }
.article-edit { min-height:30px; width:30px; padding:0; border-radius:6px; background:transparent; color:#aeb7c6; font-size:19px; line-height:1; }.article-edit:hover { background:#303949; color:#f1be55; }
.article-edit-form { display:grid; gap:16px; max-width:820px; }.article-edit-form > header { display:grid; gap:12px; margin:0; }.article-edit-form > label,.article-edit-form > header > label { display:grid; gap:6px; color:#c7cfdb; font-size:14px; }.article-edit-form input,.article-edit-form textarea,.article-edit-form select { width:100%; background:#1c222d; color:#f0f2f6; border:1px solid #3d4657; border-radius:8px; padding:11px; }.article-edit-form textarea[name="summary"] { min-height:90px; resize:vertical; }.wysiwyg-toolbar { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }.wysiwyg-toolbar button { min-height:32px; min-width:36px; padding:4px 8px; background:#303949; color:#e8ebf0; border-radius:6px; }.wysiwyg-editor { min-height:280px; padding:16px; border:1px solid #3d4657; border-radius:8px; background:#151a22; color:#f0f2f6; outline:none; }.wysiwyg-editor:focus { border-color:#e5a93a; box-shadow:0 0 0 2px #e5a93a33; }.article-html-source { min-height:160px; resize:vertical; font:13px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }.article-edit-form > label > span { color:#8e98aa; font-size:12px; line-height:1.4; }.article-edit-form .article-color-form { margin:0; align-items:center; }.article-edit-form .article-color-form > label { display:flex; align-items:center; gap:7px; color:#c7cfdb; font-size:14px; }.article-edit-form .article-color-form input { width:34px; height:28px; padding:1px; border:0; background:transparent; }
.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); }

/* Forest entrance */
.forest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin:32px 0}
.forest-card{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid #435244;border-radius:18px;background:linear-gradient(140deg,#202d29,#161e28);color:#f3f5f7;text-decoration:none;min-height:235px}
.forest-card:hover{border-color:#b7cf9a;transform:translateY(-2px)}
.forest-card h2,.forest-card p{margin:0}.forest-card small{color:#bac6c2}.forest-open{margin-top:auto;color:#b7cf9a}
.forest-create{border-top:1px solid #39434b;padding-top:24px}.forest-create summary{cursor:pointer;font-size:1.15rem}.forest-create form{display:grid;gap:16px;max-width:540px;margin-top:24px}.forest-create label{display:grid;gap:8px}.forest-create input,.forest-create textarea{width:100%}.forest-create small{color:#adb9c6}.forest-home{align-self:center;white-space:nowrap;margin-right:8px}

/* Shared layout rules: allow content to shrink and keep controls comfortably spaced. */
:root {
  --page-gutter: clamp(16px, 3vw, 30px);
  --control-gap: 8px;
  --mobile-nav-height: calc(112px + env(safe-area-inset-bottom, 0px));
}
body { line-height: 1.5; }
body > header .brand { flex-shrink: 0; }
body > header > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page { padding: 28px var(--page-gutter); }
.page > *, .tree-page > *, form, label { min-width: 0; }
button, input, select, textarea { min-width: 0; max-width: 100%; }
button { min-height: 44px; line-height: 1.3; padding: 10px 14px; overflow-wrap: anywhere; }
input:not([type="color"]):not([type="checkbox"]), select, textarea {
  background: #1c222d; color: #f0f2f6; border: 1px solid #3d4657;
  border-radius: 8px; padding: 11px; font-size: 16px;
}
textarea { resize: vertical; }
input:not([type="color"]):not([type="checkbox"]), select { min-height: 44px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #e5a93a; outline-offset: 3px;
}
.page h1, .page h2, .article-card, .forest-card, .content, .comment-content, .activity, .lineage {
  overflow-wrap: anywhere;
}
.content img { max-width: 100%; height: auto; }
.toolbar { gap: var(--control-gap); align-items: stretch; }
.toolbar > button, .toolbar > a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px; margin: 0;
  background: #303949; color: #e8ebf0; border-radius: 8px;
  text-decoration: none; font-size: 14px; font-weight: 750; line-height: 1.3;
}
.toolbar > [aria-current="page"] { background: #e5a93a; color: #17120a; }
.catalog-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 12px; margin: 24px 0 16px; }
.list-toolbar { flex-wrap: wrap; gap: 12px 20px; margin: 0 0 20px; }
.result-count { margin: 0; }
.pagination { gap: 12px; flex-wrap: wrap; }
.pagination button { min-height: 44px; padding: 10px 14px; font-size: 13px; }
.pagination span { text-align: center; }
.section-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.article-grid { gap: 16px; }
.article-card { padding: 20px; gap: 10px; }
.back-link { margin: 0 0 20px; }
.history-tabs, .article-color-form { flex-wrap: wrap; gap: 10px; }
.article-edit, .comment-edit { min-width: 44px; min-height: 44px; }
.wysiwyg-toolbar { gap: 8px; }
.wysiwyg-toolbar button { min-width: 44px; min-height: 44px; }
.activity > div, .descendant > span, .lineage > * { min-width: 0; }
.descendant { padding-left: min(calc(6px + var(--depth) * 14px), 25%); overflow-wrap: anywhere; }
.universe-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 46px auto auto;
  gap: 12px; padding: 16px;
}
.universe-row input[name="name"] { min-width: 0; width: 100%; }
.universe-row input[type="color"] { width: 44px; height: 44px; }
.forest-create input, .forest-create textarea { background: #1c222d; color: #f0f2f6; }
.forest-create button { justify-self: start; }
.tree-page { padding: 20px var(--page-gutter); gap: 16px; }
.tree-page .toolbar, .tree-heading { margin: 0; flex-shrink: 0; }
.tree-heading { align-items: center; flex-wrap: wrap; gap: 16px; }
.tree-heading > div { flex: 1 1 280px; min-width: 0; }
.tree-heading p { margin: 8px 0 0; }
.tree-debug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex-shrink: 0; }
.tree-debug label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.tree-debug input { margin: 0; width: 18px; height: 18px; }
.tree-export-actions { position: static; display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.tree-export { box-shadow: none; }
.canvas-wrap { min-height: 160px; }
.tree-page { overflow: auto; }
.tree-empty { padding: 16px; }
@media (max-width: 850px) {
  .universe-row { grid-template-columns: 18px minmax(0, 1fr) 46px; }
  .universe-row input[name="name"] { grid-column: 2; }
  .universe-row input[type="color"] { grid-column: 3; grid-row: 1; }
  .universe-row small { grid-column: 2 / 4; white-space: normal; }
  .universe-row button { grid-column: 2 / 4; }
}
@media (max-width: 720px) {
  .page { padding: 24px var(--page-gutter) calc(var(--mobile-nav-height) + 24px); }
  .forest-landing { padding-bottom: 32px; }
  .toolbar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    align-items: stretch; z-index: 30;
  }
  .toolbar > button, .toolbar > a {
    min-width: 0; min-height: 44px; padding: 8px 4px; font-size: 12px;
    white-space: normal; overflow-wrap: anywhere; align-self: stretch;
  }
  .catalog-filters { grid-template-columns: minmax(0, 1fr); }
  .list-toolbar, .section-heading { align-items: stretch; gap: 16px; }
  .pagination { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; gap: 8px; }
  .pagination button { padding: 10px; }
  .article-card { padding: 18px; }
  .history-tabs > button { flex: 1 1 120px; }
  .forest-card { padding: 24px; }
  .tree-page { height: calc(100dvh - 58px); padding: 16px var(--page-gutter) calc(var(--mobile-nav-height) + 16px); gap: 12px; }
  .tree-heading { display: flex; padding: 0; gap: 12px; }
  .tree-heading h1 { font-size: 24px; }
  .tree-heading p { display: none; }
  .tree-heading > div { flex-basis: 100%; }
  .canvas-wrap { border: 1px solid #303847; border-radius: 12px; }
  .tree-export-actions { position: static; }
  .tree-export-actions button { flex: 1 1 120px; }
  .comment-meta { align-items: center; }
  .comment-form, .comment-edit-form { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-card:hover, .forest-card:hover { transform: none; }
}

#identity-controls { margin-left:auto; display:flex; align-items:center; gap:12px; min-width:0; }
body > header #identity-controls .identity-login { display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eef0f4; }
#identity-controls button { flex-shrink:0; }
#identity-error { margin:0; padding:10px 24px; background:#191e28; color:#f1be55; }
button:disabled { cursor:not-allowed; opacity:.5; }
.auth-note { color:#aeb7c6; }
@media(max-width:480px) { body > header { gap:8px; padding:0 12px; } body > header .brand { font-size:12px; gap:5px; } body > header .brand img { width:22px; height:22px; } #identity-controls { gap:6px; } body > header #identity-controls .identity-login { max-width:90px; font-size:12px; } #identity-controls button { padding:8px 10px; font-size:12px; } }

.article-cards{margin:24px 0;border-top:1px solid #343e4c;padding-top:16px}.article-cards>summary{cursor:pointer;font-weight:600;margin-bottom:12px}.cards-modal-frame{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:10000;background:transparent}