.memory-graph { width: 100%; max-width: 980px; margin: 0 auto; color: var(--ds-text-primary); }
.memory-graph [hidden] { display: none; }
.graph-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.graph-toolbar label { display: flex; align-items: center; gap: 10px; color: var(--ds-text-secondary); font: 13px var(--ds-font-ui); }
.graph-toolbar select, .graph-refresh { width: auto; max-width: 240px; padding: 9px 14px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-round); background: var(--ds-bg-canvas); color: var(--ds-text-secondary); font: 12px var(--ds-font-ui); cursor: pointer; }
.graph-status { color: var(--ds-text-muted); font: 12px/1.8 var(--ds-font-ui); margin: 14px 0 0; }
.graph-world { position: relative; isolation: isolate; height: clamp(460px, 54vh, 540px); margin: 12px 0 24px; background: none; }
.graph-world::before { content: ''; position: absolute; inset: 3% -2%; z-index: -1; pointer-events: none; opacity: .3; background: radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--ds-accent-memory) 22%, transparent), transparent 65%), url('/static/desktop-art/memory-background-v1.png') center / cover; mask-image: radial-gradient(ellipse at center, black 15%, transparent 68%); }
.graph-world > .graph-orbits, .graph-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-orbits { overflow: visible; pointer-events: none; }
.graph-star { fill: var(--ds-accent-memory-soft); }
.graph-star:nth-child(4n) { fill: var(--ds-accent-ai); }
.graph-star-bright { filter: drop-shadow(0 0 4px var(--ds-accent-memory)); }
.graph-orbit-line, .graph-orbit-glow, .graph-orbit-violet, .graph-link, .graph-link-glow, .graph-thread-dust, .graph-light { fill: none; stroke: var(--ds-accent-memory); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.graph-orbit-line { stroke-width: .9; opacity: .65; }
.graph-orbit-glow { stroke-width: 4; opacity: .35; filter: var(--graph-halo); }
.graph-orbit-violet { stroke: var(--ds-accent-ai); opacity: .3; stroke-width: .7; stroke-dasharray: 1 8; }
.graph-link { stroke-width: .85; opacity: .25; }
.graph-link-glow { stroke-width: 5; opacity: .09; filter: var(--graph-halo); }
.graph-thread-dust { stroke: var(--ds-accent-memory-soft); stroke-width: 1.7; stroke-dasharray: .2 11 .4 17; opacity: .3; }
.is-selected .graph-link { opacity: .95; stroke-width: 1.2; }
.is-selected .graph-link-glow { opacity: .35; }
.graph-light { stroke: var(--ds-accent-memory-soft); stroke-width: 2.5; stroke-dasharray: .2 99.8; animation: graph-travel 32s linear infinite; filter: drop-shadow(0 0 5px var(--ds-accent-memory)); }
.graph-node { --node-size: 66px; position: absolute; transform: translate(-50%, calc(var(--node-size) / -2)); width: 140px; padding: 0; border: 0; background: none; color: var(--ds-accent-memory-soft); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.graph-node i { position: relative; display: grid; place-items: center; width: var(--node-size); height: var(--node-size); margin: 0 auto 12px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ds-accent-memory-soft) 75%, transparent); background: radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--ds-accent-memory) 22%, transparent), transparent 58%), radial-gradient(circle, var(--ds-bg-depth) 28%, color-mix(in srgb, var(--ds-accent-memory) 20%, var(--ds-bg-canvas)) 98%); box-shadow: 0 0 8px color-mix(in srgb, var(--ds-accent-memory) 45%, transparent), var(--ds-glow-important), inset 0 0 12px color-mix(in srgb, var(--ds-accent-memory) 20%, transparent); transition: box-shadow var(--ds-duration-ui), border-color var(--ds-duration-ui); }
.graph-node i::before, .graph-node i::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.graph-node i::before { inset: -1px; border: 1px solid var(--ds-accent-memory); filter: blur(2px); }
.graph-node i::after { inset: -7px; border: 1px solid color-mix(in srgb, var(--ds-accent-memory) 12%, transparent); }
.graph-node i svg { position: relative; width: 31px; height: 31px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ds-accent-memory) 38%, transparent)); }
.graph-node-halo { position: absolute; inset: -12px; pointer-events: none; }
.graph-node i .graph-node-halo > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: none; }
.graph-node-stream, .graph-node-dust { transform-box: view-box; transform-origin: 50% 50%; animation: graph-node-orbit var(--halo-period) linear infinite; animation-delay: var(--halo-delay); }
.graph-node-dust { animation-duration: var(--dust-period); animation-direction: reverse; }
.graph-node-spark { fill: var(--ds-accent-memory-soft); filter: drop-shadow(0 0 2px var(--ds-accent-memory)); animation: graph-node-shimmer 6s ease-in-out infinite; }
.graph-node-tail { fill: none; stroke: var(--ds-accent-memory-soft); stroke-linecap: round; }
.graph-node-tail.tail-soft { stroke-width: 2.2; stroke-dasharray: 20 80; opacity: .24; filter: blur(1.2px); }
.graph-node-tail.tail-middle { stroke: var(--ds-accent-memory); stroke-width: 1.3; stroke-dasharray: 10 90; opacity: .65; }
.graph-node-tail.tail-bright { stroke: var(--ds-text-primary); stroke-width: 1.25; stroke-dasharray: 4 96; opacity: .95; }
.graph-node-comet { fill: var(--ds-text-primary); filter: drop-shadow(0 0 3px var(--ds-accent-memory)) drop-shadow(0 0 6px var(--ds-accent-memory)); }
.graph-node strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; font: 19px/1.4 var(--ds-font-display); letter-spacing: .05em; text-shadow: 0 2px 10px var(--ds-bg-canvas); }
.graph-node small { display: block; margin-top: 4px; color: var(--ds-text-secondary); opacity: .75; font: 10px/1.8 var(--ds-font-ui); letter-spacing: .04em; }
.graph-node:hover i, .graph-node[aria-pressed=true] i { border-color: var(--ds-accent-memory-soft); box-shadow: 0 0 15px color-mix(in srgb, var(--ds-accent-memory) 45%, transparent), var(--ds-glow-important), inset 0 0 22px color-mix(in srgb, var(--ds-accent-memory) 20%, transparent); }
.graph-node.graph-core { --node-size: 164px; width: 230px; }
.graph-core i { margin-bottom: 18px; background: var(--ds-bg-canvas); box-shadow: var(--ds-glow-core); }
.graph-core i::before { inset: -14px; border-color: color-mix(in srgb, var(--ds-accent-memory) 28%, transparent); filter: none; }
.graph-core i::after { inset: -28px; border-color: color-mix(in srgb, var(--ds-accent-memory) 12%, transparent); }
.graph-core-art { position: absolute; inset: -1px; border-radius: 50%; background: url('/static/desktop-art/capture.png') 49.7% 47.42% / 491.765% 276.765%; animation: graph-core-drift 150s linear infinite; }
.graph-core strong { font: 30px/1.3 var(--ds-font-display); letter-spacing: .12em; }
.graph-core small { margin-top: 7px; font-size: 11px; }
.graph-world.is-compact { height: var(--graph-height); }
.graph-world.is-compact .graph-node { --node-size: 58px; width: 110px; }
.graph-world.is-compact .graph-core { --node-size: 132px; width: 185px; }
.graph-world.is-compact .graph-node strong { font-size: 16px; }
.graph-world.is-compact .graph-core strong { font-size: 26px; }
.graph-evidence { position: relative; border-left: 1px solid var(--ds-border-strong); padding-left: 22px; margin: 20px auto 0; max-width: 780px; }
.graph-evidence::before { content: ''; position: absolute; left: -4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-accent-memory-soft); box-shadow: var(--ds-glow-important); }
.graph-evidence h2 { font: 22px/1.4 var(--ds-font-display); margin: 0; color: var(--ds-accent-memory-soft); }
.graph-explanation { font: 12px/1.8 var(--ds-font-ui); color: var(--ds-text-secondary); margin: 10px 0; }
.graph-sources { max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ds-border-strong) transparent; }
.graph-sources button { display: flex; align-items: baseline; gap: 18px; width: 100%; border: 0; border-top: 1px solid var(--ds-border-subtle); padding: 13px 6px; background: none; color: var(--ds-text-primary); text-align: left; cursor: pointer; }
.graph-sources button:hover { background: var(--ds-surface-glass); }
.graph-sources time, .graph-sources small { flex-shrink: 0; font: 11px/1.6 var(--ds-font-ui); color: var(--ds-text-muted); }
.graph-sources span { flex: 1; overflow-wrap: anywhere; font: 15px/1.6 var(--ds-font-display); }
.memory-graph :focus-visible { outline: 2px solid var(--ds-accent-memory); outline-offset: 5px; }
@keyframes graph-core-drift { to { transform: rotate(360deg); } }
@keyframes graph-node-orbit { to { transform: rotate(360deg); } }
@keyframes graph-node-shimmer { 0%, 100% { opacity: .22; } 50% { opacity: .9; } }
@keyframes graph-travel { to { stroke-dashoffset: -100; } }
@media (max-width: 600px) {
  .graph-toolbar label { font-size: 11px; gap: 5px; min-width: 0; }
  .graph-toolbar select { max-width: 150px; min-width: 0; }
  .graph-refresh { flex-shrink: 0; padding-inline: 9px; }
  .graph-sources button { flex-wrap: wrap; gap: 4px 10px; }
  .graph-sources span { flex-basis: 100%; }
  .graph-sources small { display: none; }
  .graph-evidence { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .graph-light { animation: none; display: none; } .graph-core-art { animation: none; } }
.motion-paused .graph-light, .motion-paused .graph-core-art { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .graph-node-stream, .graph-node-dust, .graph-node-spark { animation: none; } .graph-node-spark { opacity: .55; } }
.motion-paused .graph-node-stream, .motion-paused .graph-node-dust, .motion-paused .graph-node-spark { animation-play-state: paused; }