/* ─── Theme tokens ───────────────────────────────────────────────────────── All colors flow through these variables so light/dark is a single switch on . */ :root, :root[data-theme="light"] { --bg: #F4F5F7; --grid-dot: #d3d9e3; --text: #1F2937; --muted: #6B7280; --faint: #9CA3AF; --node-bg: #ffffff; --node-border: #E5E7EB; --root-border: #cbd5e1; --line: #b3bccb; --panel-bg: #ffffff; --panel-border: #E5E7EB; --panel-shadow: rgba(0, 0, 0, 0.06); --hover-bg: #F3F4F6; --accent: #3B82F6; --accent-hover: #2563EB; --accent-soft: rgba(59, 130, 246, 0.2); --kbd-bg: #F9FAFB; --kbd-border: #D1D5DB; --node-shadow: rgba(0, 0, 0, 0.08); --node-shadow-hover: rgba(0, 0, 0, 0.1); } :root[data-theme="dark"] { --bg: #0f1117; --grid-dot: #262b36; --text: #e6e8ed; --muted: #9aa3b2; --faint: #6b7280; --node-bg: #1b1f29; --node-border: #2c323d; --root-border: #3b4250; --line: #3a4150; --panel-bg: #1b1f29; --panel-border: #2c323d; --panel-shadow: rgba(0, 0, 0, 0.4); --hover-bg: #262b36; --accent: #3B82F6; --accent-hover: #60a5fa; --accent-soft: rgba(59, 130, 246, 0.28); --kbd-bg: #262b36; --kbd-border: #3b4250; --node-shadow: rgba(0, 0, 0, 0.45); --node-shadow-hover: rgba(0, 0, 0, 0.6); } body { margin: 0; background: var(--bg); font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; color: var(--text); } #canvas { width: 100%; height: 100%; position: relative; overflow: hidden; cursor: grab; background-color: var(--bg); /* Dot grid. --grid-size and --grid-pos are updated by the view transform so the grid pans and zooms together with the map. */ background-image: radial-gradient(circle, var(--grid-dot) 1.3px, transparent 1.3px); background-size: var(--grid-size, 26px) var(--grid-size, 26px); background-position: var(--grid-pos, 0 0); } #canvas.dragging { cursor: grabbing; } /* The world holds every node + the connector layer and is what pans/zooms. */ #world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; } /* Connector layer: drawn behind nodes, never intercepts pointer events. */ #links { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; width: 1px; height: 1px; } #links path { stroke: var(--line); } .node { position: absolute; top: 0; left: 0; background: var(--node-bg); color: var(--text); padding: 12px 18px; border-radius: 10px; box-shadow: 0 6px 12px var(--node-shadow); border: 1px solid var(--node-border); cursor: pointer; min-width: 120px; max-width: 260px; /* transform is set by the renderer (translate to world coords); animate it */ transition: box-shadow 0.2s ease, transform 0.22s cubic-bezier(.4, 0, .2, 1), background-color 0.2s ease, border-color 0.2s ease; } .node:hover { box-shadow: 0 10px 16px var(--node-shadow-hover); } .node .content { font-size: 14px; line-height: 1.4; color: var(--text); cursor: text; padding-left: 16px; } /* Placeholder shown for a blank node (new nodes start empty so they can't spawn children/siblings until labeled). */ .node .content:empty::before { content: "new node"; color: var(--faint); font-style: italic; } .node.selected { outline: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* The root reads a touch bolder than its children. */ .node.root { font-weight: 600; border-color: var(--root-border); } .color-picker { width: 12px; height: 12px; border-radius: 50%; background: var(--node-border); position: absolute; top: 6px; left: 8px; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.15); transition: transform 0.15s ease; flex-shrink: 0; } .color-picker:hover { transform: scale(1.3); } .add-child, .add-sibling, .collapse-toggle { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; font-weight: bold; font-size: 15px; line-height: 22px; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: background 0.2s ease, opacity 0.15s ease; } /* Add buttons appear only on hover or when the node is selected. */ .add-child, .add-sibling { opacity: 0; pointer-events: none; } .node:hover .add-child, .node:hover .add-sibling, .node.selected .add-child, .node.selected .add-sibling { opacity: 1; pointer-events: auto; } .add-child:hover, .add-sibling:hover, .collapse-toggle:hover { background: var(--accent-hover); } .add-child { bottom: -11px; right: -11px; } .add-sibling { top: -11px; right: -11px; } /* Collapse toggle sits on the leading edge, subtle until hovered. */ .collapse-toggle { right: -11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; line-height: 18px; font-size: 13px; background: var(--faint); } .node.collapsed .collapse-toggle { background: var(--accent); } /* ─── Brand / logo ─────────────────────────────────────────────────────────*/ #brand { position: fixed; top: 16px; left: 16px; z-index: 1001; display: flex; align-items: center; gap: 9px; background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 7px 14px 7px 8px; border-radius: 10px; box-shadow: 0 2px 8px var(--panel-shadow); user-select: none; } .brand-mark { width: 26px; height: 26px; border-radius: 6px; display: block; } .brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; background: linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ─── Floating panels ──────────────────────────────────────────────────────*/ #controls { position: fixed; top: 72px; left: 16px; z-index: 1000; background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 6px 12px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 240px; box-shadow: 0 2px 8px var(--panel-shadow); } #controls button { width: 32px; height: 32px; font-size: 18px; background: transparent; border: none; cursor: pointer; color: var(--text); transition: background 0.2s ease; border-radius: 6px; } #controls button:hover { background: var(--hover-bg); } #controls span { font-weight: 600; font-size: 14px; min-width: 50px; text-align: center; } /* Theme toggle — top-right pill. */ #theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 1000; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 10px; cursor: pointer; color: var(--text); box-shadow: 0 2px 8px var(--panel-shadow); transition: background 0.2s ease, color 0.2s ease; } #theme-toggle:hover { background: var(--hover-bg); } #theme-toggle svg { width: 20px; height: 20px; } #shortcut-help { position: fixed; top: 184px; left: 16px; z-index: 1000; background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 6px 12px; border-radius: 10px; width: 270px; font-size: 13px; box-shadow: 0 2px 8px var(--panel-shadow); transition: all 0.2s ease; color: var(--text); } #shortcut-help summary { cursor: pointer; font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--text); } #shortcut-help .hint { font-weight: normal; font-size: 12px; margin-left: 6px; color: var(--muted); } /* Legend explaining the two platform modifier glyphs. */ #shortcut-help .legend { display: flex; align-items: center; gap: 5px; margin: 0 0 10px; font-size: 11.5px; color: var(--muted); } #shortcut-help ul { list-style: none; padding: 0; margin: 6px 0 0 0; } #shortcut-help li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 7px 0; line-height: 1.4; color: var(--text); } /* A group of one or more keycaps for a single shortcut. */ #shortcut-help .keys { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; } /* The "+" and "/" separators between caps. */ #shortcut-help .keys span { color: var(--faint); font-size: 11px; margin: 0 1px; } #shortcut-help .muted { color: var(--faint); font-size: 11.5px; } /* Keycap — looks like a physical key, works for both glyphs and words. */ #shortcut-help kbd { font-family: 'Inter', sans-serif; font-size: 11px; line-height: 1; min-width: 12px; padding: 4px 6px; text-align: center; color: var(--text); background: var(--kbd-bg); border: 1px solid var(--kbd-border); border-bottom-width: 2px; border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); white-space: nowrap; } #save-bar { position: fixed; top: 128px; left: 16px; z-index: 1000; background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 6px 12px; border-radius: 10px; width: 240px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--panel-shadow); } #save-bar button { border: none; background: transparent; cursor: pointer; font-size: 14px; padding: 6px 12px; border-radius: 6px; color: var(--text); transition: background 0.2s ease; } #save-bar button:hover { background: var(--hover-bg); }