### Install via PowerShell Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Install the prebuilt binary on Windows using native PowerShell. ```powershell irm https://raw.githubusercontent.com/youdie006/sessionwiki/main/scripts/install.ps1 | iex ``` -------------------------------- ### Install via Cargo Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Install sessionwiki using the Rust package manager. ```console cargo install sessionwiki ``` -------------------------------- ### Install via Homebrew Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Install the sessionwiki CLI on macOS or Linux using Homebrew. ```console brew install youdie006/tap/sessionwiki ``` -------------------------------- ### Install via Shell Script Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Download and install the prebuilt binary for macOS, Linux, or WSL using a shell script. ```console curl -sSL https://raw.githubusercontent.com/youdie006/sessionwiki/main/scripts/install.sh | sh ``` -------------------------------- ### Quick start commands Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Basic commands to scan for sessions, search history, view specific conversations, and launch the web interface. ```console sessionwiki scan # where are my sessions? sessionwiki search "jwt retry" # full-text search across every tool sessionwiki show 3f9c # read the matching conversation sessionwiki web # or browse everything in a local web UI ``` -------------------------------- ### Verify sessionwiki installation Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/commands/recall.md Check if the sessionwiki tool is available in the environment. If this command returns no output, the tool is not installed. ```bash command -v sessionwiki ``` -------------------------------- ### Install sessionwiki plugin Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/README.md Commands to add and install the sessionwiki plugin via the Claude Code marketplace. ```console /plugin marketplace add youdie006/sessionwiki /plugin install sessionwiki@sessionwiki-marketplace ``` -------------------------------- ### Smoke test sessionwiki plugin Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/README.md Commands to verify the plugin installation and test the recall functionality within a Claude Code session. ```bash claude --plugin-dir ./plugin # then in-session: /sessionwiki:recall jwt retry # command fires, shells out to sessionwiki # or: start a task referencing prior work -> the skill auto-recalls ``` -------------------------------- ### Clone and build the project Source: https://github.com/youdie006/sessionwiki/blob/main/CONTRIBUTING.md Initial commands to clone the repository and build the project using Cargo. ```console git clone https://github.com/youdie006/sessionwiki cd sessionwiki cargo build cargo test ``` -------------------------------- ### Run CI checks locally Source: https://github.com/youdie006/sessionwiki/blob/main/CONTRIBUTING.md Commands to run formatting, linting, and tests locally to match CI requirements before pushing. ```console cargo fmt --all cargo clippy --all-targets -- -D warnings cargo test --all ``` -------------------------------- ### Initialize Banner Component Source: https://github.com/youdie006/sessionwiki/blob/main/docs/banner.html Parses URL parameters to configure the theme, language, and size of the banner. It dynamically constructs the logo SVG and injects localized text into the DOM. ```javascript const q = new URLSearchParams(location.search); const theme = q.get('theme') === 'dark' ? 'dark' : 'light'; const lang = q.get('lang') === 'ko' ? 'ko' : 'en'; const size = q.get('size') === 'social' ? 'social' : 'banner'; document.body.dataset.theme = theme; document.body.dataset.size = size; // logo mark (rounded-square node graph) - matches docs/logo-\*.svg const sq = theme === 'dark' ? '#16161b' : '#1e1d1a'; const lnode = '#f4f2ec'; const lline = theme === 'dark' ? '#4a5a78' : '#5b6b86'; const lacc = theme === 'dark' ? '#93a7ef' : '#5b7cf0'; const logoSz = size === 'social' ? 72 : 62; const logo = ` `; document.getElementById('brand').innerHTML = logo + 'sessionwiki.'; const t = { en: { tag: 'Every AI coding session you’ve ever had — searchable, linkable, resumable.', chips: '11 AI coding tools · one searchable archive · 100% local' }, ko: { tag: '지금까지의 모든 AI 코딩 세션 — 검색 · 연결 · 이어가기', chips: 'AI 코딩 도구 11종 · 한 곳에서 검색 · 100% 로컬' }, }[lang]; document.getElementById('tag').innerHTML = t.tag; document.getElementById('chips').innerHTML = t.chips; // decorative loose node graph (right side) const gw = size === 'social' ? 430 : 400, gh = size === 'social' ? 460 : 330; const N = { node: getComputedStyle(document.body).getPropertyValue('--node').trim(), line: getComputedStyle(document.body).getPropertyValue('--line').trim(), acc: getComputedStyle(document.body).getPropertyValue('--accent').trim(), ctr: getComputedStyle(document.body).getPropertyValue('--nodec').trim() }; // node coords on a 420x380 canvas, scaled to gw/gh const pts = { a:[55,80], b:[230,46], c:[372,150], d:[160,180], e:[315,255], f:[92,300], g:[262,330] }; const edges = [['a','b'],['a','d'],['b','c'],['b','e'],['d','e'],['d','f'],['e','g'],['f','g'],['a','e']]; const sx = gw/420, sy = gh/380; const P = k => [pts[k][0]*sx, pts[k][1]*sy]; let svg = ``; svg += ``; for (const [u,v] of edges){ const a=P(u),b=P(v); svg+=``; } svg += ``; const R = { a:13, b:0, c:11, d:16, e:13, f:11, g:10 }; for (const k of Object.keys(pts)){ const p=P(k); if(k==='b') continue; svg += ``; } const b=P('b'); svg += ``; svg += ``; document.getElementById('graph').innerHTML = svg; ``` -------------------------------- ### SessionWiki Architecture Flowchart Source: https://github.com/youdie006/sessionwiki/blob/main/README.md A visual representation of how sessionwiki processes local session files into a searchable SQLite index. ```mermaid flowchart LR subgraph stores["Already on your disk"] A["~/.claude/projects"] B["~/.codex/sessions"] C["~/.gemini/tmp"] end A & B & C --> AD["adapters
(one small file per tool)"] AD --> IDX[("SQLite FTS5 index
trigram tokenizer")] IDX --> CLI["CLI
scan / list / search / show
summarize / resume / brief"] IDX --> WEB["web viewer
127.0.0.1 only"] ``` -------------------------------- ### Event Listeners and Initialization Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Configures search input debouncing, tool selection changes, global keyboard shortcuts, and initial API data fetching. ```javascript let timer = null; $("q").addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(refresh, 250); }); $("tool").addEventListener("change", refresh); document.addEventListener("keydown", (e) => { if (e.key === "/" && document.activeElement !== $("q")) { e.preventDefault(); $("q").focus(); } if (e.key === "Escape" && document.activeElement === $("q")) { $("q").value = ""; refresh(); } }); (async function init() { const stats = await jget("/api/stats"); let sessions = 0, bytes = 0; for (const t of stats.tools) { sessions += t.sessions; bytes += t.bytes; const opt = el("option", "", t.tool); opt.value = t.tool; $("tool").appendChild(opt); } $("stats").textContent = L.stats(sessions.toLocaleString(), stats.tools.length, fmtBytes(bytes)); await refresh(); })(); ``` -------------------------------- ### Session Management CLI Commands Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Commands for searching, resuming, and summarizing LLM sessions. Note that resume requires the original session file to exist, while brief and summarize work across tools. ```console $ sessionwiki search "rate limiter" 76a614028a63 codex 2026-06-11 13:00 .../projects/api-server [assistant] ...the bucket invariant 0 <= tokens <= capacity holds after every step... $ sessionwiki resume 76a6 # reopens that conversation in Codex $ sessionwiki brief 76a6 | claude -p \ "Continue this work: add the missing edge-case tests" $ sessionwiki summarize --recent 20 # synopses for your latest sessions ``` -------------------------------- ### Configure MCP Server for Cursor Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Configuration snippet to add the sessionwiki MCP server to the Cursor editor's mcp.json file. ```json { "mcpServers": { "sessionwiki": { "command": "sessionwiki", "args": ["mcp"] } } } ``` -------------------------------- ### Add MCP Server to Claude Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Command to add the sessionwiki MCP server to Claude. ```console claude mcp add sessionwiki -- sessionwiki mcp ``` -------------------------------- ### Scan AI coding sessions with sessionwiki Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Run the scan command to identify and summarize AI coding sessions stored on your local machine across supported tools. ```console $ sessionwiki scan TOOL SESSIONS SIZE OLDEST NEWEST PATH claude-code 1763 1.1 GB 2026-03-27 2026-06-12 ~/.claude/projects codex 2340 45.9 GB 2025-08-21 2026-06-12 ~/.codex/sessions gemini 50 1.2 MB 2026-04-02 2026-06-10 ~/.gemini/tmp 4153 sessions across 3 tools, 47.0 GB on disk. ``` -------------------------------- ### Utility Functions Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Provides helpers for fetching JSON, formatting bytes, dates, and creating DOM elements. ```javascript /* ---------- helpers ---------- */ async function jget(url) { const r = await fetch(url); if (!r.ok) throw new Error(await r.text()); return r.json(); } function fmtBytes(n) { const u = ["B", "KB", "MB", "GB", "TB"]; let i = 0; while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; } return n.toFixed(i ? 1 : 0) + " " + u[i]; } function fmtDate(iso) { if (!iso) return "-"; return iso.slice(0, 16).replace("T", " "); } function dayGroup(iso) { if (!iso) return "earlier"; const d = new Date(iso); const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const that = new Date(d.getFullYear(), d.getMonth(), d.getDate()); const diff = Math.round((today - that) / 86400000); if (diff <= 0) return "today"; if (diff === 1) return "yesterday"; if (diff < 7) return "week"; if (diff < 31) return "month"; return "earlier"; } const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text !== undefined) n.textContent = text; return n; }; ``` -------------------------------- ### Search sessionwiki index Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/commands/recall.md Search the sessionwiki index for sessions matching the provided topic keywords, returning results in JSON format. ```bash sessionwiki search --json "$ARGUMENTS" ``` -------------------------------- ### DOM Utility and i18n Configuration Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Initializes a DOM selector utility and defines the internationalization structure for the sessionwiki interface, including support for English and Korean labels and messages. ```javascript const $ = (id) => document.getElementById(id); let activeEl = null; let currentTag = null; /* ---------- i18n ---------- */ const I18N = { en: { loading: "loading index…", searchPh: "Search sessions", allTools: "all tools", groups: { today: "Today", yesterday: "Yesterday", week: "This week", month: "This month", earlier: "Earlier" }, msgs: (n) => `${n} msgs`, subagent: "subagent", untitled: "(untitled)", noMatches: "No matches.", emptyIndex: "Index is empty - run: sessionwiki list", phTitle: "Pick a session on the left", phP1: "Everything your coding agents ever said, in one place. Search works across every tool at once - partial words and CJK included.", phP2: "The index updates when you run `sessionwiki list` or `search` in a terminal; reload this page afterwards.", messages: (n) => `${n} messages`, resumeLabel: "resume in terminal: ", copied: "copied", clickToCopy: "Click to copy", outline: (n) => `Outline · ${n} turns`, seeAlso: "See also", filtering: "filtering", filterByTag: "filter by tag", filesLabel: "Files", tracedBy: (f) => `Sessions that touched ${f}`, fileHistory: (f) => `How ${f} was written`, moreEdits: (n) => `+${n} more`, loadFailed: "Couldn't load", hint: "read-only view · refresh: sessionwiki list", themeDark: "Dark", themeLight: "Light", stats: (s, t, b) => `${s} sessions · ${t} tools · ${b}`, }, ko: { loading: "인덱스 불러오는 중…", searchPh: "세션 검색", allTools: "모든 툴", groups: { today: "오늘", yesterday: "어제", week: "이번 주", month: "이번 달", earlier: "이전" }, msgs: (n) => `메시지 ${n}`, subagent: "서브에이전트", untitled: "(제목 없음)", noMatches: "결과가 없습니다.", emptyIndex: "인덱스가 비어 있습니다 - 터미널에서 sessionwiki list 실행", phTitle: "왼쪽에서 세션을 선택하세요", phP1: "에이전트와 나눈 모든 대화를 한곳에서. 검색은 모든 툴을 한 번에 훑습니다 - 부분 단어, 한국어 모두 지원.", phP2: "터미널에서 `sessionwiki list`나 `search`를 실행하면 인덱스가 갱신됩니다. ``` -------------------------------- ### Retrieve session briefing Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/commands/recall.md Fetch a brief summary for a specific session ID retrieved from the search results. ```bash sessionwiki brief --json ``` -------------------------------- ### Search prior sessions Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/skills/session-recall/SKILL.md Search the session index for relevant past work using topic keywords. ```bash sessionwiki search --json "" ``` -------------------------------- ### Theme Management Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Applies and persists the UI theme (light/dark) based on user preference or system settings. ```javascript /* ---------- theme ---------- */ function applyTheme(t) { document.documentElement.dataset.theme = t; $("theme").textContent = t === "dark" ? L.themeLight : L.themeDark; } const savedTheme = localStorage.getItem("sdx-theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); applyTheme(savedTheme); $("theme").onclick = () => { const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark"; localStorage.setItem("sdx-theme", next); applyTheme(next); }; ``` -------------------------------- ### List archived sessions Source: https://github.com/youdie006/sessionwiki/blob/main/README.md The list command displays sessions that have been pruned by the original AI tool but are preserved in the sessionwiki archive. ```console $ sessionwiki list # after Claude pruned an old session archived 1 session(s) the tool removed (1 kept that your tools have deleted) ... a1b2c3d4 claude-code 3w ago 12 …/api-server Fix CORS preflight… [archived] ``` -------------------------------- ### Implement the Adapter trait Source: https://github.com/youdie006/sessionwiki/blob/main/CONTRIBUTING.md The Rust trait definition required for creating a new session adapter. ```rust pub trait Adapter { fn name(&self) -> &'static str; // "my-tool" fn root(&self) -> Option; // where it keeps sessions fn discover(&self) -> Vec; // every session file fn parse(&self, path: &Path) -> Result; // tolerant; skip bad lines } ``` -------------------------------- ### Trace file changes to sessions Source: https://github.com/youdie006/sessionwiki/blob/main/README.md Use the trace command to identify which AI sessions modified a specific file, displaying the results in reverse chronological order. ```console $ sessionwiki trace src/middleware/mod.rs 2 session(s) touched "src/middleware/mod.rs", newest first: 35a59790 claude-code 2026-06-09 Fix CORS preflight failing on /auth routes 4fd0ce37 claude-code 2026-06-08 Add retry with backoff to the payment webhook handler ``` -------------------------------- ### Render Session Messages and Related Sessions Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html This logic processes session messages, creates an interactive outline for user turns, renders tool and message blocks, and fetches related sessions. It uses a monotonic token to ensure that rapid clicks do not cause race conditions in the UI. ```javascript const userTurns = []; s.messages.forEach((m, i) => { const t = m.text.trimStart(); if (m.role === "user" && !t.startsWith("<") && !t.startsWith("[Request interrupted")) userTurns.push(i); }); const anchors = {}; if (userTurns.length >= 3) { const det = el("details", "outline"); det.appendChild(el("summary", "", L.outline(userTurns.length))); const ol = el("ol"); for (const i of userTurns) { const li = el("li", "", s.messages[i].text.replace(/\s+/g, " ").slice(0, 110)); li.onclick = () => anchors[i] && anchors[i].scrollIntoView({ behavior: "smooth", block: "start" }); ol.appendChild(li); } det.appendChild(ol); doc.appendChild(det); } for (const [mi, m] of s.messages.entries()) { if (m.role === "tool") { const row = el("div", "toolrow"); const det = el("details"); const sum = el("summary", "", m.text.split("\n")[0].slice(0, 140)); const body = el("div", "body", m.text); det.append(sum, body); row.appendChild(row); doc.appendChild(row); anchors[mi] = row; continue; } const wrap = el("div", "msg " + m.role); const av = el("div", "avatar", m.role === "user" ? "U" : "A"); if (m.ts) av.title = fmtDate(m.ts); const content = el("div", "content"); content.appendChild(el("div", "who", m.role)); const body = el("div", "body"); renderRich(m.text, body); content.appendChild(body); wrap.append(av, content); doc.appendChild(wrap); anchors[mi] = wrap; } // See also: related sessions (same project + shared files + shared tags). // This panel is shared with the file-history view below, so a monotonic token // guards it: a slow response never overwrites a newer one (rapid chip clicks). const seealso = el("div", "seealso"); doc.appendChild(seealso); let seealsoGen = 0; const relatedGen = ++seealsoGen; jget("/api/related/" + encodeURIComponent(s.id || id)).then((rel) => { if (relatedGen !== seealsoGen || !rel || !rel.length) return; seealso.appendChild(el("h3", "", L.seeAlso || "See also")); for (const r of rel) { const a = el("div", "rel"); a.appendChild(el("div", "t", r.title || L.untitled)); a.appendChild(el("div", "m", `${r.tool} · ${fmtDate(r.started)} · ${L.msgs(r.msgs)}`)); a.onclick = () => openSession(r.id); seealso.appendChild(a); } }).catch(() => {}); ``` -------------------------------- ### Show File History and Edit Evidence Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Displays the history of sessions that edited a specific file. It limits the number of edits shown per session to maintain UI performance. ```javascript // Clicking a touched file shows the file's evidence chain: the sessions that // edited it (newest first), each with what it changed. const EDITS_SHOWN = 6; function showFileHistory(path, chip) { document.querySelectorAll(".filechip.on").forEach((c) => c.classList.remove("on")); chip.classList.add("on"); const base = path.split("/").pop() || path; const my = ++seealsoGen; jget("/api/file?path=" + encodeURIComponent(path)).then((hist) => { if (my !== seealsoGen) return; // a newer click already owns the panel seealso.replaceChildren(el("h3", "", L.fileHistory(base))); for (const r of ((hist && hist.sessions) || [])) { const a = el("div", "rel"); a.appendChild(el("div", "t", r.title || L.untitled)); a.appendChild(el("div", "m", `${r.tool} · ${fmtDate(r.started)} · ${L.msgs(r.msgs)}`)); // The evidence: what this session actually changed in the file, bounded // so a file with a huge edit history keeps the panel snappy. if (r.edits && r.edits.length) { const ev = el("div", "edits"); for (const e of r.edits.slice(0, EDITS_SHOWN)) { const item = el("div", "edit"); item.appendChild(el("span", "editkind", e.kind)); if (e.snippet) { const snip = el("code", "editsnip", e.snippet.replace(/\s+/g, " ").trim()); snip.title = e.snippet; item.appendChild(snip); } ev.appendChild(item); } if (r.edits.length > EDITS_SHOWN) { ev.appendChild(el("div", "editmore", L.moreEdits(r.edits.length - EDITS_SHOWN))); } a.appendChild(ev); } a.onclick = () => openSession(r.id); seealso.appendChild(a); } seealso.scrollIntoView({ behavior: "smooth", block: "nearest" }); }).catch(() => { if (my !== seealsoGen) return; seealso.replaceChildren(el("h3", "", L.fileHistory(base)), el("div", "m", L.loadFailed)); }); } $("main").replaceChildren(head, doc); $("main").scrollTop = 0; } function filterByTag(tag) { currentTag = tag; $("q").value = ""; refresh(); } ``` -------------------------------- ### Language Selection Control Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Handles the language menu toggle and persistence of the selected language in localStorage. ```javascript const langctl = $("langctl"); $("langbtn").onclick = (e) => { e.stopPropagation(); const open = langctl.classList.toggle("open"); $("langmenu").hidden = !open; $("langbtn").setAttribute("aria-expanded", String(open)); }; for (const b of $("langmenu").children) { b.onclick = () => { localStorage.setItem("sdx-lang", b.dataset.lang); location.reload(); }; } document.addEventListener("click", () => { langctl.classList.remove("open"); $("langmenu").hidden = true; $("langbtn").setAttribute("aria-expanded", "false"); }); ``` -------------------------------- ### Trace file history Source: https://github.com/youdie006/sessionwiki/blob/main/plugin/skills/session-recall/SKILL.md Identify which sessions modified a specific file by providing its path. ```bash sessionwiki trace --json ``` -------------------------------- ### Refresh Data Flow Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Handles the asynchronous data fetching for search queries and tag-based filtering. ```javascript /* ---------- data flow ---------- */ async function refresh() { const q = $("q").value.trim(); const tool = $("tool").value; const t = tool ? `&tool=${encodeURIComponent(tool)}` : ""; renderTagBar(); if (q.length >= 3) { renderItems(await jget(`/api/search?q=${encodeURIComponent(q)}${t}`), true); } else if (currentTag) { renderItems(await jget(`/api/sessions?limit=200${t}&tag=${encodeURIComponent(currentTag)}`), false); } else { renderItems(await jget(`/api/sessions?limit=200${t}`), false); } ``` -------------------------------- ### Snippet Node Rendering Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Safely builds DOM nodes for text containing marked matches, avoiding innerHTML to prevent XSS. ```javascript /* Snippets mark matches with U+0002 .. U+0003; build DOM nodes, never HTML. */ function snippetNodes(text) { const frag = document.createDocumentFragment(); let inMark = false; for (const part of text.split(/([\u0002\u0003])/)) { if (part === "\u0002") { inMark = true; continue; } if (part === "\u0003") { inMark = false; continue; } if (!part) continue; if (inMark) frag.appendChild(el("mark", "", part)); else frag.appendChild(document.createTextNode(part)); } return frag; } ``` -------------------------------- ### Render Tag Bar UI Source: https://github.com/youdie006/sessionwiki/blob/main/src/webui.html Handles the creation and removal of the tag filtering bar based on the current selection. ```javascript function renderTagBar() { let bar = $("tagbar"); if (!currentTag) { if (bar) bar.remove(); return; } if (!bar) { bar = el("div", ""); bar.id = "tagbar"; bar.style.cssText = "padding:6px 14px;font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line)"; $("list").parentNode.insertBefore(bar, $("list")); } bar.replaceChildren(); const chip = el("span", "tagchip", "#" + currentTag); const x = el("span", "", " ✕"); x.style.cursor = "pointer"; x.onclick = () => { currentTag = null; refresh(); }; bar.append(document.createTextNode((L.filtering || "filtering") + ": "), chip, x); } ``` -------------------------------- ### Banner CSS Styles Source: https://github.com/youdie006/sessionwiki/blob/main/docs/banner.html Defines the base layout, typography, and color variables for the banner, including light and dark theme support. ```css * { margin:0; padding:0; box-sizing:border-box; } html,body { width:100%; height:100%; overflow:hidden; } body { font-family: "Pretendard", system-ui, sans-serif; display:flex; align-items:center; position:relative; background: linear-gradient(120deg, var(--bg1) 60%, var(--bg2) 100%); } /* light (default) */ body { --bg1:#faf9f6; --bg2:#eceae3; --ink:#1e1d1a; --muted:#6e6b62; --accent:#3b5bd6; --node:#1e1d1a; --line:#d9d6cc; --nodec:#faf9f6; } body[data-theme="dark"] { --bg1:#16161b; --bg2:#1d1d24; --ink:#e7e7ec; --muted:#9b9aa3; --accent:#93a7ef; --node:#e7e7ec; --line:#33333d; --nodec:#16161b; } .wrap { padding-left:90px; max-width:760px; z-index:2; } .brand { display:flex; align-items:center; gap:20px; } .brand svg { display:block; } .word { font-weight:800; color:var(--ink); letter-spacing:-0.025em; line-height:1; font-size:60px; } .word .dot { color:var(--accent); } .tag { margin-top:24px; color:var(--ink); font-weight:500; font-size:27px; line-height:1.38; word-break:keep-all; overflow-wrap:break-word; opacity:.88; } .tag .em { color:var(--muted); } .chips { margin-top:28px; color:var(--muted); font-weight:500; font-size:17.5px; letter-spacing:.005em; } .chips .loc { color:var(--accent); font-weight:700; } .graph { position:absolute; right:70px; top:50%; transform:translateY(-50%); z-index:1; } body[data-size="social"] .wrap { padding-left:96px; } body[data-size="social"] .word { font-size:72px; } body[data-size="social"] .tag { font-size:31px; margin-top:30px; } body[data-size="social"] .chips { font-size:20px; margin-top:34px; } body[data-size="social"] .graph { right:78px; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.