Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493:root { color-scheme: light; --surface-1: #fcfcfb; --plane: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --hairline: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11, 11, 11, 0.1); --accent: #2a78d6;}:root[data-theme="dark"] { color-scheme: dark; --surface-1: #1a1a19; --plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --hairline: #2c2c2a; --baseline: #383835; --border: rgba(255, 255, 255, 0.1); --accent: #3987e5;}
* { box-sizing: border-box;}html,body,#root { height: 100%; margin: 0;}body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--plane); color: var(--text-primary); font-size: 14px;}
.app { display: flex; flex-direction: column; height: 100%;}
/* ---------- header / form ---------- */.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--hairline); background: var(--surface-1);}.topbar h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0.02em;}.topbar .spacer { flex: 1;}
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); background: var(--surface-1);}.form.collapsed { display: none;}.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); font-weight: 600;}.form input[type="text"],.form input[type="number"],.form textarea,.form select { font: inherit; color: var(--text-primary); background: var(--plane); border: 1px solid var(--baseline); border-radius: 6px; padding: 7px 9px;}.form textarea { resize: vertical; min-height: 56px;}.form .row { display: flex; gap: 12px; align-items: end;}.form .row label { flex: 1;}.form .check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px;}.wide { grid-column: 1 / -1;}
button { font: inherit; font-weight: 600; border: 1px solid var(--baseline); border-radius: 6px; padding: 7px 14px; background: var(--surface-1); color: var(--text-primary); cursor: pointer;}button:hover { border-color: var(--text-muted);}button.primary { background: var(--accent); border-color: var(--accent); color: #fff;}button:disabled { opacity: 0.5; cursor: default;}button.small { font-size: 12px; padding: 4px 10px;}
/* ---------- main area ---------- */.main { position: relative; flex: 1; min-height: 0;}.graph-container { position: absolute; inset: 0; background: var(--surface-1);}
.overlay-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 10px; padding: 20px 24px; min-width: 320px; max-width: 480px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);}.overlay-card h3 { margin: 0 0 10px; font-size: 14px;}.progress-line { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 13px; color: var(--text-secondary);}.progress-line .done { color: var(--text-primary);}.progress-bar { height: 4px; border-radius: 2px; background: var(--hairline); margin-top: 10px; overflow: hidden;}.progress-bar > div { height: 100%; background: var(--accent); transition: width 0.3s;}.error-text { color: #d03b3b; font-size: 13px; white-space: pre-wrap;}
/* ---------- legend ---------- */.legend { position: absolute; left: 12px; bottom: 12px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; max-width: 300px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}.legend h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);}.legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; cursor: pointer; user-select: none;}.legend-row:hover { background: var(--plane);}.legend-row .swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid var(--border);}.legend-row.hidden-faction { opacity: 0.45;}.legend-row.hidden-faction .swatch { background: transparent !important; border: 2px solid var(--text-muted);}.legend-row .name { flex: 1; font-size: 13px;}.legend-row .count { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums;}.legend .hint { margin-top: 6px; font-size: 11px; color: var(--text-muted);}.legend-shapes { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--text-secondary);}.legend-shapes .shape { width: 11px; height: 11px; background: var(--text-muted); flex: none;}.legend-shapes .shape-circle { border-radius: 50%;}.legend-shapes .shape-square { border-radius: 2px; margin-left: 10px;}.quote-marker { font-size: 11px; color: var(--text-muted); font-style: italic; margin-bottom: 3px;}
/* ---------- toolbar over graph ---------- */.graph-toolbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; align-items: center;}.seg { display: flex; border: 1px solid var(--baseline); border-radius: 6px; overflow: hidden; background: var(--surface-1);}.seg button { border: none; border-radius: 0; font-size: 12px; padding: 5px 10px; background: transparent;}.seg button.active { background: var(--accent); color: #fff;}
/* ---------- detail panel ---------- */.detail { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 340px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px; overflow-y: auto; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}.detail .close { float: right; border: none; background: none; font-size: 16px; color: var(--text-muted); padding: 0 4px;}.post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px;}.post-head img { width: 40px; height: 40px; border-radius: 50%; background: var(--hairline);}.post-head .names { min-width: 0;}.post-head .display-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.post-head .handle { font-size: 12px; color: var(--text-secondary);}.post-text { white-space: pre-wrap; overflow-wrap: break-word; font-size: 14px; line-height: 1.45; margin: 8px 0;}.faction-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 10px 3px 6px; color: var(--text-primary);}.faction-chip .swatch { width: 10px; height: 10px; border-radius: 50%;}.meta-row { display: flex; gap: 12px; font-size: 12px; color: var(--text-secondary); margin: 8px 0; flex-wrap: wrap;}.thread-label { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);}.thread-truncated { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 0 0 6px 40px;}.ancestors { position: relative;}.ancestors::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: -6px; width: 2px; background: var(--hairline);}.ancestor-card { position: relative; padding: 4px 6px 10px 40px; border-radius: 8px; cursor: pointer;}.ancestor-card:hover { background: var(--plane);}.ancestor-avatar { position: absolute; left: 3px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--hairline); border: 2px solid var(--surface-1); box-sizing: content-box;}.ancestor-head { display: flex; align-items: center; gap: 6px; min-width: 0;}.ancestor-handle { font-size: 12px; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.ancestor-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid var(--border);}.ancestor-text { font-size: 13px; line-height: 1.4; margin-top: 2px; white-space: pre-wrap; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}.selected-card { border: 1px solid var(--baseline); border-radius: 10px; padding: 10px 12px; margin-top: 4px; background: var(--surface-1);}.detail a { color: var(--accent); font-size: 13px;}.detail hr { border: none; border-top: 1px solid var(--hairline); margin: 10px 0;}